/* Catalogue page — standalone styles on shared tokens. */

*,
*::before,
*::after { box-sizing: border-box; }

html { min-height: 100%; scroll-behavior: smooth; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: auto;
  margin: 0;
  overflow-x: hidden;
  background: var(--milk);
  color: var(--graphite);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button,
input,
textarea { font: inherit; }
button,
a { -webkit-tap-highlight-color: transparent; }

/* ---------- шапка ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  overflow: visible;
  padding: 0;
  background: rgba(239, 238, 236, .96);
  backdrop-filter: blur(10px);
  color: var(--graphite);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.nav-container {
  box-sizing: border-box;
  width: min(calc(100% - 40px), var(--container));
  max-width: none;
  min-height: 88px;
  display: grid;
  grid-template-columns: 120px minmax(280px, 592px) auto;
  justify-content: space-between;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin: 0 auto;
  padding-inline: 0;
}

.nav-brand img {
  width: 120px;
  height: auto;
}

.nav-brand { display: inline-flex; align-items: center; text-decoration: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3.2vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links li,
.nav-links li + li {
  margin: 0;
}

.nav-links a { color: var(--graphite); text-decoration: none; }
.nav-links a:hover { color: var(--burgundy); }
.nav-links .tg-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 21px;
  background: var(--burgundy);
  border-radius: var(--radius-sm);
  transition: background-color var(--ease);
}
.nav-links a.tg-btn,
.nav-links a.tg-btn:visited { color: var(--white); }
.nav-links .tg-btn:hover { background: var(--burgundy-dark); color: var(--white); }
.nav-user-avatar-link {
  /* flex, а не inline-flex: у строчного бокса снизу остаётся зазор под выносные,
     li вырастал до 46 px против 42 у переключателя языка, и аватар вставал на
     два пикселя выше. Замерено на стенде; у chat и course перекоса нет. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border-radius: 50%;
  text-decoration: none;
}
.nav-user-avatar-img { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; object-fit: cover; }
.nav-user-avatar-link:hover { background-color: rgba(52, 55, 69, .06); }

/* Переключатель языка — сегментированный контрол, одинаковый на всех страницах
   (эталон — chat.html). Разделитель «/» скрыт: границу задаёт сама капсула.
   Цвет неактивного не произвольный: #4a4b50 проходит 4.5:1 и на светлой шапке
   (6.89), и на белой шапке лендинга (7.88), и на жёлтой шапке профиля (4.91).
   Исходный --smoke из эталона давал 2.08:1 — нечитаемо на 10px. */
.nav-links .nav-lang-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(34px, 1fr));
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 3px;
  background: rgba(143, 163, 176, .12);
  border: 1px solid rgba(143, 163, 176, .2);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px;
  letter-spacing: .06em;
}
.nav-links .nav-lang-switch a {
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  color: #4a4b50;
  opacity: 1;
  text-decoration: none;
  transition: color var(--ease), background-color var(--ease), box-shadow 400ms cubic-bezier(.34, 1.56, .64, 1), transform 400ms cubic-bezier(.34, 1.56, .64, 1);
}
.nav-links .nav-lang-switch a:hover {
  color: var(--burgundy);
  background: rgba(255, 255, 255, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.nav-links .nav-lang-switch a[aria-current="page"] {
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 5px 12px -9px rgba(41, 44, 55, .8);
  color: var(--burgundy);
  font-weight: 650;
  transform: translateY(-1px);
}
.nav-links .nav-lang-switch span { display: none; }

/* ---------- поиск в шапке ---------- */
nav .filter-container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  transition: grid-template-columns 340ms cubic-bezier(.2, .7, .2, 1), gap 340ms cubic-bezier(.2, .7, .2, 1);
}

nav .filter-container:focus-within,
nav .filter-container.search-engaged,
nav .filter-container.tag-dialog-open,
nav .filter-container.has-tag-selection {
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
}

nav .search-wrapper {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 42px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-left: 15px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(214, 213, 209, .9);
  border-radius: 8px;
  transform: translateZ(0);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 300ms cubic-bezier(.2, .7, .2, 1),
    transform 300ms cubic-bezier(.2, .7, .2, 1);
  animation: search-enter 520ms cubic-bezier(.2, .7, .2, 1) both;
}

nav .search-wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--burgundy);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 360ms cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}

nav .search-wrapper:focus-within {
  background: var(--white);
  border-color: var(--smoke);
  box-shadow: 0 8px 24px -16px rgba(52, 55, 69, .45), 0 0 0 3px rgba(143, 163, 176, .1);
  transform: translateY(-1px);
}

nav .search-wrapper:focus-within::after { transform: scaleX(1); }

nav .search-icon {
  color: var(--smoke);
  font-size: 14px;
  transition: color 220ms ease, transform 300ms cubic-bezier(.2, .7, .2, 1);
}

nav .search-wrapper:focus-within .search-icon {
  color: var(--burgundy);
  transform: translateX(2px) scale(1.08);
}

nav #searchInput {
  min-width: 0;
  flex: 1;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--graphite);
  font-size: 13px;
}

nav #searchInput::placeholder {
  color: var(--smoke);
  transition: color 220ms ease, opacity 220ms ease, transform 300ms cubic-bezier(.2, .7, .2, 1);
}

nav .search-wrapper:focus-within #searchInput::placeholder {
  color: var(--secondary);
  opacity: .72;
  transform: translateX(3px);
}

nav .tag-launcher {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 0;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background: var(--white);
  border: 0 solid var(--border);
  border-radius: 50%;
  color: var(--smoke);
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0;
  transform: translateX(-10px) scale(.76);
  pointer-events: none;
  transition: width 340ms cubic-bezier(.2, .7, .2, 1), color var(--ease), border-color var(--ease), background-color var(--ease), opacity 220ms ease, transform 340ms cubic-bezier(.2, .7, .2, 1);
}
nav .tag-launcher[hidden] { display: none; }
nav .filter-container:focus-within .tag-launcher,
nav .filter-container.search-engaged .tag-launcher,
nav .filter-container.tag-dialog-open .tag-launcher,
nav .filter-container.has-tag-selection .tag-launcher {
  width: 42px;
  overflow: visible;
  border-width: 1px;
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
nav .tag-launcher:hover,
nav .tag-launcher:focus-visible {
  border-color: var(--smoke);
  color: var(--burgundy);
  outline: none;
}
nav .tag-launcher.has-selection {
  background: var(--graphite);
  border-color: var(--graphite);
  color: #f0c68a;
}
nav .tag-launcher.has-selection::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 7px;
  height: 7px;
  background: var(--burgundy);
  border: 2px solid var(--milk);
  border-radius: 50%;
}

@keyframes search-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- сцена текущего квеста ---------- */
#currentQuestPanel {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--container) + 40px);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px) 20px 0;
}
#currentQuestPanel:empty { display: none; padding: 0; }

.stage-card {
  position: relative;
  box-sizing: border-box;
  min-height: clamp(330px, 34vw, 430px);
  display: block;
  overflow: hidden;
  background: #ddd9d2;
  border: 1px solid var(--border);
  border-radius: 12px;
  isolation: isolate;
}

.stage-card .stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: #ddd9d2;
}

.stage-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  transition: transform 800ms cubic-bezier(.2, .7, .2, 1);
}

.stage-card:hover .stage-bg img { transform: scale(1.015); }

.stage-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(239, 238, 236, .99) 0%,
      rgba(239, 238, 236, .97) 34%,
      rgba(239, 238, 236, .78) 52%,
      rgba(239, 238, 236, .22) 76%,
      rgba(41, 44, 55, .08) 100%),
    linear-gradient(0deg, rgba(41, 44, 55, .08), transparent 42%);
}

.stage-main {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(58%, 640px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  padding: clamp(34px, 5vw, 64px);
}

.stage-kicker {
  margin: 0 0 14px;
  color: var(--burgundy);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.stage-card h2 {
  max-width: 17ch;
  margin: 0;
  color: var(--graphite);
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.06;
  text-wrap: balance;
}

.stage-next {
  max-width: 48ch;
  margin: 18px 0 0;
  color: var(--secondary);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.55;
}

.stage-track {
  width: min(100%, 490px);
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
}
.stage-track .rail {
  position: relative;
  flex: 1;
  height: 3px;
  overflow: hidden;
  background: rgba(52, 55, 69, .16);
  border-radius: 99px;
}
.stage-track .rail i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  display: block;
  background: var(--burgundy);
  border-radius: inherit;
}
.stage-track .lbl {
  color: var(--secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stage-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.stage-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 12px 18px;
  background: var(--burgundy);
  color: var(--white);
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color var(--ease), transform var(--ease);
}
.stage-btn:hover,
.stage-btn:focus-visible { background: var(--burgundy-dark); transform: translateY(-2px); }
.stage-btn__arrow { transition: transform var(--ease); }
.stage-btn:hover .stage-btn__arrow,
.stage-btn:focus-visible .stage-btn__arrow { transform: translateX(3px); }

.stage-link {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
  color: var(--secondary);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--ease), border-color var(--ease);
}
.stage-link:hover,
.stage-link:focus-visible { color: var(--burgundy); border-color: var(--burgundy); }

/* Когда есть текущий квест, сцена уже объясняет страницу. */
body.has-current-quest .catalog-head { display: none; }

/* ---------- общая сетка и заголовок ---------- */
main.courses-container {
  width: 100%;
  max-width: calc(var(--container) + 40px);
  margin: 0 auto;
  padding: 0 20px clamp(76px, 9vw, 124px);
}

.catalog-head {
  width: 100%;
  max-width: calc(var(--container) + 40px);
  margin: 0 auto;
  padding: 68px 20px 0;
}
.catalog-head h1.darkblue {
  max-width: none;
  margin: 0;
  color: var(--graphite-deep);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.16;
}
.catalog-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 46px;
}
.catalog-benefit {
  min-width: 0;
  padding-top: 18px;
  border-top: 2px solid var(--graphite-deep);
}
.catalog-benefit:first-child { border-color: var(--burgundy); }
.catalog-benefit h2 {
  margin: 0;
  color: var(--graphite-deep);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.3;
}
.catalog-benefit p {
  margin: 16px 0 0;
  color: var(--secondary);
  font-size: 16px;
  line-height: 1.6;
}
.catalog-hint { margin: 54px 0 0; }
.catalog-hint button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--burgundy);
  color: var(--white);
  font-size: 16px;
  cursor: pointer;
  transition: background-color var(--ease);
}
.catalog-hint button:hover { background: var(--burgundy-dark); }
.catalog-hint button:focus-visible,
.nav-container a:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 4px;
}


.catalog-sectionbar {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 72px 0 24px;
}
.catalog-section-desc {
  margin: 0 0 20px;
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.5;
}
.catalog-sectionbar h2 {
  margin: 0;
  color: var(--graphite);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.035em;
}
.catalog-sectionbar .rule { flex: 1; height: 1px; background: var(--border); }
.catalog-sectionbar .n { color: var(--smoke); font-size: 12.5px; white-space: nowrap; }

.loading {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--secondary);
}
.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--border);
  border-top-color: var(--burgundy);
  border-radius: 50%;
  animation: catalog-spin .8s linear infinite;
}
@keyframes catalog-spin { to { transform: rotate(360deg); } }
.catalog-notice {
  width: 100%;
  margin: 40px 0;
  color: var(--secondary);
  font-weight: 400;
  text-align: center;
}

/* ---------- карточки курсов: прежний вариант ---------- */
.cards-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.pro-card {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
}
.pro-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -20px rgba(52, 55, 69, .28);
}

.pro-card-media { position: relative; }
.pro-card-image { position: relative; width: 100%; height: auto; overflow: hidden; aspect-ratio: 3 / 2; background: #ddd9d2; }
.pro-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease), opacity var(--ease); }
.pro-card-image:not(.loaded) img { opacity: 0; }
.pro-card-image.loaded img { opacity: 1; }
.pro-card:hover .pro-card-image img { transform: scale(1.035); }
.image-placeholder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #f5f4f2, #e5e3df);
}
.placeholder-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder-gradient {
  position: absolute;
  inset: -50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .58), transparent);
  transform: translateX(-55%) rotate(18deg);
  animation: catalog-placeholder 1.6s ease-in-out infinite;
}
.placeholder-icon { position: relative; z-index: 1; color: var(--smoke); font-size: 24px; }
.pro-card-image.loaded .placeholder-content { display: none !important; }
@keyframes catalog-placeholder {
  to { transform: translateX(55%) rotate(18deg); }
}
.pro-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(41, 44, 55, 0) 40%, rgba(41, 44, 55, .62) 74%, rgba(41, 44, 55, .88) 100%);
  pointer-events: none;
}
.pro-card-onimg { position: absolute; right: 18px; bottom: 14px; left: 18px; z-index: 2; }
.pro-card-onimg .pro-card-tags { margin-bottom: 8px; }
.pro-card-onimg .pro-card-tag {
  margin-right: 12px;
  padding: 0;
  background: transparent;
  color: var(--white);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pro-card-onimg h3 {
  margin: 0;
  color: var(--white);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.pro-card-content { padding: 16px 20px 19px; }
.pro-card-content p { color: var(--secondary); font-size: 14px; }
.pro-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}
.pro-card-meta { color: var(--smoke); font-size: 12.5px; }
.pro-card-cta { margin-top: 0; color: var(--burgundy); font-weight: 500; }
.pro-card:hover .pro-card-cta .arrow { transform: translateX(4px); }

/* ---------- поддержка ---------- */
body.support-open,
body.tag-open { overflow: hidden; }

.support-modal,
.tag-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(41, 44, 55, .48);
  backdrop-filter: blur(8px);
}
.support-modal { padding: 0; background: rgba(41, 44, 55, .34); backdrop-filter: blur(6px); }

.support-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 596px);
  height: min(744px, calc(100dvh - 48px));
  margin: auto 24px 24px auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(214, 213, 209, .78);
  border-radius: 14px;
  box-shadow: 0 24px 70px -26px rgba(41, 44, 55, .58);
  transform-origin: calc(100% - 34px) 100%;
  animation: support-dialog-enter var(--motion-move) var(--motion-spring) both;
}
.support-dialog.is-closing { animation: support-dialog-leave 210ms ease-in both; }

.support-dialog__header {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 40px 40px;
  align-items: center;
  gap: 10px;
  padding: 19px 18px 17px 22px;
}

.support-dialog__avatar {
  width: 92px;
  height: 66px;
  object-fit: contain;
  transform-origin: 50% 85%;
  animation: support-yuki-hello 820ms var(--motion-throw) 180ms both;
}
.support-dialog__heading { min-width: 0; }
.support-dialog h2 {
  margin: 0;
  color: var(--graphite);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.15;
  text-align: left;
}

.support-dialog__heading p {
  margin: 3px 0 0;
  color: var(--secondary);
  font-size: 13.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.support-menu-toggle,
.support-dialog .support-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--milk);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--secondary);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease, transform var(--motion-press) ease;
}
.support-menu-toggle:hover,
.support-dialog .support-close:hover { background: var(--white); border-color: var(--smoke); color: var(--graphite); }
.support-menu-toggle:active,
.support-dialog .support-close:active { transform: scale(.94); }
.support-dialog .support-close { position: static; font-size: 22px; line-height: 1; }

.support-menu {
  position: absolute;
  z-index: 4;
  top: 66px;
  right: 66px;
  width: 220px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 40px -22px rgba(41, 44, 55, .5);
  animation: support-menu-in var(--dur-fast) var(--motion-spring) both;
}
.support-menu[hidden] { display: none; }
.support-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 7px;
  color: var(--graphite);
  font-size: 13px;
  text-decoration: none;
}
.support-menu a:hover { background: var(--milk); color: var(--burgundy); }

.support-conversation {
  min-height: 0;
  padding: 28px 24px 18px;
  overflow: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.support-message {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  margin-bottom: 16px;
}
.support-message > img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}
.support-message p {
  max-width: 380px;
  margin: 0;
  padding: 14px 16px;
  background: #f0ebec;
  background: color-mix(in srgb, var(--burgundy) 7%, var(--milk));
  border-radius: 14px 14px 14px 5px;
  color: var(--graphite);
  font-size: 14px;
  line-height: 1.55;
}
.support-message--intro { animation: support-message-in var(--motion-move) var(--motion-spring) 170ms both; }

.support-quick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-left: 64px;
}
.support-quick button {
  min-height: 38px;
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--burgundy);
  border-radius: var(--radius-pill);
  color: var(--burgundy);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
              transform var(--motion-feedback) var(--motion-spring), opacity var(--dur-fast) ease;
  animation: support-chip-in var(--motion-move) var(--motion-spring) both;
}
.support-quick button:nth-child(1) { animation-delay: 270ms; }
.support-quick button:nth-child(2) { animation-delay: 330ms; }
.support-quick button:nth-child(3) { animation-delay: 390ms; }
.support-quick button:hover { background: var(--burgundy); color: var(--white); transform: translateX(4px); }
.support-quick button:active { transform: translateX(4px) scale(.97); }
.support-quick.is-used button:not(.is-selected) { opacity: .45; }

.support-answer { display: grid; gap: 13px; margin-top: 18px; }
.support-answer:empty { display: none; }
.support-chat-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  justify-self: stretch;
}
.support-chat-row > img {
  width: 54px;
  height: 46px;
  object-fit: contain;
}
.support-chat-message {
  max-width: 82%;
  padding: 12px 15px;
  border-radius: 14px;
  color: var(--graphite);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: support-message-in var(--motion-feedback) var(--motion-throw) both;
}
.support-chat-message--user {
  justify-self: end;
  background: var(--burgundy);
  border-radius: 14px 14px 5px 14px;
  color: var(--white);
}
.support-chat-message--assistant {
  justify-self: start;
  background: var(--milk);
  border-radius: 14px 14px 14px 5px;
}
.support-chat-row--assistant .support-chat-message { max-width: min(100%, 380px); }

.support-typing {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 0;
  padding: 8px 13px 8px 7px;
  background: #f0ebec;
  background: color-mix(in srgb, var(--burgundy) 7%, var(--milk));
  border: 1px solid rgba(110, 38, 57, .1);
  border-radius: 14px 14px 14px 5px;
  animation: support-message-in var(--motion-feedback) var(--motion-spring) both;
}
.support-typing[hidden] { display: none; }
.support-typing > img { width: 38px; height: 32px; flex: 0 0 auto; object-fit: contain; }
.support-typing__dots { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.support-typing__dots i {
  width: 5px;
  height: 5px;
  display: block;
  background: #9c6473;
  background: color-mix(in srgb, var(--burgundy) 62%, var(--white));
  border-radius: 50%;
  animation: support-dot 1.05s ease-in-out infinite;
}
.support-typing__dots i:nth-child(2) { animation-delay: 120ms; }
.support-typing__dots i:nth-child(3) { animation-delay: 240ms; }

.support-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: end;
  gap: 10px;
  margin: 0 22px;
  padding: 6px 6px 6px 15px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 13px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.support-composer:focus-within { border-color: var(--smoke); box-shadow: 0 0 0 3px rgba(143, 163, 176, .12); }
.support-composer textarea {
  width: 100%;
  max-height: 112px;
  min-height: 36px;
  padding: 7px 0 6px;
  resize: none;
  overflow-y: auto;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--graphite);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
}
.support-composer textarea::placeholder { color: var(--smoke); }
.support-composer button[type="submit"] {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--burgundy);
  border: 0;
  border-radius: 50%;
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, transform var(--motion-feedback) var(--motion-spring), opacity var(--dur-fast) ease;
}
.support-composer button[type="submit"]:hover { background: var(--burgundy-dark); transform: translateY(-2px) rotate(-4deg); }
.support-composer button[type="submit"]:disabled { opacity: .58; cursor: wait; }
.support-dialog__developer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 22px 18px;
  padding: 0 4px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
}
.support-dialog__developer strong { color: var(--burgundy); font-weight: 500; }
.support-dialog__developer:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.support-dialog__developer-icon { color: var(--secondary); font-size: 13px; }
.support-dialog__developer-arrow { margin-left: auto; color: var(--burgundy); transition: transform var(--dur-fast) ease; }
.support-dialog__developer:hover .support-dialog__developer-arrow { transform: translate(2px, -2px); }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes support-dialog-enter {
  from { opacity: 0; transform: translateY(34px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes support-dialog-leave {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(18px) scale(.96); }
}
@keyframes support-yuki-hello {
  0% { opacity: 0; transform: translateY(12px) rotate(-8deg) scale(.78); }
  58% { opacity: 1; transform: translateY(-3px) rotate(5deg) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes support-yuki-nod { 50% { transform: translateY(2px) rotate(3deg); } }
@keyframes support-message-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes support-chip-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes support-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes support-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.tag-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 620px);
  max-height: calc(100dvh - 40px);
  padding: clamp(26px, 5vw, 44px);
  overflow-y: auto;
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 14px;
  box-shadow: 0 32px 90px -28px rgba(41, 44, 55, .62);
  animation: support-dialog-enter 260ms cubic-bezier(.2, .7, .2, 1) both;
}

.tag-dialog__eyebrow {
  margin: 0 0 12px;
  color: var(--burgundy);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.tag-dialog h2 {
  margin: 0;
  color: var(--graphite);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.1;
}
.tag-dialog > p:not(.tag-dialog__eyebrow) {
  max-width: 48ch;
  margin: 14px 0 0;
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.55;
}
.tag-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--secondary);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.tag-dialog__close:hover { border-color: var(--smoke); color: var(--graphite); }
#tagFilter.tag-dialog__list {
  max-height: min(38vh, 300px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 9px;
  margin: 28px 0 0;
  padding: 2px 2px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 1;
  pointer-events: auto;
  transition: none;
}
.tag-choice {
  min-height: 38px;
  padding: 8px 13px;
  background: var(--milk);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--secondary);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color var(--ease), background-color var(--ease), border-color var(--ease), transform var(--ease);
}
.tag-choice:hover { border-color: var(--smoke); color: var(--graphite); transform: translateY(-1px); }
.tag-choice.selected {
  background: var(--graphite);
  border-color: var(--graphite);
  color: var(--white);
}
.tag-dialog__actions {
  display: grid;
  grid-template-columns: auto minmax(190px, 1fr);
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.tag-dialog__clear,
.tag-dialog__apply {
  min-height: 46px;
  padding: 11px 16px;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.tag-dialog__clear {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--secondary);
}
.tag-dialog__clear:hover { border-color: var(--smoke); color: var(--graphite); }
.tag-dialog__apply {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--burgundy);
  border: 1px solid var(--burgundy);
  color: var(--white);
}
.tag-dialog__apply:hover { background: var(--burgundy-dark); border-color: var(--burgundy-dark); }

/* ---------- авторизация и регистрация ---------- */
body.auth-open { overflow: hidden; }

#telegram-login-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  width: auto;
  height: auto;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transform: none;
  background: rgba(41, 44, 55, .52);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(9px);
  text-align: left;
}

#telegram-login-content {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 1000px);
  max-width: 1000px;
  max-height: calc(100dvh - 40px);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 34px 100px -34px rgba(41, 44, 55, .7);
  color: var(--graphite);
  animation: auth-card-enter 320ms cubic-bezier(.2, .7, .2, 1) both;
  text-align: left;
}

.auth-brand {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 92px 28px 40px;
}
.auth-brand img { width: 120px; height: auto; }
.auth-brand::after { content: ""; flex: 1; height: 2px; background: var(--burgundy); }

.auth-story {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  margin-bottom: 34px;
  padding: 24px 40px 24px 34px;
  border-left: 1px solid var(--border);
  color: var(--graphite);
}
.auth-story__label {
  margin: 0;
  max-width: 11em;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.12;
}
.auth-story__points {
  display: grid;
  gap: 0;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.auth-story__points li {
  position: relative;
  padding: 0 0 30px 42px;
  min-height: 90px;
}
.auth-story__points li:last-child { padding-bottom: 0; min-height: 0; }
.auth-story__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--burgundy);
  border-radius: 50%;
  background: var(--white);
}
.auth-story__points li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 1px;
  left: 11px;
  width: 1px;
  background: var(--burgundy);
}
.auth-story__points strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.025em; }
.auth-story__points p { margin: 7px 0 0; color: var(--secondary); font-size: 13px; line-height: 1.55; }

#telegram-login-content .modal-inner {
  grid-column: 1;
  grid-row: 2;
  box-sizing: border-box;
  min-width: 0;
  padding: 8px 40px 34px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: var(--border) transparent;
}

#telegram-login-modal button.close-modal {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--secondary);
  font: inherit;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), transform var(--ease);
}
#telegram-login-modal button.close-modal:hover { color: var(--graphite); border-color: var(--smoke); transform: rotate(5deg); }
#telegram-login-modal button.close-modal:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }

.auth-header { padding-right: 0; overflow-wrap: anywhere; }
.auth-eyebrow {
  margin: 0 0 9px;
  color: var(--burgundy);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}
#telegram-login-content .auth-header h2,
#telegram-login-content #email-title {
  margin: 0;
  color: var(--graphite);
  font-size: clamp(30px, 4vw, 40px) !important;
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.08;
  text-align: left;
}
.auth-header > p:last-child { max-width: 42ch; margin: 15px 0 0; color: var(--secondary); font-size: 13px; line-height: 1.55; }

.auth-channel-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  background: var(--milk);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.auth-channel-switch { margin-top: 27px; }
.auth-mode-switch { margin: 19px 0 21px; }
.auth-channel-switch button,
.auth-mode-switch button {
  min-height: 38px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--secondary);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.auth-channel-switch button.active,
.auth-mode-switch button.active {
  background: var(--white);
  color: var(--graphite);
  box-shadow: 0 3px 10px rgba(41, 44, 55, .08);
}

#auth-view-email,
#auth-view-telegram { animation: auth-view-enter 220ms ease both; }

#email-form { display: grid; gap: 15px; }
.auth-field { position: relative; margin: 0; }
.auth-field > label {
  display: block;
  margin-bottom: 7px;
  color: var(--graphite);
  font-size: 11.5px;
  font-weight: 500;
}
.auth-input-wrap { position: relative; }
.auth-input-wrap > .fas {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  color: var(--smoke);
  font-size: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}
#auth-view-email .auth-input-wrap input,
#forgot-password-block > input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 11px 42px 11px 38px !important;
  background: var(--milk);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--graphite);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: background-color var(--ease), border-color var(--ease), box-shadow var(--ease);
}
#forgot-password-block > input { padding-inline: 13px; }
#auth-view-email .auth-input-wrap input::placeholder,
#forgot-password-block > input::placeholder { color: var(--smoke); }
#auth-view-email .auth-input-wrap input:focus,
#forgot-password-block > input:focus {
  background: var(--white);
  border-color: var(--smoke);
  box-shadow: 0 0 0 3px rgba(143, 163, 176, .11);
}
#pass-eye-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--secondary);
  cursor: pointer;
  transform: translateY(-50%);
}
#pass-eye-btn i { color: inherit; font-size: 13px; }

.auth-consents {
  display: grid;
  gap: 10px;
  margin: 3px 0;
  padding: 14px 15px;
  border-radius: 8px;
}
#telegram-login-content .checkbox-container,
#telegram-login-content #email-consent-section .checkbox-container {
  position: relative;
  max-width: none;
  display: block;
  margin: 0;
  padding: 0 0 0 27px;
  overflow-wrap: anywhere;
  color: var(--secondary);
  font-size: 11.5px;
  line-height: 1.48;
  cursor: pointer;
  text-align: left;
}
#telegram-login-content .checkbox-container > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
#telegram-login-content .checkbox-container:focus-within .checkmark {
  outline: 2px solid var(--burgundy);
  outline-offset: 2px;
}
#telegram-login-content .checkbox-container .checkmark,
#telegram-login-content #email-consent-section .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 5px;
}
#telegram-login-content .checkbox-container input:checked ~ .checkmark { background: var(--burgundy); border-color: var(--burgundy); }
#telegram-login-content #email-consent-section .checkbox-container input:checked + .checkmark {
  background: var(--burgundy);
  border-color: var(--burgundy);
}
#telegram-login-content .checkbox-container input:checked + .checkmark::after {
  content: "";
  position: absolute;
  display: block;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#telegram-login-content .checkbox-container .checkmark::after,
#telegram-login-content #email-consent-section .checkbox-container .checkmark::after {
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border-width: 0 2px 2px 0;
}
#telegram-login-content .checkbox-container a { color: var(--burgundy); text-decoration: underline; text-underline-offset: 2px; }

#btn-submit,
#forgot-btn,
#verify-submit {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 11px 16px;
  background: var(--burgundy);
  border: 1px solid var(--burgundy);
  border-radius: 7px;
  color: var(--white);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), transform var(--ease), opacity var(--ease);
}
#btn-submit:hover:not(:disabled),
#forgot-btn:hover:not(:disabled),
#verify-submit:hover:not(:disabled) { background: var(--burgundy-dark); border-color: var(--burgundy-dark); transform: translateY(-1px); }
#btn-submit:disabled,
#forgot-btn:disabled,
#verify-submit:disabled { opacity: .42; cursor: not-allowed; }

#forgot-link-container { margin-top: 10px; text-align: right; }
#forgot-link-container a { color: var(--secondary); font-size: 11.5px; text-decoration: none; }
#forgot-link-container a:hover { color: var(--burgundy); }

.auth-alert {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}
.auth-alert--error { background: rgba(110, 38, 57, .09); color: var(--burgundy-dark); }
.auth-alert--success { background: rgba(52, 55, 69, .1); color: #343745; }

#forgot-password-block {
  margin-top: 18px;
  padding-top: 20px;
}
#forgot-password-block h3 { margin: 0; color: var(--graphite); font-size: 23px; font-weight: 500; letter-spacing: -.035em; }
#forgot-password-block > p:not(.auth-eyebrow) { margin: 8px 0 16px; color: var(--secondary); font-size: 12.5px; line-height: 1.5; }
#forgot-password-block > input { margin-bottom: 10px; }
#forgot-msg { margin-top: 8px; font-size: 12px; text-align: left; }
.forgot-msg--error { color: var(--burgundy-dark); }
.forgot-msg--success { color: #343745; }
.forgot-cancel {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  background: transparent;
  border: 0;
  color: var(--secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

#auth-view-telegram { padding-top: 18px; }
#auth-view-telegram .auth-consents { margin-top: 0; }
#agreement-warning-message { margin: 12px 0; color: var(--secondary); font-size: 11.5px; text-align: center; }
#telegram-login-container {
  width: fit-content;
  min-width: 240px;
  min-height: 48px;
  margin: 16px auto 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color-scheme: only light;
  line-height: 0;
  text-align: center;
}
#telegram-login-container iframe {
  display: block;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  color-scheme: only light;
}

/* ---------- шаг «введите код из письма» ----------
   Один визуальный объект вместо набора полей: код и действие собраны в билет.
   Его состояния перетекают друг в друга — появление, готовность, проверка и
   подтверждение. Все длительности и кривые берём из tokens.css. */
#auth-view-email.is-leaving { animation: verify-leave 180ms ease forwards; }

.is-verifying .auth-story { display: none; }
#telegram-login-content.is-verifying { width: min(100%, 820px); grid-template-columns: minmax(0, 1fr); }
#telegram-login-content.is-verifying .modal-inner { padding: 48px clamp(42px, 8vw, 92px) 34px; }

.auth-verify { position: relative; min-height: 500px; text-align: center; }
.auth-verify__mail { width: 56px; height: 56px; margin: 0 auto 20px; }
.auth-verify__mail svg { display: block; overflow: visible; }
.auth-verify__ring { fill: var(--milk); stroke: var(--border); }
.auth-verify__letter rect { fill: var(--white); stroke: var(--burgundy); stroke-width: 1.6; }
.auth-verify__letter path { stroke: var(--burgundy); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.auth-verify__envelope { fill: var(--white); stroke: var(--graphite); stroke-width: 1.6; stroke-linejoin: round; }
.auth-verify__flap { stroke: var(--graphite); stroke-width: 1.6; stroke-linejoin: round; }

#telegram-login-content .auth-verify h2 {
  margin: 0;
  color: var(--graphite);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.auth-verify .auth-eyebrow { margin-bottom: 10px; }
.auth-verify__lead { max-width: 52ch; margin: 12px auto 0; color: var(--secondary); font-size: 14px; line-height: 1.55; }
.auth-verify__lead strong { color: var(--graphite); font-weight: 500; overflow-wrap: anywhere; }

#verify-form { display: grid; gap: 12px; margin-top: 34px; }
#verify-form .auth-alert { margin: 0; }

.auth-verify__ticket-shell {
  position: relative;
  filter: drop-shadow(0 14px 18px rgba(41, 44, 55, .14));
  transition: transform var(--motion-feedback) var(--motion-spring), filter var(--dur-base) ease;
}
.auth-verify__ticket {
  --ticket-stub: 176px;
  --ticket-rib: 4px;
  --ticket-step: 15px;
  --ticket-notch: 11px;
  position: relative;
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ticket-stub);
  align-items: stretch;
  overflow: hidden;
  border-radius: 4px;
  isolation: isolate;
  -webkit-mask:
    radial-gradient(circle var(--ticket-rib) at 0 50%, transparent calc(var(--ticket-rib) - .6px), #000 var(--ticket-rib)) left top / 100% var(--ticket-step) repeat-y,
    radial-gradient(circle var(--ticket-rib) at 100% 50%, transparent calc(var(--ticket-rib) - .6px), #000 var(--ticket-rib)) right top / 100% var(--ticket-step) repeat-y,
    radial-gradient(circle var(--ticket-notch) at calc(100% - var(--ticket-stub)) 0, transparent calc(var(--ticket-notch) - .6px), #000 var(--ticket-notch)),
    radial-gradient(circle var(--ticket-notch) at calc(100% - var(--ticket-stub)) 100%, transparent calc(var(--ticket-notch) - .6px), #000 var(--ticket-notch));
  -webkit-mask-composite: source-in, source-in, source-in;
  mask:
    radial-gradient(circle var(--ticket-rib) at 0 50%, transparent calc(var(--ticket-rib) - .6px), #000 var(--ticket-rib)) left top / 100% var(--ticket-step) repeat-y,
    radial-gradient(circle var(--ticket-rib) at 100% 50%, transparent calc(var(--ticket-rib) - .6px), #000 var(--ticket-rib)) right top / 100% var(--ticket-step) repeat-y,
    radial-gradient(circle var(--ticket-notch) at calc(100% - var(--ticket-stub)) 0, transparent calc(var(--ticket-notch) - .6px), #000 var(--ticket-notch)),
    radial-gradient(circle var(--ticket-notch) at calc(100% - var(--ticket-stub)) 100%, transparent calc(var(--ticket-notch) - .6px), #000 var(--ticket-notch));
  mask-composite: intersect, intersect, intersect;
}
.auth-verify__perforation {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: calc(100% - var(--ticket-stub));
  z-index: 3;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--border) 0 4px, transparent 4px 9px);
  transform: translateX(-.5px);
  transition: opacity var(--dur-base) ease;
  pointer-events: none;
}
#verify-form.is-ready .auth-verify__perforation,
#verify-form.is-checking .auth-verify__perforation { animation: verify-perforation-flow var(--motion-route) linear infinite; }
#verify-form.is-checking .auth-verify__ticket-shell { animation: verify-ticket-punch var(--motion-feedback) var(--motion-throw) both; }

.otp {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 24px 28px;
  overflow: hidden;
  background: var(--milk);
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 4px 0 0 4px;
}
.otp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .72) 49%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
#verify-form.is-ready .otp::before { animation: verify-ticket-sheen var(--motion-route) ease-out both; }
.otp__input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  border: 0;
  font-size: 16px; /* меньше 16px — iOS приближает страницу при фокусе */
  cursor: text;
}
.otp__cells {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 12px repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
}
.otp__cells i { width: 1px; height: 42px; margin-inline: auto; background: var(--border); opacity: .9; }
.otp__cells span {
  position: relative;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--graphite);
  font-size: 32px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--motion-spring);
}
.otp__cells span:nth-child(2),
.otp__cells span:nth-child(3),
.otp__cells span:nth-child(6),
.otp__cells span:nth-child(7) { border-left: 1px solid var(--border); }
.otp__cells span.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 18%;
  width: 64%;
  height: 2px;
  background: var(--burgundy);
  transform-origin: left center;
  animation: otp-caret 1s steps(1) infinite, otp-line-in var(--dur-base) var(--motion-spring) both;
}
.otp__cells span.is-pop { animation: otp-pop var(--motion-feedback) var(--motion-throw); }

#verify-form #verify-submit {
  position: relative;
  z-index: 2;
  min-height: 112px;
  width: 100%;
  padding: 18px 24px 18px 30px;
  overflow: hidden;
  border-radius: 0 4px 4px 0;
  font-size: 14px;
  transition: background-color var(--dur-base) ease, opacity var(--dur-base) ease, transform var(--motion-press) ease-out;
}
#verify-form #verify-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--burgundy-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-move) var(--motion-spring);
}
#verify-form.is-ready #verify-submit::before,
#verify-form.is-checking #verify-submit::before { transform: scaleX(1); }
#verify-form #verify-submit > span:last-child { font-size: 21px; transition: transform var(--dur-base) var(--motion-spring); }
#verify-form #verify-submit > span { transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--motion-spring); }
#verify-form.is-ready #verify-submit > span:last-child { transform: translateX(4px); }
#verify-form.is-checking #verify-submit > span:last-child { animation: verify-arrow-flight var(--motion-route) var(--motion-spring) infinite; }
#verify-form #verify-submit:disabled { opacity: 1; background: var(--burgundy); color: var(--white); cursor: default; }
#verify-form:not(.is-ready):not(.is-checking) #verify-submit:disabled > span { opacity: .58; }
#verify-form #verify-submit:hover:not(:disabled) { transform: none; }

.otp.is-error .otp__cells { animation: otp-shake 380ms cubic-bezier(.36, .07, .19, .97); }
.otp.is-error .otp__cells span { color: var(--burgundy-dark); }

.otp.is-success .otp__cells span {
  color: var(--graphite);
  transform: translateY(-2px);
  transition-duration: var(--dur-base);
}
.otp.is-success .otp__cells span:nth-child(2) { transition-delay: 40ms; }
.otp.is-success .otp__cells span:nth-child(3) { transition-delay: 80ms; }
.otp.is-success .otp__cells span:nth-child(5) { transition-delay: 120ms; }
.otp.is-success .otp__cells span:nth-child(6) { transition-delay: 160ms; }
.otp.is-success .otp__cells span:nth-child(7) { transition-delay: 200ms; }

.auth-verify__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  margin-top: 18px;
}
.auth-verify__actions button {
  padding: 4px 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color var(--ease);
}
#verify-resend { color: var(--burgundy); font-weight: 500; font-variant-numeric: tabular-nums; }
#verify-resend:disabled { color: var(--secondary); font-weight: 400; cursor: default; }
#verify-change-toggle { color: var(--secondary); text-decoration: underline; text-underline-offset: 2px; }
#verify-change-toggle:hover,
#verify-resend:hover:not(:disabled) { color: var(--burgundy-dark); }

.auth-verify__change {
  max-width: 520px;
  margin: 14px auto 0;
  padding: 14px;
  background: var(--milk);
  border-radius: 8px;
  animation: auth-view-enter 220ms ease both;
}
.auth-verify__change label { display: block; margin-bottom: 7px; color: var(--graphite); font-size: 11.5px; font-weight: 500; }
.auth-verify__change-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.auth-verify__change input {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--graphite);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.auth-verify__change input:focus { border-color: var(--smoke); box-shadow: 0 0 0 3px rgba(143, 163, 176, .11); }
.auth-verify__change button {
  padding: 0 14px;
  background: var(--graphite);
  border: 0;
  border-radius: 7px;
  color: var(--white);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color var(--ease);
}
.auth-verify__change button:hover:not(:disabled) { background: var(--graphite-deep); }
.auth-verify__change button:disabled { opacity: .5; cursor: default; }

.auth-verify__hint {
  margin: 64px 0 0;
  color: var(--secondary);
  font-size: 11.5px;
  line-height: 1.5;
}
.auth-verify .forgot-cancel { position: absolute; top: -30px; left: 0; width: auto; margin: 0; padding: 8px 0; text-align: left; }
.auth-verify .forgot-cancel:hover { color: var(--graphite); }

/* Появление шага: элементы поднимаются друг за другом. */
.auth-verify.is-entering > .auth-verify__mail,
.auth-verify.is-entering > .auth-verify__item {
  animation: verify-rise var(--motion-move) var(--motion-spring) both;
}
.auth-verify.is-entering > :nth-child(2) { animation-delay: 50ms; }
.auth-verify.is-entering > :nth-child(3) { animation-delay: 90ms; }
.auth-verify.is-entering > :nth-child(4) { animation-delay: 130ms; }
.auth-verify.is-entering > :nth-child(5) { animation-delay: 170ms; }
.auth-verify.is-entering > :nth-child(6) { animation-delay: 210ms; }
.auth-verify.is-entering > :nth-child(8) { animation-delay: 250ms; }
.auth-verify.is-entering > :nth-child(9) { animation-delay: 270ms; }
.auth-verify.is-entering .auth-verify__letter { animation: verify-letter 900ms var(--motion-spring) 160ms both; }
.auth-verify.is-entering .auth-verify__ring { animation: verify-ring 1.2s ease-out 200ms both; transform-origin: 32px 32px; }
.auth-verify.is-entering .auth-verify__ticket { animation: verify-ticket-in var(--motion-route) var(--motion-spring) 150ms both; }

/* Готово: белая шторка с галочкой поверх шага, затем переход в профиль. */
.auth-verify__done {
  position: absolute;
  inset: -4px -4px -4px -4px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--white);
  text-align: center;
  animation: auth-view-enter var(--dur-base) ease both;
}
.auth-verify__done[hidden] { display: none; }
.auth-verify__done svg {
  width: 92px;
  height: 76px;
  margin-bottom: 24px;
  padding: 12px 20px;
  background: var(--milk);
  border: 1px solid var(--border);
  border-radius: 8px;
  filter: drop-shadow(0 12px 12px rgba(41, 44, 55, .13));
  transform: rotate(-5deg);
  animation: verify-stamp-in var(--motion-route) var(--motion-throw) both;
}
.auth-verify__done circle { fill: none; stroke: transparent; stroke-width: 1.5; }
.auth-verify__done path {
  fill: none;
  stroke: var(--burgundy);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: verify-check 520ms var(--motion-spring) 120ms forwards;
}
.auth-verify__done-title { margin: 0; color: var(--graphite); font-size: 22px; font-weight: 500; letter-spacing: -.035em; }
.auth-verify__done-text { margin: 0; color: var(--secondary); font-size: 12.5px; }

@keyframes verify-leave { to { opacity: 0; transform: translateY(-8px); } }
@keyframes verify-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes verify-letter {
  0% { transform: translateY(14px); }
  60% { transform: translateY(-5px); }
  100% { transform: translateY(-2px); }
}
@keyframes verify-ring {
  0% { transform: scale(.7); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes verify-ticket-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes verify-ticket-sheen { to { transform: translateX(120%); } }
@keyframes verify-perforation-flow { to { background-position: 0 9px; } }
@keyframes verify-ticket-punch {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(2px) scale(.994); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes verify-arrow-flight {
  0%, 100% { transform: translateX(3px); opacity: 1; }
  48% { transform: translateX(16px); opacity: 0; }
  52% { transform: translateX(-9px); opacity: 0; }
}
@keyframes verify-stamp-in {
  from { opacity: 0; transform: translateY(16px) rotate(-12deg) scale(.72); }
  to { opacity: 1; transform: translateY(0) rotate(-5deg) scale(1); }
}
@keyframes verify-check { to { stroke-dashoffset: 0; } }
@keyframes otp-pop {
  0% { transform: translateY(7px) scale(.9); opacity: .35; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes otp-caret { 50% { opacity: 0; } }
@keyframes otp-line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes otp-shake {
  15%, 85% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(4px); }
  45%, 55% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
}

@keyframes auth-card-enter {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes auth-view-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.cookie-consent {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2200;
  width: min(430px, calc(100vw - 40px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--white);
  color: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 42px rgba(47, 49, 61, .12);
  overflow: hidden;
}
/* Печенье водяным знаком — тот же приём, что у карточек уроков. */
.cookie-consent { padding-left: 52px; }
.cookie-consent__stamp {
  position: absolute;
  top: 50%;
  left: -20px;
  z-index: 0;
  color: #ece9e4;
  font-size: 62px;
  line-height: 1;
  transform: translateY(-50%) rotate(-12deg);
  pointer-events: none;
}
.cookie-consent > span,
.cookie-btn { position: relative; z-index: 1; }
.cookie-consent > span { min-width: 0; font-size: 12px; line-height: 1.55; }
.cookie-consent a { color: var(--burgundy); }
.cookie-btn {
  flex: 0 0 auto;
  padding: 8px 12px;
  background: var(--graphite);
  border: 0;
  cursor: pointer;
  color: var(--white);
  border-radius: 6px;
  transition: background-color var(--ease);
}
.cookie-btn:hover { background: var(--graphite-deep); }

/* Guest gate and referral prompt no longer depend on the global prototype CSS. */
#auth-gate-modal,
#referral-link-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(41, 44, 55, .52);
  backdrop-filter: blur(9px);
}

#auth-gate-content,
#referral-link-content {
  position: relative;
  width: min(100%, 460px);
  padding: 34px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--burgundy);
  border-radius: 14px;
  box-shadow: 0 30px 80px -34px rgba(41, 44, 55, .72);
  color: var(--graphite);
  text-align: center;
}

body.referral-open { overflow: hidden; }

#auth-gate-content .close-modal,
#referral-link-content .close-modal {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 38px;
  height: 38px;
  padding: 0;
  background: var(--milk);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--secondary);
  cursor: pointer;
}

.auth-gate-icon { display: block; margin-bottom: 14px; font-size: 28px; }
#auth-gate-content h2 { margin: 0; font-size: 26px; font-weight: 600; }
.auth-gate-sub,
.auth-gate-hint,
#referral-link-content p { color: var(--secondary); line-height: 1.6; }
.auth-gate-login-btn,
.referral-login-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  background: var(--burgundy);
  border: 0;
  border-radius: 7px;
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
}

/* Referral invitation — Yuki turns a technical redirect into a calm next step. */
#referral-link-modal {
  align-items: flex-end;
  padding: 24px 18px 0;
  background: rgba(41, 44, 55, .5);
  backdrop-filter: blur(9px);
}

#referral-link-content {
  width: min(100%, 430px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 22px 24px max(24px, env(safe-area-inset-bottom));
  background: var(--white);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-top: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -24px 64px -30px rgba(41, 44, 55, .65);
  color: var(--graphite);
  text-align: center;
  animation: referral-sheet-in 360ms cubic-bezier(.2, .75, .25, 1) both;
}

#referral-link-content::before {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin: -8px auto 14px;
  background: var(--border);
  border-radius: 999px;
}

#referral-link-content .close-modal {
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  background: var(--milk);
  color: var(--graphite);
}

#referral-link-content .close-modal:hover { background: var(--graphite); color: var(--white); }

#referral-link-content .close-modal:focus-visible,
.referral-login-btn:focus-visible,
.referral-skip-btn:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 3px;
}

.referral-modal-visual {
  width: min(100%, 300px);
  margin: 0 auto 2px;
  padding: 4px 26px 0;
  background: var(--milk);
  border-radius: 50% 50% 46% 46% / 58% 58% 35% 35%;
}

.referral-modal-visual img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.referral-modal-body { max-width: 350px; margin: 0 auto; }

#referral-link-content .referral-modal-eyebrow {
  margin: 18px 0 8px;
  color: var(--burgundy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.35;
  text-transform: uppercase;
}

#referral-link-content h2 {
  max-width: 11ch;
  margin: 0 auto;
  color: var(--graphite);
  font-size: clamp(30px, 8vw, 38px);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.06;
}

#referral-link-content .referral-modal-description {
  max-width: 30ch;
  margin: 18px auto 0;
  color: var(--secondary);
  font-size: 16px;
  line-height: 1.55;
}

#referral-link-content .referral-modal-assurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 20px;
  color: var(--secondary);
  font-size: 13px;
  line-height: 1.4;
}

.referral-modal-assurance i { color: var(--smoke); }

.referral-login-btn {
  width: 100%;
  min-height: 54px;
  border-radius: 8px;
  font-size: 16px;
  transition: background-color var(--ease), transform var(--ease), box-shadow var(--ease);
}

.referral-login-btn:hover {
  background: var(--burgundy-dark);
  box-shadow: 0 15px 26px -20px rgba(110, 38, 57, .9);
  transform: translateY(-1px);
}

.referral-skip-btn {
  min-height: 44px;
  margin-top: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  color: var(--burgundy);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.referral-skip-btn:hover { color: var(--burgundy-dark); text-decoration: underline; text-underline-offset: 3px; }

@keyframes referral-sheet-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 640px) {
  #referral-link-modal { align-items: center; padding: 24px; }
  #referral-link-content {
    max-height: calc(100dvh - 48px);
    padding: 26px 34px 30px;
    border: 1px solid var(--border);
    border-radius: 18px;
  }
}

@media (max-height: 720px) {
  .referral-modal-visual { width: 220px; }
  #referral-link-content .referral-modal-eyebrow { margin-top: 10px; }
  #referral-link-content h2 { font-size: 30px; }
  #referral-link-content .referral-modal-description { margin-top: 12px; }
  #referral-link-content .referral-modal-assurance { margin: 14px 0; }
}

@media (prefers-reduced-motion: reduce) {
  #referral-link-content { animation: none; }
  .referral-login-btn { transition: none; }
}

/* ---------- подвал ---------- */
footer.foot {
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 0;
  padding: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  color: var(--graphite);
  text-align: left;
}

/* Кнопка поддержки и строка о бете стоят в один ряд: подвал тогда по высоте
   такой же, как шапка (~73px), а не втрое выше из-за двух этажей. */
.catalog-footer__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
}

.catalog-footer__primary,
.catalog-footer__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.catalog-footer__primary {
  padding-bottom: 0;
  border-bottom: none;
  justify-content: center;
}

.catalog-footer__brand {
  display: none;
}

.catalog-footer__support {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 5px 14px 5px 7px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--graphite);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 14px 36px -20px rgba(41, 44, 55, .55);
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease),
              transform var(--motion-feedback) var(--motion-spring), opacity var(--dur-fast) ease;
}
/* Юки в кнопке не качается постоянно: бесконечная анимация персонажа запрещена
   каноном (CLAUDE.md, «Юки»). Остаётся кивок при наведении. */
.catalog-footer__support img { width: 42px; height: 42px; object-fit: contain; }
.catalog-footer__support:hover { background: var(--milk); border-color: var(--smoke); transform: translateY(-3px); }
.catalog-footer__support:hover img { animation: support-yuki-nod 650ms var(--motion-throw) both; }
body.support-open .catalog-footer__support { opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; }


.catalog-footer__meta { padding-top: 22px; }
.catalog-footer__meta p {
  margin: 0;
  color: var(--secondary);
  font-size: 12.5px;
}
.catalog-footer__links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.catalog-footer__links a {
  color: var(--secondary);
  font-size: 12.5px;
  text-decoration: none;
  transition: color var(--ease);
}
.catalog-footer__links a:hover { color: var(--graphite); }

/* ---------- адаптив ---------- */
@media (max-width: 980px) {
  .nav-container {
    grid-template-columns: auto minmax(220px, 1fr) auto;
    gap: 14px;
    padding-inline: 20px;
  }
  .nav-brand img { width: 118px; }
  .nav-links { gap: 10px; }
  .cards-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stage-main { width: min(68%, 620px); }
  .stage-veil {
    background:
      linear-gradient(90deg,
        rgba(239, 238, 236, .99) 0%,
        rgba(239, 238, 236, .96) 46%,
        rgba(239, 238, 236, .67) 72%,
        rgba(239, 238, 236, .18) 100%);
  }
}

@media (max-width: 700px) {
  .nav-container {
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
    padding-block: 10px;
  }
  .nav-brand { grid-column: 1; grid-row: 1; }
  .nav-brand img { width: 112px; }
  .nav-links { grid-column: 2; grid-row: 1; gap: 8px; }
  .nav-user-avatar-img { width: 34px; height: 34px; }
  nav .filter-container { grid-column: 1 / -1; grid-row: 2; }

  #currentQuestPanel { padding-top: 14px; }
  .stage-card { min-height: 390px; }
  .stage-bg img { object-position: 64% center; }
  .stage-veil {
    background:
      linear-gradient(180deg,
        rgba(239, 238, 236, .32) 0%,
        rgba(239, 238, 236, .82) 38%,
        rgba(239, 238, 236, .98) 64%,
        rgba(239, 238, 236, 1) 100%);
  }
  .stage-main {
    width: 100%;
    min-height: 390px;
    justify-content: flex-end;
    padding: 24px;
  }
  .stage-card h2 { max-width: 16ch; font-size: clamp(30px, 9vw, 42px); }
  .stage-next {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .stage-track { margin-top: 18px; }
  .stage-actions { gap: 16px; margin-top: 20px; }

  #telegram-login-modal { align-items: center; padding: 10px; }
  #telegram-login-content {
    width: 100%;
    max-width: 520px;
    max-height: calc(100dvh - 20px);
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .auth-brand { padding: 22px 82px 22px 22px; gap: 16px; }
  .auth-brand img { width: 105px; }
  .auth-story { display: none; }
  #telegram-login-content .modal-inner { padding: 26px 22px 22px; }
  #telegram-login-content.is-verifying .modal-inner { padding: 54px 22px 24px; }
  #telegram-login-modal button.close-modal { top: 16px; right: 16px; background: var(--white); }
  .auth-header { padding-right: 0; }
  .auth-verify { min-height: 0; padding-right: 0; }
  .auth-verify__mail { display: none; }
  #telegram-login-content .auth-verify h2 { padding-right: 0; font-size: 30px; }
  .auth-verify__lead { font-size: 13px; }
  .auth-verify__ticket { --ticket-stub: 148px; }
  .otp { padding-inline: 20px; }
  .otp__cells span { font-size: 28px; }
  #verify-form #verify-submit { padding-inline: 24px 20px; }
  .auth-verify__hint { margin-top: 42px; }
  #telegram-login-content .auth-header h2,
  #telegram-login-content #email-title { font-size: 30px; }
  .auth-header > p:last-child { font-size: 12.5px; }
}

/* Landscape phones and short windows need the same focused form as mobile. */
@media (min-width: 701px) and (max-height: 680px) {
  #telegram-login-modal { padding: 10px; }
  #telegram-login-content {
    width: min(100%, 640px);
    max-height: calc(100dvh - 20px);
    grid-template-columns: minmax(0, 1fr);
  }
  .auth-brand { padding: 20px 88px 20px 32px; }
  .auth-story { display: none; }
  #telegram-login-content .modal-inner { padding: 8px 32px 24px; }
  #telegram-login-content.is-verifying .modal-inner { padding: 24px 32px; }
}

@media (max-width: 640px) {
  .cards-container { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .catalog-sectionbar { gap: 10px; }
  .catalog-sectionbar h2 { font-size: 19px; }
  .catalog-sectionbar .n { font-size: 11px; }
  .cookie-consent { right: 12px; bottom: 12px; left: 12px; width: auto; }

  /* На телефоне в ряд они не помещаются: кнопка — сверху во всю ширину,
     строка о бете — под ней. */
  .catalog-footer__inner {
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px 18px;
  }
  .catalog-footer__primary {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding-bottom: 0;
    width: 100%;
  }
  .catalog-footer__support {
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 54px;
    min-height: 54px;
    padding: 5px;
  }
  .catalog-footer__support img { width: 44px; height: 44px; }
  /* На телефоне кнопка — кружок с Юки: подписи «Юки рядом» внутри места нет,
     и она переносилась поверх края. Имя кнопки остаётся для скринридера. */
  .catalog-footer__support > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .catalog-footer__meta {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 18px;
    padding-top: 12px;
  }
  .catalog-footer__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .catalog-footer__links a {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  .support-modal,
  .tag-modal {
    align-items: flex-end;
    padding: 0;
  }
  .support-dialog {
    width: 100%;
    height: min(760px, 100dvh);
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border-radius: 14px 14px 0 0;
  }
  .tag-dialog {
    width: 100%;
    max-height: 92dvh;
    padding: 30px 20px max(24px, env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0;
  }
  .support-dialog__header {
    grid-template-columns: 58px minmax(0, 1fr) 36px 36px;
    gap: 7px;
    padding: 15px 12px 13px 16px;
  }
  .support-dialog__avatar { width: 56px; height: 44px; }
  .support-dialog h2 { font-size: 20px; }
  .support-dialog__heading p { max-width: 29ch; font-size: 11.5px; }
  .support-menu-toggle,
  .support-dialog .support-close { width: 36px; height: 36px; }
  .support-menu { top: 58px; right: 52px; }
  .support-conversation { padding: 22px 16px 16px; }
  .support-message { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
  .support-message > img { width: 34px; height: 34px; }
  .support-message p { padding: 12px 14px; font-size: 13.5px; }
  .support-quick { padding-left: 44px; }
  .support-quick button { max-width: 100%; font-size: 12.5px; }
  .support-chat-row { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
  .support-chat-row > img { width: 34px; height: 34px; }
  .support-composer { margin: 0 14px; grid-template-columns: minmax(0, 1fr) 42px; }
  .support-composer button[type="submit"] { width: 42px; height: 42px; }
  .support-dialog__developer { margin: 12px 14px max(14px, env(safe-area-inset-bottom)); }
  #tagFilter.tag-dialog__list { max-height: 34vh; margin-top: 22px; }
}

@media (max-width: 460px) {
  .stage-main { padding: 20px; }
  .stage-track { gap: 9px; }
  .stage-track .lbl { font-size: 10.5px; }
  .stage-btn { width: 100%; }
  .stage-link { margin-inline: auto; }
  .tag-dialog__actions { grid-template-columns: 1fr; }
  .tag-dialog__clear { order: 2; }

  .auth-brand { padding: 20px 76px 20px 18px; }
  .auth-brand img { width: 100px; }
  #telegram-login-content .modal-inner { padding: 22px 18px 18px; }
  .auth-channel-switch { margin-top: 21px; }
  .auth-mode-switch { margin-block: 16px 18px; }
  .auth-consents { padding: 12px 13px; }
  #telegram-login-content.is-verifying .modal-inner { padding: 52px 18px 20px; }
  #telegram-login-content .auth-verify h2 { font-size: 28px; }
  #verify-form { margin-top: 26px; }
  .auth-verify__ticket {
    --ticket-stub-height: 58px;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    -webkit-mask:
      radial-gradient(circle var(--ticket-rib) at 0 50%, transparent calc(var(--ticket-rib) - .6px), #000 var(--ticket-rib)) left top / 100% var(--ticket-step) repeat-y,
      radial-gradient(circle var(--ticket-rib) at 100% 50%, transparent calc(var(--ticket-rib) - .6px), #000 var(--ticket-rib)) right top / 100% var(--ticket-step) repeat-y,
      radial-gradient(circle var(--ticket-notch) at 0 calc(100% - var(--ticket-stub-height)), transparent calc(var(--ticket-notch) - .6px), #000 var(--ticket-notch)),
      radial-gradient(circle var(--ticket-notch) at 100% calc(100% - var(--ticket-stub-height)), transparent calc(var(--ticket-notch) - .6px), #000 var(--ticket-notch));
    -webkit-mask-composite: source-in, source-in, source-in;
    mask:
      radial-gradient(circle var(--ticket-rib) at 0 50%, transparent calc(var(--ticket-rib) - .6px), #000 var(--ticket-rib)) left top / 100% var(--ticket-step) repeat-y,
      radial-gradient(circle var(--ticket-rib) at 100% 50%, transparent calc(var(--ticket-rib) - .6px), #000 var(--ticket-rib)) right top / 100% var(--ticket-step) repeat-y,
      radial-gradient(circle var(--ticket-notch) at 0 calc(100% - var(--ticket-stub-height)), transparent calc(var(--ticket-notch) - .6px), #000 var(--ticket-notch)),
      radial-gradient(circle var(--ticket-notch) at 100% calc(100% - var(--ticket-stub-height)), transparent calc(var(--ticket-notch) - .6px), #000 var(--ticket-notch));
    mask-composite: intersect, intersect, intersect;
  }
  .auth-verify__perforation {
    top: auto;
    right: 14px;
    bottom: var(--ticket-stub-height);
    left: 14px;
    width: auto;
    height: 1px;
    background: repeating-linear-gradient(to right, transparent 0 5px, var(--border) 5px 10px);
    transform: none;
  }
  .otp {
    min-height: 98px;
    padding: 16px 18px 20px;
    border-right: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
  }
  .otp__cells { grid-template-columns: repeat(3, minmax(0, 1fr)) 10px repeat(3, minmax(0, 1fr)); gap: 0; }
  .otp__cells i { margin-inline: 1px; }
  .otp__cells span { height: 48px; font-size: 25px; }
  #verify-form #verify-submit { min-height: var(--ticket-stub-height); padding: 13px 20px; border-radius: 0 0 4px 4px; }
  .auth-verify__actions { align-items: center; flex-direction: column; gap: 2px; margin-top: 14px; }
  .auth-verify__actions button { min-height: 34px; }
  .auth-verify__change-row { grid-template-columns: 1fr; }
  .auth-verify__change button { min-height: 42px; }
  .auth-verify__hint { margin-top: 28px; }
  .auth-verify .forgot-cancel { top: -40px; }
}

@media (prefers-reduced-motion: reduce) {
  nav .search-wrapper { animation: none; transition: none; }
  nav .filter-container,
  nav .tag-launcher { transition: none; }
  nav .search-wrapper::after,
  nav .search-icon,
  nav #searchInput::placeholder,
  .stage-bg img { transition: none; }
  .support-dialog,
  .tag-dialog,
  #telegram-login-content,
  #auth-view-email,
  #auth-view-telegram,
  #auth-view-email.is-leaving,
  .auth-verify.is-entering > *,
  .auth-verify.is-entering .auth-verify__letter,
  .auth-verify.is-entering .auth-verify__ring,
  .auth-verify.is-entering .auth-verify__ticket,
  .auth-verify__change,
  .auth-verify__done,
  .auth-verify__done svg,
  #verify-form.is-ready .otp::before,
  #verify-form.is-checking #verify-submit > span:last-child,
  #verify-form.is-ready .auth-verify__perforation,
  #verify-form.is-checking .auth-verify__perforation,
  #verify-form.is-checking .auth-verify__ticket-shell,
  .otp__cells span.is-pop,
  .otp.is-error .otp__cells { animation: none; }
  .support-dialog__avatar,
  .support-message--intro,
  .support-quick button,
  .support-chat-message,
  .support-chat-row > img,
  .support-typing,
  .support-typing__dots i,
  .support-menu { animation: none; }
  .catalog-footer__support img { animation: none; }
  .support-conversation { scroll-behavior: auto; }
  .otp__cells span.is-active::after { animation: none; }
  .auth-verify__done path { animation: none; stroke-dashoffset: 0; }
  .otp.is-success .otp__cells span { transition-delay: 0s; }
  #verify-form #verify-submit::before,
  #verify-form #verify-submit > span:last-child { transition: none; }
}

/* ---------- предложение экспертам под каталогом ---------- */
/* Голубая заливка из прототипа заменена белой карточкой: голубого в
   tokens.css нет, и на молочном фоне каталога он читался как чужой. */

/* width:100% обязателен: body — флекс-контейнер, и без него секция ужимается
   по содержимому и выходит уже сетки курсов. Тот же приём у .catalog-head. */
.quest-pitch {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px clamp(76px, 9vw, 124px);
  display: grid;
  gap: 20px;
}

.quest-pitch__flow {
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 34px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.quest-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--graphite);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 500;
  letter-spacing: -.02em;
}

/* Стрелка рисуется ПЕРЕД звеном, а не после: тогда при переносе строки она
   уезжает вниз вместе со своим звеном, а не повисает в конце предыдущей.
   nowrap не даёт разорвать само звено («сдача в чате») по словам. */
.quest-flow li { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.quest-flow li:not(:first-child)::before {
  content: "→";
  color: var(--smoke);
  font-weight: 400;
}

.quest-pitch__flow > p {
  max-width: 68ch;
  margin: 14px 0 0;
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.6;
}

.quest-pitch__cta {
  padding: clamp(30px, 4vw, 46px) clamp(24px, 3.4vw, 44px);
  background: var(--burgundy);
  border-radius: var(--radius-lg);
  color: var(--white);
}

.quest-pitch__eyebrow {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .62);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.quest-pitch__cta h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--white);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.12;
}

.quest-pitch__lead {
  max-width: 54ch;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: 15px;
  line-height: 1.6;
}

.quest-pitch__actions {
  margin-top: clamp(22px, 3vw, 30px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.quest-pitch__btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 13px 28px;
  background: var(--white);
  border-radius: 10px;
  color: var(--graphite);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--ease), transform var(--ease);
}

.quest-pitch__btn:hover { background: #f2efe9; transform: translateY(-1px); }

.quest-pitch__link {
  color: var(--white);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity var(--ease);
}

.quest-pitch__link:hover { opacity: .78; }

.quest-pitch__btn:focus-visible,
.quest-pitch__link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .quest-flow { font-size: 15px; gap: 8px 10px; }
  .quest-flow li { gap: 10px; }
  .quest-pitch__actions { gap: 14px 18px; }
  .quest-pitch__btn { width: 100%; justify-content: center; }
}

/* На широком экране оба блока раскладываются в две колонки: иначе строки
   упираются в предел читаемости (~70 знаков), а правая половина карточки
   остаётся пустой. Тексты при этом не меняются — меняется только раскладка. */
@media (min-width: 900px) {
  /* Левая колонка шире правой: русской цепочке нужно ~580px в одну строку,
     при 1.1fr не хватало восьми пикселей и «новый статус» уезжал вниз. */
  .quest-pitch__flow {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 34px;
    align-items: center;
  }

  .quest-pitch__flow > p { margin: 0; }

  /* Слева заголовок и кнопки, справа описание — левая колонка шире, потому
     что заголовок крупнее и переносится по словам. */
  .quest-pitch__cta {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(36px, 4vw, 64px);
    align-items: start;
  }

  .quest-pitch__eyebrow { grid-area: 1 / 1 / 2 / 2; }
  .quest-pitch__cta h2 { grid-area: 2 / 1 / 3 / 2; max-width: none; }
  .quest-pitch__actions { grid-area: 3 / 1 / 4 / 2; }

  /* Описание тянется от заголовка донизу — так его верх совпадает с первой
     строкой заголовка, а низ с кнопками. */
  .quest-pitch__lead {
    grid-area: 2 / 2 / 4 / 3;
    max-width: none;
    margin-top: 6px;
  }
}

/* «Поддержка» в подвале каталога — постоянный путь к помощи рядом с документами:
   плавающую кнопку на телефоне легко не заметить. Тот же вид, что у ссылок строки. */
.catalog-footer .beta-notice__support {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.catalog-footer .beta-notice__support:hover { color: var(--burgundy); }
.catalog-footer .beta-notice__support:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }

/* Reference header: align the intro and quest grid at desktop widths. */
@media (min-width: 1100px) {
  .nav-container { width: min(calc(100% - 144px), var(--container)); }
  .catalog-head,
  main.courses-container { width: min(calc(100% - 144px), var(--container)); padding-inline: 0; }
}
@media (max-width: 980px) {
  .nav-container { padding-inline: 0; }
  .catalog-benefits { gap: 24px; }
}
@media (max-width: 700px) {
  .nav-container { min-height: 0; }
  .catalog-head { padding-top: 40px; }
  .catalog-head h1.darkblue { font-size: clamp(36px, 8.6vw, 52px); }
  .catalog-benefits { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 32px; }
  .catalog-benefit { padding-top: 16px; }
  .catalog-benefit h2 { font-size: 24px; }
  .catalog-benefit p { margin-top: 10px; }
  .catalog-hint { margin-top: 32px; }
  .catalog-sectionbar { margin-top: 48px; }
  .catalog-sectionbar h2 { font-size: 23px; line-height: 1.25; }
  .catalog-sectionbar .n { color: var(--secondary); }
}
@media (max-width: 460px) {
  .nav-brand img { width: 100px; }
  .nav-links .tg-btn { padding-inline: 14px; }
  .catalog-sectionbar { flex-wrap: wrap; gap: 8px 12px; }
  .catalog-sectionbar .rule { min-width: 24px; }
  .catalog-sectionbar .n { margin-left: auto; }
}

/* Progressive disclosure for the mobile catalogue intro. */
.catalog-benefit__toggle {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
.catalog-benefit__toggle[hidden],
.catalog-benefit__title[hidden],
.catalog-benefit p[hidden] { display: none; }
.catalog-benefit__toggle i {
  flex: 0 0 auto;
  color: var(--burgundy);
  font-size: 14px;
  transition: transform var(--ease);
}
.catalog-benefit__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.catalog-benefit__toggle:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 4px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .catalog-benefit__toggle i { transition: none; }
}

/* Only the channel choice uses a filled indicator; tab geometry stays fixed. */
.auth-channel-switch { --auth-progress: 0; position: relative; isolation: isolate; gap: 0; padding: 4px; border-radius: 999px; }
.auth-channel-switch:has(button:last-child.active) { --auth-progress: 1; }
.auth-channel-switch::before { content: ''; position: absolute; z-index: 0; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--burgundy); pointer-events: none; transform: translateX(calc(var(--auth-progress) * 100%)); transition: transform 180ms cubic-bezier(.2, .7, .2, 1); }
.auth-channel-switch button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; border-radius: 999px; transition: color 100ms ease; }
.auth-channel-switch button i { flex: 0 0 auto; font-size: 16px; }
.auth-channel-switch button span { min-width: 0; overflow-wrap: anywhere; }
.auth-channel-switch button.active { background: transparent; box-shadow: none; color: white; }

/* Email modes are subordinate text tabs, with no second filled control. */
.auth-mode-switch { display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; gap: 16px; padding: 0; background: transparent; border: 0; border-radius: 0; }
.auth-mode-switch button { position: relative; flex: 0 0 auto; width: auto; min-height: 44px; padding: 10px 14px; border-radius: 0; transition: color 100ms ease; }
.auth-mode-switch button::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: transparent; }
.auth-mode-switch button.active { background: transparent; color: var(--burgundy); box-shadow: none; }
.auth-mode-switch button.active::after { background: var(--burgundy); }
.auth-mode-switch button:hover { color: var(--burgundy); }
.auth-channel-switch button:focus-visible, .auth-mode-switch button:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; }
.motion-off .auth-channel-switch::before,
.motion-off .auth-channel-switch button,
.motion-off .auth-mode-switch button { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .auth-channel-switch::before, .auth-channel-switch button, .auth-mode-switch button { transition: none; }
}