@font-face {
  font-family: 'TikTok Sans';
  src: url('../shared/fonts/TikTokSans-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'A24';
  src: url('../shared/fonts/A24-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'A24';
  src: url('../shared/fonts/A24-Regular.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #100b14;
  --card-dark: #130f18;
  --surface-2: #201a29;
  --text: #faf5f1;
  --text-muted: #9a93a6;
  --text-dim: #655f72;

  --gold-light: #ffc373;
  --gold-mid: #f0b880;
  --gold-deep: #7a4f16;

  --coral-light: #e98539;
  --coral-mid: #e65016;
  --coral-deep: #2a0f06;

  --teal-light: #7fe3cc;
  --teal-mid: #26ab93;
  --teal-deep: #0c2b26;

  --violet-light: #b39bff;
  --violet-mid: #8862ea;
  --violet-deep: #1c1338;

  --error: #ff6b76;
  --success: #3fdb9a;

  /* цвета квиза на экранах форума — фон и «чернила» для текста на белом */
  --orange: #e4511a;
  --orange-light: #ef7a35;
  --peach: #ffb684;
  --ink: #2a0f06;

  /* Формула вложенных скруглений: radius-внутреннего = radius-внешнего − отступ.
     --radius-sm получается из --radius-xl минус --sheet-inset (44 − 14 = 30),
     поэтому угол листа и угол кнопки внутри него визуально совпадают по кривизне. */
  --radius-xl: 44px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 30px;
  --sheet-inset: 14px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* убираем системную синюю подсветку/рамку при тапе на мобильных браузерах —
     outline:none у button/input ниже её не перекрывает, это отдельный эффект */
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea {
  border: none;
  outline: none;
  font-family: inherit;
}

html, body {
  height: 100%;
}

body {
  font-family: 'TikTok Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--orange);
  color: var(--text);
  position: relative;
  overflow-x: hidden;
}

/* --- фон на весь экран — тот же, что у квиза на экранах форума: яркий
   оранжевый, светлые пятна по углам и огромный размытый знак форума.
   Знак размыт заранее (shared/brand/swirl-blur.png), а не фильтром на лету —
   на телефоне фон ничего не стоит ни процессору, ни батарее. --- */

.page-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 88% 92%, rgba(247, 164, 103, 0.9) 0%, rgba(247, 164, 103, 0) 70%),
    radial-gradient(60% 55% at 8% 6%, rgba(239, 122, 53, 0.9) 0%, rgba(239, 122, 53, 0) 70%),
    var(--orange);
}

.page-identity {
  position: fixed;
  left: 50%;
  top: 46%;
  z-index: 1;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  pointer-events: none;
  background: url('../shared/brand/swirl-blur.png') center / contain no-repeat;
  opacity: 0.6;
  transform: rotate(-18deg);
}

/* лёгкая зернистость по всей странице */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-0.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-0.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-0.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 110px 110px;
  mix-blend-mode: overlay;
  opacity: 0.22;
}

#app {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.offline-banner {
  flex: none;
  width: 100%;
  padding: 10px 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  background: color-mix(in srgb, var(--gold-mid) 55%, var(--card-dark) 45%);
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.view {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hidden {
  display: none !important;
}

.view-home,
.view-sub {
  gap: 0;
}

/* --- герой: свой цветной акцент поверх общего фона, без своей рамки --- */

.hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px 36px;
}

.view-home .hero,
#view-bank .hero {
  position: sticky;
  top: 0;
}

.hero-brand {
  background: radial-gradient(150% 85% at 50% -15%, color-mix(in srgb, var(--gold-mid) 32%, transparent) 0%, transparent 72%);
}

.view-sub .hero {
  padding-bottom: 36px;
  gap: 18px;
  display: flex;
  flex-direction: column;
}

.view-sub .hero .back {
  margin-bottom: 4px;
}

.hero-top {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.hero-tagline {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-tagline::after {
  content: '';
  display: none;
  width: 2px;
  height: 10px;
  margin-left: 2px;
  background: var(--gold-light);
  vertical-align: middle;
}

.hero-tagline.is-typing::after {
  display: inline-block;
  animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.brand-mark-box,
.avatar {
  position: relative;
  overflow: hidden;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--coral-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-mark-box {
  cursor: default;
  padding: 9px;
}

.brand-mark-box::before {
  content: '';
  width: 100%;
  height: 100%;
  background: #ffffff;
  -webkit-mask-image: url('../shared/brand/logo-mark.png');
  mask-image: url('../shared/brand/logo-mark.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.avatar svg {
  width: 20px;
  height: 20px;
  color: #ffffff;
}

.hero-stat {
  position: relative;
  z-index: 1;
}

.hero-number-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.balance {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 84px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-shadow: 0 0 34px rgba(224, 166, 63, 0.5);
}

.balance-unit {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

/* --- лист: стеклянная панель, заходит внахлёст на герой сверху --- */

.sheet {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  flex: 1;
  margin-top: -30px;
  background: color-mix(in srgb, var(--card-dark) 32%, transparent);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--sheet-inset) var(--sheet-inset) calc(env(safe-area-inset-bottom, 0px) + var(--sheet-inset));
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
}

/* Экраны с коротким, разовым содержимым (не список) — центрируем по высоте,
   чтобы страница выглядела завершённой композицией, а не контентом сверху
   и пустотой снизу. */
#view-receive .sheet {
  justify-content: center;
}

/* --- карточка входа/установки/ожидания: не лист во весь экран, а компактный
   прямоугольник со скруглением со всех сторон --- */

.view.view-card {
  max-width: 560px;
}

.view-card .sheet {
  flex: none;
  border-radius: var(--radius-xl);
  padding-bottom: var(--sheet-inset);
  margin-bottom: 24px;
}

/* Вход/регистрация — по центру экрана, а не прижаты к верху. */
.view.view-card {
  justify-content: center;
}

/* Кнопка обмена теперь живёт внутри шапки, под балансом — шапка сама
   зафиксирована (position: sticky сверху), поэтому кнопка "фиксируется"
   вместе с ней автоматически, отдельный плавающий бар снизу экрана больше
   не нужен. */

/* Плоская кнопка без градиентов и свечений — цвет и высота как у обычной
   .btn внутри листа, радиус по формуле (--radius-sm), одна на всю ширину
   плашки. */
.action-wide {
  flex: 1;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--coral-mid);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.action-wide:active {
  transform: scale(0.97);
}

/* Круглая кнопка «QR квиза» рядом с банком: той же высоты, что и широкая
   кнопка (16 + 24 + 16), круг сам по себе согласуется с любым радиусом.
   Бирюзовая — чтобы её было легко найти по подсказке на экране квиза. */

/* --- сканирование QR квиза с экрана на площадке --- */

.quiz-scan-card {
  gap: 18px;
}

.quiz-scan-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  border-radius: 24px;
  background: var(--coral-deep);
}

.quiz-scan-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* уголки-видоискатель поверх видео */
.quiz-scan-corners {
  position: absolute;
  inset: 18%;
  pointer-events: none;
  background:
    linear-gradient(var(--text), var(--text)) top left / 28px 4px,
    linear-gradient(var(--text), var(--text)) top left / 4px 28px,
    linear-gradient(var(--text), var(--text)) top right / 28px 4px,
    linear-gradient(var(--text), var(--text)) top right / 4px 28px,
    linear-gradient(var(--text), var(--text)) bottom left / 28px 4px,
    linear-gradient(var(--text), var(--text)) bottom left / 4px 28px,
    linear-gradient(var(--text), var(--text)) bottom right / 28px 4px,
    linear-gradient(var(--text), var(--text)) bottom right / 4px 28px;
  background-repeat: no-repeat;
  opacity: 0.9;
}

.quiz-scan-result {
  display: flex;
  justify-content: center;
}

.quiz-scan-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--text);
  color: var(--teal-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-scan-icon.is-error {
  color: var(--coral-mid);
}

.quiz-scan-icon svg {
  width: 48px;
  height: 48px;
}

/* --- история операций (появляется, только если операции есть) --- */

.activity {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feed-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.feed-item-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.feed-item-time {
  font-size: 12px;
  color: var(--text-dim);
}

.notify-enable {
  width: 100%;
}

.notify-status {
  font-size: 13px;
  color: var(--text-muted);
}

.activity-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.activity-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px auto;
}

.activity-icon-in {
  background-color: var(--teal-deep);
  background-image: url('../shared/brand/arrow-received.png');
}

.activity-icon-out {
  background-color: var(--coral-deep);
  background-image: url('../shared/brand/arrow-given.png');
}

.activity-name {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.activity-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.activity-amount {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.activity-amount.amount-in {
  color: var(--success);
}

.activity-amount.amount-out {
  color: var(--coral-light);
}

.activity-time {
  font-size: 12px;
  color: var(--text-dim);
}

/* --- задания (пока пример-заглушка под будущую функцию) --- */

/* Блок заданий — целиком в одной подложке (заголовок и список вместе), по
   образцу блока программы: радиус подложки по формуле вложенных скруглений
   из :root, поэтому углы визуально концентричны углам листа. */
.tasks {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--gold-light);
  border-radius: var(--radius-sm);
  padding: var(--sheet-inset);
  transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Трек — та же карточка, что у заданий, но другим цветом из палитры, чтобы
   отличаться от остальных блоков на главной. */
#track-section {
  background: var(--coral-light);
}

/* Уведомления от организаторов — та же карточка, что у заданий/трека на
   главной, просто своим (фиолетовым) цветом из палитры; внутри — те же
   плашки-сообщения (feed-item), но тёмным текстом на светлом фоне. */
.notify-card {
  background: var(--violet-light);
}

.notify-card .tasks-head .activity-title {
  color: var(--card-dark);
}

#notify-list {
  gap: 10px;
}

#notify-list .feed-item {
  background: color-mix(in srgb, var(--text) 45%, transparent);
}

#notify-list .feed-item-text {
  color: var(--card-dark);
}

#notify-list .feed-item-time {
  color: color-mix(in srgb, var(--card-dark) 65%, transparent);
}

.tasks.is-collapsed {
  gap: 0;
}

.tasks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tasks-head .activity-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--card-dark);
}

.tasks-head-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: var(--coral-mid);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tasks-head-icon svg {
  width: 15px;
  height: 15px;
}

.tasks-head-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.link-btn {
  background: none;
  color: var(--coral-light);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* --- пикер визуального кода с бейджа (3 картинки вместо ввода текста) --- */

.tasks-list {
  width: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity 0.25s ease 0.05s;
}

.program-collapse.is-collapsed .tasks-list {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* --- блок трека — та же светлая карточка, что у заданий, плюс описание и
   ссылка на чат перед своим списком заданий. Свой (не золотой) цвет фона —
   поэтому заголовок/имена заданий здесь белые, а не тёмные, как у заданий. */
.track-body {
  width: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 1;
  transition: opacity 0.25s ease 0.05s;
}

.program-collapse.is-collapsed .track-body {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.track-description {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.75;
}

.track-chat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--coral-mid);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

#track-section .activity-title {
  color: var(--text);
}

#track-section .program-toggle {
  color: var(--text);
}

/* Вся программа — целиком в одной подложке (заголовок и текст вместе), а не
   заголовок отдельной строкой над карточкой. Радиус подложки — по формуле
   вложенных скруглений из :root (radius-xl − sheet-inset = radius-sm),
   поэтому её углы визуально концентричны углам листа. */
.program-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--gold-light);
  border-radius: var(--radius-sm);
  padding: var(--sheet-inset);
  transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Свёрнуто: список схлопнут до 0 высоты, но flex-gap между ним и шапкой сам
   не исчезает — без этого правила снизу оставалась лишняя пустая полоса, и
   заголовок с иконкой сидели не по центру подложки, а ближе к верху. */
.program-block.is-collapsed {
  gap: 0;
}

.program-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.program-header-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: var(--coral-mid);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.program-header-icon svg {
  width: 15px;
  height: 15px;
}

.program-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--card-dark);
}

.program-toggle {
  margin-left: auto;
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  padding: 0;
  color: var(--text-dim);
  cursor: pointer;
  transform: rotate(180deg);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.program-toggle.is-collapsed {
  transform: rotate(0deg);
}

.program-toggle svg {
  width: 16px;
  height: 16px;
}

.program-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.program-collapse.is-collapsed {
  grid-template-rows: 0fr;
}

.program-list {
  width: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity 0.25s ease 0.05s;
}

.program-collapse.is-collapsed .program-list {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.program-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--card-dark) 15%, transparent);
}

.program-item:first-child {
  border-top: none;
  padding-top: 0;
}

/* Низ последнего пункта не должен добавлять своё padding сверх padding
   самой подложки — иначе перед скруглённым нижним углом (по формуле
   вложенных скруглений) остаётся лишний зазор. */
.program-item:last-child {
  padding-bottom: 0;
}

.program-item-time {
  flex: none;
  align-self: center;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--coral-mid);
  margin-top: 4px;
}

.program-item-time-text {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  transform: translateY(-2px);
}

.program-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding-left: 10px;
}

.program-item-title-mask {
  width: 100%;
  overflow: hidden;
}

.program-item-title {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--card-dark);
}

/* Вторая копия текста (см. renderProgramItems) едет следом за первой на
   расстоянии distance — когда первая уезжает ровно настолько влево, вторая
   аккуратно становится на её место, стыка не видно. Короткая пауза ~4
   секунды, затем медленно едем и мгновенно, незаметно "перематываемся" на
   стыке цикла (100% -> 0%) — только влево, без обратного хода. Раскадровка
   одна и та же у всех строк — значит все длинные заголовки трогаются с
   места и замирают синхронно. */
.program-item-title-track {
  display: flex;
  width: max-content;
}

.program-item-title-track .program-item-title {
  flex: none;
  padding-right: 48px;
}

.program-item-title-track.is-marquee {
  animation: program-item-marquee 12s linear infinite;
}

.activity-name-mask {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.activity-name-track {
  display: flex;
  width: max-content;
}

.activity-name-track .activity-name {
  flex: none;
  padding-right: 48px;
}

.activity-name-track.is-marquee {
  animation: program-item-marquee 12s linear infinite;
}

@keyframes program-item-marquee {
  0%,
  33.33% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--marquee-distance, 0px)));
  }
}

.program-item-desc {
  width: 100%;
  max-height: 54px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.5;
  color: #55524f;
}

/* --- карточка-подсказка (после программы) — тот же светлый стиль, что и у
   блока программы и заданий: сплошная светлая подложка, тёмный текст,
   круглый значок вместо фото. Углы — по формуле (--radius-sm). */

/* --- шторка снизу: общий компонент для "открывающихся окон" --- */

.sheet-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
}

.sheet-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.sheet-modal.is-open .sheet-modal-backdrop {
  opacity: 1;
}

/* Шторка — жидкое стекло: полупрозрачная, с размытием того, что под ней и
   бликом по верхнему краю. Выезжает снизу и расширяется: сдвиг идёт по
   плавной "затухающей" кривой, ширина — с лёгкой пружиной, углы округляются
   вместе с ними. Закрытие короче и без пружины. Только 2D и отдельные
   свойства translate/scale (у каждого своя кривая). */
.sheet-modal-panel {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background-color: color-mix(in srgb, var(--card-dark) 42%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-radius: 72px 72px 0 0;
  padding: 0 var(--sheet-inset) calc(env(safe-area-inset-bottom, 0px) + var(--sheet-inset));
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.3);
  transform-origin: 50% 100%;
  translate: 0 100%;
  scale: 0.9 1;
  transition:
    translate 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    scale 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: translate, scale;
}

.sheet-modal.is-open .sheet-modal-panel {
  translate: 0 0;
  scale: 1 1;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  transition:
    translate 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    scale 1s cubic-bezier(0.3, 1.25, 0.5, 1),
    border-radius 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.sheet-modal-handle-zone {
  flex: none;
  width: 100%;
  padding: 10px 0 16px;
  display: flex;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}

.sheet-modal-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--text-dim);
}

.sheet-modal-title {
  flex: none;
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
  color: var(--text);
  margin-bottom: 16px;
}

.sheet-modal-body {
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  padding-bottom: 4px;
  overscroll-behavior: contain;
}

/* --- предложка --- */

.suggest-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.suggest-textarea {
  width: 100%;
  min-height: 84px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.4;
  resize: vertical;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
}

.suggest-textarea::placeholder {
  color: var(--text-dim);
}

.suggest-intro {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

.suggest-text-field {
  position: relative;
}

.suggest-textarea-designed {
  width: 100%;
  min-height: 130px;
  padding: 18px 18px 36px;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  border-radius: var(--radius-lg);
  border: 1.5px solid color-mix(in srgb, var(--coral-mid) 22%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--coral-mid) 12%, var(--surface-2)) 0%, var(--surface-2) 65%);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.suggest-textarea-designed:focus {
  outline: none;
  border-color: var(--coral-mid);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral-mid) 16%, transparent);
}

.suggest-textarea-designed::placeholder {
  color: var(--text-dim);
}

.suggest-char-count {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 12px;
  color: var(--text-dim);
  pointer-events: none;
}

.suggest-photo-pick {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px solid color-mix(in srgb, var(--coral-mid) 32%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--coral-mid) 10%, var(--surface-2));
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.suggest-photo-pick svg { width: 24px; height: 24px; color: var(--coral-mid); }
.suggest-photo-pick:focus-within { outline: 3px solid color-mix(in srgb, var(--coral-mid) 30%, transparent); outline-offset: 2px; }

.suggest-photo-preview { display: grid; gap: 8px; }
.suggest-photo-preview img,
.fmd-bubble-photo { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius-md); }
.suggest-photo-preview button { justify-self: start; color: var(--coral-deep); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.task-message-btn { width: 100%; margin-top: 12px; }

/* --- "Ну как тебе?" — оценка блока программы --- */

.feedback-stars {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 6px 0 2px;
}

.feedback-star {
  font-size: 40px;
  line-height: 1;
  color: color-mix(in srgb, var(--text) 18%, transparent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.15s ease, color 0.15s ease;
}

.feedback-star:active {
  transform: scale(0.88);
}

.feedback-star.is-filled {
  color: var(--gold-light);
}

/* --- полная история --- */

.history-list {
  width: 100%;
}

/* --- второстепенные экраны --- */

.name {
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}

/* --- профиль: шапка с аватаркой и сводкой --- */

.profile-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  cursor: default;
  margin-bottom: 4px;
}

.profile-avatar span {
  font-size: 24px;
  color: #ffffff;
  font-weight: 700;
}

.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 28px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.hint {
  font-size: 15px;
  color: var(--text-muted);
  text-align: center;
}

.error {
  font-size: 14px;
  color: var(--error);
  text-align: center;
}

.success {
  font-size: 15px;
  font-weight: 700;
  color: var(--success);
  text-align: center;
}

.group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.btn {
  width: 100%;
  padding: 19px;
  font-size: 17px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn-coral-solid {
  background: color-mix(in srgb, var(--coral-mid) 62%, var(--card-dark) 38%);
}

.btn-ghost {
  background: var(--surface-2);
  color: var(--text-muted);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  width: auto;
}

.back {
  align-self: flex-start;
}

/* --- пикер суммы: крупное число + слайдер + широкая лента быстрых сумм --- */

/* --- переключатель валюты на экране передачи баллов --- */

/* --- анимация ожидания NFC-метки: расходящиеся кольца вокруг значка --- */

@keyframes nfc-pulse {
  0% { transform: scale(0.45); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

video {
  width: 100%;
  max-width: 300px;
  border-radius: var(--radius-md);
  background: #000;
}

.qr-frame {
  align-self: center;
  background: #ffffff;
  padding: 18px;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--teal-mid) 60%, transparent);
}

.qr-canvas {
  display: block;
}

/* --- банк форумных --- */

/* Шапка банка — как на главной: закреплена сверху (sticky), а лента (.sheet)
   заезжает на неё внахлёст. Цвета блоков — яркие сплошные цвета палитры с
   тёмным текстом, как у заданий и трека на главной. */
#view-bank .hero {
  gap: 0;
}

#view-bank .hero-top {
  margin-bottom: 14px;
}

#view-bank .balance {
  font-size: 72px;
}

.bank-rank-title {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--coral-mid);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.bank-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--coral-light);
  transition: width 0.8s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.bank-progress-label {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 75%, transparent);
}

/* Ежедневный бонус — широкая кнопка на всю ширину, того же вида, что
   главная кнопка на главной. */
.bank-bonus-btn {
  flex: none;
  width: 100%;
}

.tasks.bank-card-coral {
  background: var(--coral-light);
}

.tasks.bank-card-teal {
  background: var(--teal-light);
}

/* --- карточка «Юбилейные»: баланс, курс, график цены, покупка --- */

.jubilee-balance {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--card-dark);
}

.jubilee-rate-label {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: color-mix(in srgb, var(--card-dark) 70%, transparent);
}

.jubilee-chart {
  width: 100%;
  height: 64px;
  display: block;
}

.jubilee-chart-line {
  fill: none;
  stroke: var(--card-dark);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jubilee-chart-fill {
  stroke: none;
  fill: color-mix(in srgb, var(--card-dark) 14%, transparent);
}

.jubilee-buy-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.jubilee-stepper-btn {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-dark) 12%, transparent);
  color: var(--card-dark);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.jubilee-stepper-btn:active {
  transform: scale(0.92);
}

.jubilee-buy-count-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 96px;
}

.jubilee-buy-count {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  color: var(--card-dark);
}

.jubilee-buy-cost {
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--card-dark) 65%, transparent);
}

/* --- ачивки: почтовые марки-штампы --- */

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 10px;
}

/* Ачивка — почтовая марка-штамп с перфорированным краем, как настоящий штамп
   форума: бумага и чернила. Зубцы вырезаются маской (внутренний прямоугольник
   плюс четыре полосы с полукруглыми вырезами), тень — на обёртке, потому что
   маска обрезает собственную тень. Запертая марка — пустое место под штамп:
   полупрозрачная, лого бледное, вместо иконки замок. */
.achievement-badge {
  filter: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.achievement-badge.is-unlocked {
  filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--teal-deep) 45%, transparent));
}

.achievement-badge.is-unlocked:nth-child(3n + 1) { rotate: -2deg; }
.achievement-badge.is-unlocked:nth-child(3n + 2) { rotate: 1.5deg; }
.achievement-badge.is-unlocked:nth-child(3n) { rotate: -1deg; }

.achievement-stamp {
  --perf-r: 4px;
  --perf-pitch: 12px;
  --paper: #f7f0df;
  --ink: #1b1613;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 7px;
  aspect-ratio: 4 / 5;
  padding: 14px 8px 12px;
  background: color-mix(in srgb, var(--teal-deep) 14%, transparent);
  -webkit-mask:
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--perf-r)) calc(100% - 2 * var(--perf-r)) no-repeat,
    radial-gradient(circle at 50% 0, #0000 var(--perf-r), #000 calc(var(--perf-r) + 0.5px)) top / var(--perf-pitch) calc(2 * var(--perf-r)) round no-repeat,
    radial-gradient(circle at 50% 100%, #0000 var(--perf-r), #000 calc(var(--perf-r) + 0.5px)) bottom / var(--perf-pitch) calc(2 * var(--perf-r)) round no-repeat,
    radial-gradient(circle at 0 50%, #0000 var(--perf-r), #000 calc(var(--perf-r) + 0.5px)) left / calc(2 * var(--perf-r)) var(--perf-pitch) no-repeat round,
    radial-gradient(circle at 100% 50%, #0000 var(--perf-r), #000 calc(var(--perf-r) + 0.5px)) right / calc(2 * var(--perf-r)) var(--perf-pitch) no-repeat round;
  mask:
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--perf-r)) calc(100% - 2 * var(--perf-r)) no-repeat,
    radial-gradient(circle at 50% 0, #0000 var(--perf-r), #000 calc(var(--perf-r) + 0.5px)) top / var(--perf-pitch) calc(2 * var(--perf-r)) round no-repeat,
    radial-gradient(circle at 50% 100%, #0000 var(--perf-r), #000 calc(var(--perf-r) + 0.5px)) bottom / var(--perf-pitch) calc(2 * var(--perf-r)) round no-repeat,
    radial-gradient(circle at 0 50%, #0000 var(--perf-r), #000 calc(var(--perf-r) + 0.5px)) left / calc(2 * var(--perf-r)) var(--perf-pitch) no-repeat round,
    radial-gradient(circle at 100% 50%, #0000 var(--perf-r), #000 calc(var(--perf-r) + 0.5px)) right / calc(2 * var(--perf-r)) var(--perf-pitch) no-repeat round;
}

.is-unlocked .achievement-stamp {
  background: var(--paper);
}

/* Лого ФМД очень бледным оттиском под иконкой. */
.achievement-stamp::before {
  content: '';
  position: absolute;
  inset: 20% 14%;
  background: color-mix(in srgb, var(--teal-deep) 10%, transparent);
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  pointer-events: none;
}

.is-unlocked .achievement-stamp::before {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.achievement-icon {
  position: relative;
  font-size: 30px;
  line-height: 1;
}

.achievement-badge:not(.is-unlocked) .achievement-icon {
  font-size: 20px;
  opacity: 0.55;
}

.achievement-title {
  position: relative;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.2;
}

.achievement-badge:not(.is-unlocked) .achievement-title {
  font-weight: 700;
  color: color-mix(in srgb, var(--teal-deep) 65%, transparent);
}

/* --- история операций внутри карточки: тёмный текст на яркой подложке --- */

#bank-history-list .activity-row,
#bank-leaderboard-list .activity-row {
  background: none;
  border-radius: 0;
  padding: 10px 0;
}

#bank-history-list .activity-row {
  border-top: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
}

#bank-leaderboard-list .activity-row {
  border-top: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
}

#bank-history-list .activity-row:first-child,
#bank-leaderboard-list .activity-row:first-child {
  border-top: none;
  padding-top: 0;
}

#bank-history-list .activity-row:last-child,
#bank-leaderboard-list .activity-row:last-child {
  padding-bottom: 0;
}

#bank-history-list .activity-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

#bank-history-list .activity-time {
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

#bank-history-list .activity-amount.amount-in,
#bank-history-list .activity-amount.amount-out {
  color: var(--text);
}

.tasks.bank-card-coral .tasks-head .activity-title {
  color: var(--text);
}

/* --- топ форумных: без подложки, на самой ленте --- */

.bank-top .tasks-head .activity-title {
  color: var(--text);
}

#bank-leaderboard-list .activity-name {
  flex: 1;
  min-width: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.bank-rank-number {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 15px;
  color: var(--text);
}

/* Пьедестал рейтинга форумных: три самостоятельные ступени. */
.bank-top-subtitle {
  margin: 4px 4px 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-soft);
}

.bank-podium {
  width: 100%;
  margin: 12px 0 18px;
  padding-top: 18px;
}

.bank-podium:empty { display: none; }

.bank-top3-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
}

.bank-top3-place {
  --podium-fill: #eef0f4;
  --podium-border: #dbe0e7;
  --podium-accent: #596575;
  --podium-height: 124px;
  min-width: 0;
  text-align: center;
}

.bank-top3-place-1 {
  --podium-fill: #ffe5a8;
  --podium-border: #e9bd61;
  --podium-accent: #8a540c;
  --podium-height: 154px;
}

.bank-top3-place-3 {
  --podium-fill: #f7e1d3;
  --podium-border: #e5c3ad;
  --podium-accent: #915c3a;
  --podium-height: 104px;
}

.bank-top3-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0 2px 12px;
}

.bank-top3-avatar {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: var(--avatar-color, #bf3a0b);
  box-shadow: 0 0 0 1px var(--podium-border), 0 5px 12px rgba(42, 15, 6, 0.08);
  color: #ffffff;
  font-size: 18px;
  font-weight: 750;
  line-height: 1;
}

.bank-top3-avatar > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.bank-top3-avatar .bank-top3-crown { z-index: 2; }

.bank-top3-place-1 .bank-top3-avatar {
  width: 58px;
  height: 58px;
  border-width: 4px;
  box-shadow: 0 0 0 2px var(--podium-border), 0 6px 16px rgba(138, 84, 12, 0.12);
  font-size: 24px;
}

.bank-top3-crown {
  position: absolute;
  top: -24px;
  left: 50%;
  width: 27px;
  height: 22px;
  transform: translateX(-50%);
  color: #b47a16;
}

.bank-top3-crown > svg { display: block; width: 100%; height: 100%; }

.bank-top3-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 34px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.bank-top3-name > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-top3-name > span + span { font-weight: 500; color: var(--ink-soft); }

.bank-top3-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  height: var(--podium-height);
  padding: 16px 5px 12px;
  border: 1px solid var(--podium-border);
  border-radius: 22px 22px 12px 12px;
  background: var(--podium-fill);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.65);
  color: var(--ink);
}

.bank-top3-place-1 .bank-top3-step {
  padding-top: 20px;
  border-radius: 26px 26px 12px 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 5px 14px rgba(138, 84, 12, 0.08);
}

.bank-top3-amount {
  display: block;
  max-width: 100%;
  font-size: 22px;
  font-weight: 800;
  font-stretch: 95%;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.bank-top3-place-1 .bank-top3-amount { font-size: 28px; }
.bank-top3-amount.is-long { font-size: 18px; }
.bank-top3-place-1 .bank-top3-amount.is-long { font-size: 21px; }
.bank-top3-amount.is-very-long { font-size: 13px; }

.bank-top3-unit {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--podium-accent);
}

.bank-top3-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.56);
  color: var(--podium-accent);
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 20px;
  line-height: 1;
}

.bank-top3-place-1 .bank-top3-rank { width: 42px; height: 42px; font-size: 29px; }

.bank-top3-place.is-vacant {
  --podium-fill: #faf5f0;
  --podium-border: #eee3d9;
  --podium-accent: #927b6e;
}

.bank-top3-place.is-vacant .bank-top3-avatar {
  border: 1px dashed #cbb7a8;
  background: transparent;
  box-shadow: none;
  color: #b29a89;
  font-weight: 400;
}

.bank-top3-place.is-vacant .bank-top3-name { font-weight: 500; color: #927b6e; }

@media (max-width: 360px) {
  .bank-top3-grid { gap: 6px; }
  .bank-top3-name { font-size: 11px; }
  .bank-top3-step { padding-right: 3px; padding-left: 3px; }
  .bank-top3-amount { font-size: 19px; }
  .bank-top3-place-1 .bank-top3-amount { font-size: 24px; }
  .bank-top3-amount.is-long { font-size: 16px; }
  .bank-top3-place-1 .bank-top3-amount.is-long { font-size: 18px; }
  .bank-top3-amount.is-very-long { font-size: 12px; }
}

/* --- анимации банка: карточки въезжают по очереди, аватары топ-3
   выскакивают с лёгким пружинным перехлёстом --- */

@keyframes bankCardIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#view-bank .sheet > * {
  animation: bankCardIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

#view-bank .sheet > *:nth-child(1) { animation-delay: 0s; }
#view-bank .sheet > *:nth-child(2) { animation-delay: 0.06s; }
#view-bank .sheet > *:nth-child(3) { animation-delay: 0.1s; }
#view-bank .sheet > *:nth-child(4) { animation-delay: 0.16s; }
#view-bank .sheet > *:nth-child(5) { animation-delay: 0.22s; }
#view-bank .sheet > *:nth-child(6) { animation-delay: 0.28s; }
#view-bank .sheet > *:nth-child(7) { animation-delay: 0.34s; }
#view-bank .sheet > *:nth-child(8) { animation-delay: 0.4s; }

@keyframes podiumPop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.podium-avatar {
  animation: podiumPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.podium-place-2 .podium-avatar {
  animation-delay: 0.15s;
}

.podium-place-1 .podium-avatar {
  animation-delay: 0.3s;
}

.podium-place-3 .podium-avatar {
  animation-delay: 0.45s;
}

@keyframes achievementPop {
  0% {
    transform: scale(0.7);
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.achievement-badge.is-unlocked {
  animation: achievementPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.achievement-badge:active {
  transform: scale(0.95);
}

#bank-news-list {
  transition: opacity 0.25s ease;
}

/* --- кольцо прогресса достижений, в духе колец активности --- */

.bank-ring-badge {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
}

.bank-ring-svg {
  width: 36px;
  height: 36px;
  transform: rotate(-90deg);
}

.bank-ring-track {
  fill: none;
  stroke: color-mix(in srgb, var(--teal-deep) 18%, transparent);
  stroke-width: 3;
}

.bank-ring-fill {
  fill: none;
  stroke: var(--teal-deep);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 97.4;
  stroke-dashoffset: 97.4;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.bank-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--card-dark);
}

/* --- "Ну шо ты, фортовый?" — колесо фортуны на главной ---
   Коралловая карточка с белым текстом, как блок трека. Колесо — SVG, крутится
   одним CSS-переходом; приз выбирает сервер, клиент только доводит колесо до
   нужного сектора. */

/* тот же паттерн, что на фоне страниц (белые "вертушки"), приглушённо */

.fortune-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.fortune-sub {
  width: 100%;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--text);
}

.fortune-stage {
  position: relative;
  width: 100%;
  max-width: 270px;
  aspect-ratio: 1;
  margin-top: 8px;
}

/* Стекло под колесом: колесо само полупрозрачное, поэтому диск не крутится —
   он симметричен, а размытие и блик по краю должны оставаться на месте. */

.fortune-wheel {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 5.2s cubic-bezier(0.12, 0.55, 0.12, 1);
}

.fortune-pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 22px solid var(--text);
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--coral-deep) 55%, transparent));
}

.fortune-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 17%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--text);
}

.fortune-hub::before {
  content: '';
  position: absolute;
  inset: 22%;
  background: var(--coral-mid);
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
}

.fortune-spin-btn {
  width: 100%;
  padding: 17px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--coral-mid);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.fortune-spin-btn:active {
  transform: scale(0.97);
}

.fortune-spin-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.fortune-tickets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.fortune-tickets-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.fortune-tickets-list {
  display: flex;
  flex-direction: column;
}

.fortune-ticket-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
  background: none;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.fortune-ticket-row:first-child {
  border-top: none;
}

.fortune-ticket-row.is-used {
  opacity: 0.7;
}

.fortune-ticket-row-emoji {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--card-dark) 22%, transparent);
  font-size: 19px;
}

.fortune-ticket-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fortune-ticket-row-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.fortune-ticket-row-meta {
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 80%, transparent);
}

.fortune-ticket-row-arrow {
  flex: none;
  width: 18px;
  height: 18px;
}

/* --- билетик: бумажный купон с выемками по бокам на линии отрыва --- */

.fortune-ticket {
  --tear: 168px;
  --paper: #f7f0df;
  --ink: #1b1613;
  width: 100%;
  max-width: 300px;
  margin: 4px auto 0;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  border-radius: var(--radius-md);
  -webkit-mask:
    radial-gradient(circle 12px at 0 var(--tear), #0000 11.5px, #000 12px) left / 51% 100% no-repeat,
    radial-gradient(circle 12px at 100% var(--tear), #0000 11.5px, #000 12px) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 12px at 0 var(--tear), #0000 11.5px, #000 12px) left / 51% 100% no-repeat,
    radial-gradient(circle 12px at 100% var(--tear), #0000 11.5px, #000 12px) right / 51% 100% no-repeat;
}

.fortune-ticket-top {
  height: var(--tear);
  padding: 20px 22px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

.fortune-ticket-emoji {
  font-size: 46px;
  line-height: 1.1;
}

.fortune-ticket-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.fortune-ticket-prize {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--coral-mid);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fortune-ticket-tear {
  height: 2px;
  margin: 0 24px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 35%, transparent) 0 7px, transparent 7px 14px);
}

.fortune-ticket-bottom {
  padding: 16px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fortune-ticket-barcode {
  width: 74%;
  height: 34px;
  color: var(--ink);
}

.fortune-ticket-code {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

.fortune-ticket-hint {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
}

.fortune-ticket.is-used .fortune-ticket-top,
.fortune-ticket.is-used .fortune-ticket-barcode,
.fortune-ticket.is-used .fortune-ticket-code {
  opacity: 0.45;
}

/* Билетик с фото приза: верх выше, фото на всю ширину и мягко проявляется. */
.fortune-ticket.has-photo {
  --tear: 240px;
}

.fortune-ticket.has-photo .fortune-ticket-top {
  padding-top: 18px;
  gap: 6px;
}

.fortune-ticket-photo {
  width: 100%;
  height: 132px;
  object-fit: cover;
  border-radius: var(--radius-md);
  animation: ticketPhotoIn 0.5s ease both;
}

@keyframes ticketPhotoIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- диалоги подтверждения в стиле приложения (вместо системных) ---
   Стеклянная карточка по центру. Радиусы по формуле вложенных скруглений:
   карточка --radius-xl (44), кнопки внутри --radius-sm (44 − 14 отступа). */

.app-dialog {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.app-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.app-dialog.is-open .app-dialog-backdrop {
  opacity: 1;
}

.app-dialog-panel {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: var(--sheet-inset);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  background-color: color-mix(in srgb, var(--card-dark) 46%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  opacity: 0;
  scale: 0.88;
  translate: 0 14px;
  transition:
    opacity 0.25s ease,
    scale 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    translate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-dialog.is-open .app-dialog-panel {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  transition:
    opacity 0.3s ease,
    scale 0.6s cubic-bezier(0.3, 1.3, 0.5, 1),
    translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.app-dialog-title {
  padding: 10px 10px 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}

.app-dialog-text {
  padding: 0 10px 8px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 82%, transparent);
}

.app-dialog-actions {
  display: flex;
  gap: 10px;
}

.app-dialog-btn {
  flex: 1;
  padding: 16px 10px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.app-dialog-btn:active {
  transform: scale(0.97);
}

.app-dialog-btn-primary {
  background: var(--coral-mid);
}

.app-dialog-btn-ghost {
  background: color-mix(in srgb, var(--text) 16%, transparent);
}

/* Заголовок колеса — крупный, фирменным display-шрифтом, всё по центру. */

.fortune-sub,
.fortune-tickets-title {
  text-align: center;
}

/* Мягкая тень под белым текстом блока колеса — чтобы не сливался с паттерном. */
.fortune-sub,
.fortune-tickets-title,
.fortune-ticket-row-title,
.fortune-ticket-row-meta {
  text-shadow: 0 2px 10px color-mix(in srgb, var(--coral-deep) 45%, transparent);
}

/* Текст на пьедестале — с той же мягкой тенью, что в блоке колеса: паттерн
   под ним не должен спорить с белым. */
.podium-name,
.podium-amount {
  text-shadow: 0 2px 10px color-mix(in srgb, var(--coral-deep) 45%, transparent);
}

.fortune-tickets-more {
  align-self: center;
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-dark) 22%, transparent);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* --- ежедневный бонус: получение с анимацией, потом серая кнопка --- */

.bank-bonus-btn {
  position: relative;
  transition: background-color 0.5s ease, color 0.5s ease, transform 0.15s ease;
}

.bank-bonus-btn.is-claimed {
  background: #4d4756;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  cursor: default;
}

.bank-bonus-btn:disabled {
  opacity: 1;
}

/* --- второстепенные экраны (мой QR-код, профиль): в стиле банка ---
   Шапка с круглой кнопкой "назад" и заголовком по центру, яркие карточки
   палитры с паттерном, скругления по формуле вложенных радиусов. */

.hero-top-spacer {
  flex: none;
  width: 38px;
  height: 38px;
}

.qr-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.qr-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../shared/brand/pattern.png') center / cover no-repeat;
  opacity: 0.12;
  pointer-events: none;
}

.qr-card {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 26px 22px 24px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  background: var(--coral-mid);
  color: var(--text);
}

.qr-card-title {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 34px;
  line-height: 1.05;
  text-shadow: 0 2px 12px color-mix(in srgb, var(--coral-deep) 45%, transparent);
}

.qr-card .qr-frame {
  align-self: center;
  padding: 16px;
  border-radius: 24px;
  background: var(--text);
  box-shadow: 0 18px 36px -12px color-mix(in srgb, var(--coral-deep) 70%, transparent);
}

.qr-card-name {
  font-size: 21px;
  font-weight: 800;
  text-shadow: 0 2px 10px color-mix(in srgb, var(--coral-deep) 45%, transparent);
}

.qr-card-hint {
  max-width: 260px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 90%, transparent);
  text-shadow: 0 2px 10px color-mix(in srgb, var(--coral-deep) 45%, transparent);
}

/* профиль: герой с аватаром, именем и балансом */

.profile-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.profile-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-remove {
  font-size: 13px;
  padding: 2px;
}

.profile-photo-status {
  font-size: 13px;
}

/* профиль: карточка с данными */

.view-home:not(.hidden) {
  animation: view-arrive 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes view-arrive {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.welcome-preview-note {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 10;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* --- редактор фото профиля: поворот/масштаб/положение перед загрузкой,
   поверх Cropper.js (CDN). Круг обрезки — визуальный (сама обрезка 1:1,
   квадрат), круглая маска нужна только чтобы заранее показать, как фото
   сядет в кружок аватарки. --- */

.photo-editor {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  display: flex;
  flex-direction: column;
}

.photo-editor.hidden {
  display: none !important;
}

.photo-editor-topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 12px;
}

.photo-editor-topbtn {
  background: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  padding: 6px 4px;
  cursor: pointer;
}

.photo-editor-done-btn {
  color: var(--coral-light);
}

.photo-editor-title {
  font-size: 15px;
  font-weight: 700;
  color: color-mix(in srgb, #fff 75%, transparent);
}

.photo-editor-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

.photo-editor-image {
  display: block;
  max-width: 100%;
}

.photo-editor-canvas-wrap .cropper-view-box,
.photo-editor-canvas-wrap .cropper-face {
  border-radius: 50%;
}

.photo-editor-canvas-wrap .cropper-view-box {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.55);
}

.photo-editor-controls {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
}

.photo-editor-zoom-row {
  padding-top: 0;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
}

.photo-editor-ctrl-btn {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 14%, transparent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.photo-editor-ctrl-btn svg {
  width: 20px;
  height: 20px;
}

.photo-editor-zoom-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: color-mix(in srgb, #fff 65%, transparent);
}

.photo-editor-zoom-icon-big {
  width: 22px;
  height: 22px;
  color: #ffffff;
}

.photo-editor-slider {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 20%, transparent);
  appearance: none;
  outline: none;
}

.photo-editor-slider::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.photo-editor-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.photo-editor-error {
  padding: 0 24px 16px;
  color: var(--error);
  text-align: center;
}

/* ======================================================================
   Яркая тема — как у квиза на экранах форума (2026-10-18).
   Фон стал оранжевым (см. .page-glow), поэтому всё, что было рассчитано
   на тёмный фон, переведено на язык квиза:
   · круглые кнопки в шапке — белые с оранжевым значком (как человечек
     квиза), главная кнопка на фоне — белая с оранжевым текстом (как
     «Начать» на обложке квиза);
   · лист (.sheet) — полупрозрачная светлая панель, как панель ответов в
     квизе. Внутри неё «тёмные» переменные перекрашены в полупрозрачный
     белый — поля, строки и второстепенные кнопки светлеют сами;
   · в цветных карточках — обратно тёмный текст; коралловые карточки
     стали персиковыми, иначе они сливаются с оранжевой подложкой.
   ====================================================================== */

.brand-mark-box,
.avatar {
  background: #ffffff;
}

.brand-mark-box::before {
  background: var(--orange);
}

.avatar svg {
  color: var(--orange);
}

.balance {
  text-shadow: none;
}

/* главная кнопка на ярком фоне — белая, как «Начать» в квизе */
.action-wide {
  background: #ffffff;
  color: var(--orange);
}

/* значок обмена — белая картинка: красим её в оранжевый через маску,
   а саму картинку сдвигаем за пределы рамки */

.sheet {
  --surface-2: rgba(255, 255, 255, 0.2);
  --text-muted: rgba(255, 255, 255, 0.88);
  --text-dim: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}

.tasks,
.program-block,
.notify-card {
  --surface-2: color-mix(in srgb, #ffffff 45%, transparent);
  --text-muted: color-mix(in srgb, var(--card-dark) 64%, transparent);
  --text-dim: color-mix(in srgb, var(--card-dark) 46%, transparent);
}

#track-section,
.tasks.bank-card-coral {
  background: var(--peach);
}

/* кнопки: главные — белые с оранжевым текстом, бирюзовая — как кнопка
   «готово» на клавиатуре квиза. body — чтобы перебить shared/auth.css */
body .btn-coral-solid {
  background: #ffffff;
  color: var(--orange);
}

/* «← Назад» в шапках внутренних экранов */
.hero .btn-ghost {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.sheet > .link-btn,
.sheet .group > .link-btn {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* сообщения на оранжевом: красный и зелёный там не читаются */
.sheet .error,
.sheet .success {
  color: #ffffff;
  font-weight: 700;
}

/* мелочи, которые на оранжевом не читались */

.sheet .activity-amount.amount-in {
  color: #ffffff;
}

.sheet .activity-amount.amount-out {
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

/* «Удалить аккаунт» — тёмным, красный на оранжевом теряется */

/* ======================================================================
   Экраны входа: установка, вход, код из письма, бейдж, ожидание,
   прощание — язык квиза. Логотип сверху, человечек с подписью A24,
   крупный заголовок широкими прописными, под ним светлая полупрозрачная
   панель с белыми полями. Главная кнопка — «чернила»: среди белых полей
   белая кнопка потерялась бы. Второстепенные — контур, как в квизе.
   Скругления по формуле: панель --radius-xl с отступом --sheet-inset,
   всё, что стоит у её краёв, — --radius-sm (44 − 14 = 30).
   ====================================================================== */

.view.auth-screen {
  max-width: 480px;
  justify-content: flex-start;
  gap: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 20px calc(env(safe-area-inset-bottom, 0px) + 28px);
}

.auth-brand {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-brand-mark {
  flex: none;
  width: 34px;
  height: 34px;
  background: #ffffff;
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
}

.auth-brand-text {
  font-size: 10.5px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Отступ сверху постоянный, а не «по центру»: иначе при переключении
   «Вход / Первый вход» форма меняет высоту и весь блок вместе с
   вкладками прыгает под пальцем. Так блок растёт только вниз. */
.auth-head {
  width: 100%;
  margin-top: clamp(28px, 11vh, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.auth-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 24px;
  line-height: 1;
}

.auth-mascot {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
}

.auth-mascot::before {
  content: '';
  position: absolute;
  inset: 22%;
  background: var(--orange);
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
}

.auth-title {
  margin-top: 14px;
  /* кегль от ширины экрана: самое длинное слово («ПРИЛОЖЕНИЕ»,
     «ЗАКОНЧИЛСЯ») целиком помещается в строку и не рвётся по буквам */
  font-size: clamp(26px, 9.2vw, 42px);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  hyphens: none;
}

.auth-lead {
  max-width: 34ch;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

.auth-panel {
  width: 100%;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--sheet-inset);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.17);
}

.auth-panel-center {
  align-items: center;
  padding-top: 26px;
  padding-bottom: 22px;
  text-align: center;
}

.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-screen .text-input {
  padding: 18px 22px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}

.auth-screen .text-input::placeholder {
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  font-weight: 700;
}

.auth-screen .text-input:focus {
  box-shadow: inset 0 0 0 2.5px var(--ink);
}

.auth-screen .auth-code-input {
  padding-left: calc(22px + 0.5em);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.auth-screen .auth-textarea {
  min-height: 150px;
  resize: none;
  font-weight: 600;
  line-height: 1.45;
}

.auth-btn {
  width: 100%;
  padding: 19px 22px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.auth-btn:active {
  transform: scale(0.98);
}

.auth-btn:disabled {
  opacity: 0.6;
}

/* переключатель «Вход / Первый вход»: отступы 4 и 8 px не трогаем —
   на них завязано перетаскивание пальцем в shared/auth-flow.js */
.auth-screen .auth-tabs {
  margin-bottom: 4px;
  background: rgba(42, 15, 6, 0.16);
}

.auth-screen .auth-tabs-thumb {
  background: #ffffff;
}

.auth-screen .tab-btn {
  padding: 14px 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.auth-screen .tab-btn.is-active {
  color: var(--ink);
}

.auth-note {
  padding: 2px 6px 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.94);
}

.auth-note-center {
  text-align: center;
}

.auth-status {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
}

.auth-screen .error {
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.auth-foot {
  width: 100%;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.auth-link {
  background: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.auth-ghost {
  padding: 14px 28px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}

.auth-ghost:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.16);
}

/* шаги установки — белые карточки, как варианты ответа в квизе */

/* бейдж: от телефона расходятся волны */
.auth-nfc {
  position: relative;
  width: 132px;
  height: 132px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-nfc-core {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-nfc-core svg {
  width: 40px;
  height: 40px;
}

.auth-nfc-ring {
  position: absolute;
  inset: 24px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation: auth-ring 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

.auth-nfc-ring-late {
  animation-delay: 1.2s;
}

@keyframes auth-ring {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(1.62); opacity: 0; }
}

/* ожидание одобрения: «печатает…», как человечек в квизе */
/* ожидание — вращающееся кольцо (точек в интерфейсе нет) */
.auth-wait {
  width: 64px;
  height: 64px;
  margin: 6px 0 16px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: auth-spin 1s linear infinite;
}

.auth-wait span {
  display: none;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

/* появление экрана — блоки поднимаются по очереди */
.auth-screen:not(.hidden) > * {
  animation: auth-rise 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.auth-screen:not(.hidden) > :nth-child(2) { animation-delay: 0.06s; }
.auth-screen:not(.hidden) > :nth-child(3) { animation-delay: 0.12s; }
.auth-screen:not(.hidden) > :nth-child(4) { animation-delay: 0.18s; }
.auth-screen:not(.hidden) > :nth-child(5) { animation-delay: 0.24s; }

@keyframes auth-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ======================================================================
   ЦВЕТОВАЯ СИСТЕМА v2 (2026-10-18) — язык квиза, без «бледности».
   Правила, на которых держится всё ниже:
   1. Холст — насыщенный оранжевый. Прямо на нём — только белый текст
      жирностью от 600, без полупрозрачности.
   2. Содержимое — на сплошных белых карточках с «чернильным» текстом
      (как варианты ответа в квизе). Оранжевый текст на белом — только
      глубокий --orange-ink: обычный оранжевый на белом не читается.
   3. Полупрозрачное — только рамка или стекло, текста на нём нет.
      Лист под шапкой — оранжевое стекло, а не молочная плёнка.
   4. Кнопки: на холсте главная — белая, второстепенная — белый контур.
      Внутри белой карточки главная — оранжевая, второстепенная —
      оранжевый контур. «Чернила» — серьёзные действия и акценты.
   5. Скругления — по формуле вложенных радиусов (44 − 14 = 30).
   ====================================================================== */

:root {
  --orange: #e4511a;
  --orange-ink: #bf3a0b;
  --ink: #2a0f06;
  --ink-soft: #6b3a28;
  --cream: #fff1e7;
  --line: rgba(42, 15, 6, 0.1);
  --gold: #ffc373;
  --peach: #ffb684;
  --teal: #26ab93;
  --teal-ink: #0d7a66;
  --violet: #8862ea;
}

/* --- холст: глубже и ровнее, светлое пятно только в углу шапки --- */

.page-glow {
  background:
    radial-gradient(62% 42% at 0% 0%, rgba(239, 122, 53, 0.8) 0%, rgba(239, 122, 53, 0) 72%),
    radial-gradient(70% 50% at 100% 100%, rgba(186, 48, 6, 0.5) 0%, rgba(186, 48, 6, 0) 72%),
    var(--orange);
}

.page-identity {
  top: 24%;
  opacity: 0.32;
}

.hero-tagline {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
}

.balance-unit,
.hero .balance-unit {
  color: #ffffff;
  font-weight: 800;
}

/* --- лист — оранжевое стекло: прячет то, что под ним, но не белит --- */

.sheet {
  --surface-2: var(--cream);
  --text-muted: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.9);
  background: rgba(228, 81, 26, 0.8);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 -12px 30px rgba(120, 30, 0, 0.16);
}

.sheet .hint {
  color: #ffffff;
  font-weight: 600;
}

/* --- карточки содержимого — сплошные белые --- */

.tasks,
.program-block,
.notify-card,
#track-section,
.tasks.bank-card-coral,
.tasks.bank-card-teal,
.bank-top,
.qr-card {
  --surface-2: var(--cream);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --text-dim: var(--ink-soft);
  background: #ffffff;
  color: var(--ink);
}

.tasks .activity-title,
.program-title,
.tasks .tasks-head .activity-title,
.tasks.bank-card-coral .tasks-head .activity-title {
  color: var(--ink);
}

/* иконка в шапке карточки — цветной круг: так карточки отличаются
   друг от друга, не превращаясь в бледные пастельные плашки */
.tasks-head-icon,
.program-header-icon {
  background: var(--orange);
  color: #ffffff;
}

#tasks-section .tasks-head-icon { background: var(--gold); color: var(--ink); }
#track-section .tasks-head-icon { background: var(--teal); color: #ffffff; }
.notify-card .tasks-head-icon { background: var(--violet); color: #ffffff; }
.tasks.bank-card-teal .tasks-head-icon { background: var(--teal); color: #ffffff; }

#notify-list .feed-item,
.fortune-ticket-row {
  background: var(--cream);
  color: var(--ink);
}

#notify-list .feed-item-text,
.feed-item-time {
  color: var(--ink);
}

.feed-item-time {
  color: var(--ink-soft);
}

.program-item {
  border-color: var(--line);
}

.program-item-title {
  color: var(--ink);
}

.program-item-desc {
  color: var(--ink-soft);
}

.track-chat-btn {
  background: var(--teal);
  color: #ffffff;
}

/* --- кнопки --- */

/* главная на холсте — белая, текст глубокий оранжевый */
body .btn-coral-solid,
.action-wide {
  background: #ffffff;
  color: var(--orange-ink);
  font-weight: 800;
}

/* второстепенная на холсте — белый контур, никакой полупрозрачной заливки */
.btn-ghost,
.hero .btn-ghost,
.sheet .btn-ghost {
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-weight: 800;
}

.sheet > .link-btn,
.sheet .group > .link-btn {
  color: #ffffff;
  font-weight: 800;
}

/* внутри белых карточек и окон */
.btn-solid {
  width: 100%;
  padding: 17px 20px;
  border-radius: var(--radius-sm);
  background: var(--orange);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.btn-line {
  width: 100%;
  padding: 15px 20px;
  border: 2px solid var(--orange-ink);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--orange-ink);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn-solid:active,
.btn-line:active {
  transform: scale(0.97);
}

.btn-solid:disabled {
  opacity: 0.45;
}

.qr-card .btn {
  background: var(--orange);
  color: #ffffff;
}

/* --- главная: четыре понятных действия под балансом --- */

.home-actions {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.home-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  color: #ffffff;
  cursor: pointer;
}

.home-action-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--orange-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.home-action-icon svg {
  width: 26px;
  height: 26px;
}

.home-action:active .home-action-icon {
  transform: scale(0.92);
}

.home-action-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* --- шапки внутренних экранов --- */

.bank-rank-title {
  background: #ffffff;
  color: var(--orange-ink);
}

.bank-progress-fill {
  background: #ffffff;
}

.bank-progress-label {
  color: #ffffff;
  font-weight: 700;
}

/* --- профиль --- */

/* --- банк --- */

.bank-top {
  padding: var(--sheet-inset);
  border-radius: var(--radius-sm);
}

#bank-leaderboard-list .activity-row,
#bank-history-list .activity-row {
  border-color: var(--line);
}

#bank-leaderboard-list .activity-name,
#bank-history-list .activity-name,
#bank-history-list .activity-amount.amount-in,
#bank-history-list .activity-amount.amount-out,
.sheet .bank-top .activity-amount {
  color: var(--ink);
}

#bank-history-list .activity-time {
  color: var(--ink-soft);
}

#bank-history-list .activity-amount.amount-in {
  color: var(--teal-ink);
}

.bank-rank-number {
  background: var(--cream);
  color: var(--ink);
}

.bank-bonus-btn.is-claimed {
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
}

/* юбилейные — тёмная «премиальная» карточка с золотом */
#bank-jubilee-card {
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.92);
  background: var(--ink);
  color: #ffffff;
}

#bank-jubilee-card .activity-title,
#jubilee-rate-label,
.jubilee-buy-cost {
  color: #ffffff;
}

.jubilee-balance,
.jubilee-buy-count {
  color: var(--gold);
}

.jubilee-stepper-btn {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

#bank-jubilee-card .tasks-head-icon {
  background: var(--gold);
  color: var(--ink);
}

.jubilee-buy-confirm {
  background: var(--gold);
  color: var(--ink);
}

/* --- обмен: суммы, переключатель валют, ползунок --- */

.sheet .error,
.sheet .success {
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--ink);
  color: #ffffff;
}

/* --- мой код и сканер --- */

.qr-card::before {
  opacity: 0.05;
}

.qr-card-title {
  color: var(--orange-ink);
  text-shadow: none;
}

.qr-card-name {
  color: var(--ink);
  text-shadow: none;
}

.qr-card-hint {
  color: var(--ink-soft);
  text-shadow: none;
}

.qr-card .qr-frame {
  background: #ffffff;
  border: 2px solid var(--cream);
  box-shadow: none;
}

.quiz-scan-frame {
  background: var(--ink);
}

.quiz-scan-icon {
  background: var(--cream);
}

/* --- окна: светлые, как карточки --- */

.sheet-modal-panel,
.app-dialog-panel {
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --surface-2: var(--cream);
  background: #ffffff;
  color: var(--ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sheet-modal-title,
.app-dialog-title {
  color: var(--orange-ink);
}

.sheet-modal-body,
.app-dialog-text {
  color: var(--ink);
}

.sheet-modal-handle {
  background: rgba(42, 15, 6, 0.22);
}

.suggest-textarea {
  background: var(--cream);
  color: var(--ink);
}

.suggest-textarea::placeholder {
  color: var(--ink-soft);
}

.app-dialog-btn-primary {
  background: var(--orange);
  color: #ffffff;
}

.app-dialog-btn-ghost {
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
}

.sheet-modal-backdrop,
.app-dialog-backdrop {
  background: rgba(42, 15, 6, 0.42);
}

.offline-banner {
  background: var(--ink);
  color: #ffffff;
}

/* ======================================================================
   ФМД — маскот
   Круг белый, человечек — знак форума оранжевым. Настроение задаётся
   атрибутом data-mood: idle дышит, talk покачивается, пока печатает,
   think задумчиво наклоняется, happy подпрыгивает, wave машет.
   ====================================================================== */

.fmd-avatar {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
}

.fmd-avatar::before {
  content: '';
  position: absolute;
  inset: 21%;
  background: var(--orange);
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  transform-origin: 50% 60%;
}

.fmd-avatar-sm { width: 40px; height: 40px; }

.fmd-avatar[data-mood='idle'] { animation: fmd-float 4.2s ease-in-out infinite; }
.fmd-avatar[data-mood='idle']::before { animation: fmd-breathe 4.2s ease-in-out infinite; }
.fmd-avatar[data-mood='talk'] { animation: fmd-bob 0.46s ease-in-out infinite; }
.fmd-avatar[data-mood='talk']::before { animation: fmd-chatter 0.46s ease-in-out infinite; }
.fmd-avatar[data-mood='think']::before { animation: fmd-think 1.6s ease-in-out infinite; }
.fmd-avatar[data-mood='happy'] { animation: fmd-jump 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) 2; }
.fmd-avatar[data-mood='happy']::before { animation: fmd-spin 0.9s cubic-bezier(0.3, 1.2, 0.4, 1) 1; }
.fmd-avatar[data-mood='wave']::before { animation: fmd-wave 1.1s ease-in-out 3; }

@keyframes fmd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fmd-breathe { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(5deg) scale(1.06); } }
@keyframes fmd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes fmd-chatter { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.05); } }
@keyframes fmd-think { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(10deg) translateY(-1px); } }
@keyframes fmd-jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px) scale(1.04); } }
@keyframes fmd-spin { from { transform: rotate(0) scale(0.9); } to { transform: rotate(360deg) scale(1); } }
@keyframes fmd-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-26deg); } 60% { transform: rotate(16deg); } }

/* ФМД в шапке главной: тот же круг, по нажатию — чат */
.fmd-top-btn {
  cursor: pointer;
  overflow: visible;
}

.fmd-top-btn:active {
  transform: scale(0.92);
}

@keyframes fmd-dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

.fmd-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fmd-name {
  font-size: 15px;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fmd-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}

.fmd-online {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(38, 171, 147, 0.25);
}

/* --- карточка ФМД наверху ленты --- */

.fmd-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
}

.fmd-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fmd-card .fmd-avatar {
  width: 52px;
  height: 52px;
  background: var(--orange);
}

.fmd-card .fmd-avatar::before {
  background: #ffffff;
}

.fmd-card .fmd-status {
  color: var(--teal-ink);
}

.fmd-card-text {
  min-height: 2.8em;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.fmd-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- чат с ФМД --- */

.view-fmd {
  max-width: 560px;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.view-fmd:not(.hidden) {
  animation: view-arrive 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.fmd-chat-top {
  flex: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 14px;
}

.fmd-chat-who {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}

.fmd-chat-who .fmd-status {
  font-weight: 600;
}

.fmd-chat-log {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px 18px;
  overscroll-behavior: contain;
}

.fmd-msg {
  max-width: 86%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: fmd-msg-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.fmd-msg-bot { align-self: flex-start; }
.fmd-msg-me { align-self: flex-end; align-items: flex-end; }

@keyframes fmd-msg-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.fmd-bubble {
  padding: 12px 16px;
  border-radius: 22px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.42;
}

.fmd-msg-bot .fmd-bubble {
  border-bottom-left-radius: 6px;
  background: #ffffff;
  color: var(--ink);
}

.fmd-msg-me .fmd-bubble {
  border-bottom-right-radius: 6px;
  background: var(--ink);
  color: #ffffff;
}

.fmd-msg.is-organizer .fmd-bubble {
  border: 1px solid rgba(255, 207, 119, 0.9);
  background: linear-gradient(135deg, #ff9d27 0%, #ff6b1a 100%);
  color: #2b1304;
  box-shadow: 0 0 18px rgba(255, 130, 24, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.fmd-msg.is-organizer .fmd-bubble-label {
  color: #5a2200;
}

.fmd-msg.is-pending .fmd-bubble {
  background: var(--cream);
  color: var(--ink-soft);
  font-style: italic;
}

.fmd-bubble-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fmd-bubble-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-ink);
}

.fmd-msg-meta {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

.fmd-bubble-typing {
  display: flex;
  gap: 5px;
  padding: 15px 18px;
}

.fmd-bubble-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  animation: auth-dot 1.1s ease-in-out infinite;
}

.fmd-bubble-typing span:nth-child(2) { animation-delay: 0.14s; }
.fmd-bubble-typing span:nth-child(3) { animation-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
  .fmd-bubble-typing span { animation: none; }
}

.fmd-chat-bottom {
  flex: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: rgba(228, 81, 26, 0.82);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.fmd-ask {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.fmd-ask-input {
  flex: 1;
  min-width: 0;
  max-height: 132px;
  padding: 15px 18px;
  border-radius: 26px;
  background: #ffffff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  resize: none;
}

.fmd-ask-input::placeholder {
  color: var(--ink-soft);
}

.fmd-ask-send {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.fmd-ask-send svg {
  width: 22px;
  height: 22px;
}

.fmd-ask-send:active {
  transform: scale(0.92);
}

.fmd-idea {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 214, 145, 0.72);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 180, 53, 0.96), rgba(255, 105, 26, 0.94));
  color: #351602;
  box-shadow: 0 0 18px rgba(255, 147, 31, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.62);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.12s ease, box-shadow 0.12s ease;
}

.fmd-idea:active { opacity: 0.82; box-shadow: 0 0 10px rgba(255, 147, 31, 0.48); }

.fmd-idea svg {
  width: 17px;
  height: 17px;
}

/* --- стеклянные уведомления сверху ---
   Стекло: размытие и насыщенность того, что под ним, блик по верхнему
   краю и тонкая светлая кромка. Преломление по краям — SVG-фильтр
   #fmd-refract в backdrop-filter; где браузер его не умеет, правило
   просто не применяется и остаётся обычное матовое стекло. Текст —
   «чернилами»: стекло всегда светлее фона, поэтому читается везде. */

.fmd-toasts {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  z-index: 60;
  width: min(100% - 20px, 540px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.fmd-toast {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 240, 0.58));
  -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.06);
  backdrop-filter: blur(18px) saturate(190%) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 -8px 18px rgba(255, 255, 255, 0.18),
    0 14px 34px rgba(110, 28, 0, 0.28);
  color: var(--ink);
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  transform: translateY(calc(-100% - 30px)) scale(0.96);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.2, 1.35, 0.4, 1), opacity 0.3s ease;
}

.fmd-toast.is-in {
  transform: none;
  opacity: 1;
}

.fmd-toast.is-out {
  transform: translateY(calc(-100% - 30px)) scale(0.96);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.5, 0, 0.8, 0.4), opacity 0.35s ease;
}

.fmd-toast.is-dragging {
  transition: none;
}

/* блик: свет падает слева сверху */
.fmd-toast::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(120% 70% at 12% -10%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.35) 100%);
  pointer-events: none;
}

/* преломление — только кольцо у края, середина остаётся чистой */
.fmd-toast-refract {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  -webkit-backdrop-filter: url(#fmd-refract) saturate(170%);
  backdrop-filter: url(#fmd-refract) saturate(170%);
  -webkit-mask: radial-gradient(130% 160% at 50% 50%, transparent 52%, #000 74%);
  mask: radial-gradient(130% 160% at 50% 50%, transparent 52%, #000 74%);
  pointer-events: none;
}

.fmd-toast .fmd-avatar {
  background: var(--orange);
}

.fmd-toast .fmd-avatar::before {
  background: #ffffff;
}

.fmd-toast-body {
  flex: 1;
  min-width: 0;
}

.fmd-toast-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.fmd-toast-title span {
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.06em;
  color: var(--orange-ink);
}

.fmd-toast-text {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fmd-toast-time {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}

.fmd-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- карточка-вопрос снизу: ФМД выглядывает из-за края --- */

.fmd-pop {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.fmd-pop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 15, 6, 0.42);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fmd-pop.is-open .fmd-pop-backdrop {
  opacity: 1;
}

.fmd-pop-card {
  position: relative;
  width: min(100% - 20px, 520px);
  margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  padding: 104px 20px 20px;
  border-radius: var(--radius-xl);
  background: #ffffff;
  color: var(--ink);
  text-align: center;
  transform: translateY(115%);
  transition: transform 0.55s cubic-bezier(0.2, 1.2, 0.35, 1);
}

.fmd-pop.is-open .fmd-pop-card {
  transform: none;
}

.fmd-pop-avatar {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 74px;
  height: 74px;
  margin-left: -37px;
  border: 5px solid #ffffff;
  background: var(--orange);
  transform: scale(0.3) translateY(30px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.18s, opacity 0.2s ease 0.18s;
}

.fmd-pop.is-open .fmd-pop-avatar {
  transform: none;
  opacity: 1;
}

.fmd-pop.is-vestnik .fmd-pop-card {
  padding-top: 28px;
  overflow: hidden;
  background: linear-gradient(165deg, #fffdf8 0%, #fff4dc 100%);
  border: 1px solid rgba(223, 145, 36, 0.34);
  box-shadow: 0 22px 60px rgba(67, 28, 3, 0.32), inset 0 1px 0 #ffffff;
}

.fmd-pop.is-vestnik .fmd-pop-avatar { display: none; }

.fmd-pop.is-vestnik .fmd-pop-kicker {
  max-width: calc(100% - 46px);
  margin: 0 auto;
  font-size: clamp(24px, 7vw, 34px);
  color: var(--orange-ink);
}

.fmd-pop.is-vestnik .fmd-pop-kicker::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 99px;
  background: var(--orange);
  box-shadow: 0 0 12px rgba(228, 81, 26, 0.4);
}

.fmd-pop.is-vestnik .fmd-pop-text {
  min-height: 0;
  margin-top: 16px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
}

.vestnik-pop-story {
  white-space: pre-wrap;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.fmd-pop-avatar::before {
  background: #ffffff;
}

.fmd-pop-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.fmd-pop-close svg {
  width: 18px;
  height: 18px;
}

.fmd-pop-kicker {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 26px;
  line-height: 1.05;
  color: var(--orange-ink);
}

.fmd-pop-text {
  min-height: 2.9em;
  margin-top: 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.42;
  color: var(--ink);
}

.fmd-pop-body:empty {
  display: none;
}

.fmd-pop-body {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fmd-pop-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--cream);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  resize: none;
}

.fmd-pop-input::placeholder {
  color: var(--ink-soft);
}

.fmd-pop-error {
  font-size: 14px;
  font-weight: 700;
  color: var(--orange-ink);
}

.fmd-pop-actions {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fmd-pop-link {
  background: none;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.fmd-pop .feedback-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.fmd-pop .feedback-star {
  width: 48px;
  height: 48px;
  padding: 6px;
  border-radius: 50%;
  background: var(--cream);
  color: rgba(42, 15, 6, 0.22);
  transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.fmd-pop .feedback-star svg {
  width: 100%;
  height: 100%;
}

.fmd-pop .feedback-star.is-filled {
  background: #fff3d6;
  color: #f0a020;
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .fmd-avatar,
.fmd-avatar::before {
    animation: none !important;
  }
}

/* --- v2: доводка по аудиту контраста --- */

/* кнопки внутри белых окон и карточек — оранжевые (белая на белом пропадала) */
.sheet-modal-panel .btn-coral-solid,
.app-dialog-panel .btn-coral-solid,
.tasks .btn-coral-solid,
.qr-card .btn-coral-solid {
  background: var(--orange);
  color: #ffffff;
}

.btn-solid:disabled {
  background: var(--cream);
  color: var(--ink-soft);
  opacity: 1;
}

/* поля на белом — с кромкой, иначе их не видно */
.sheet-modal-panel .suggest-textarea,
.fmd-pop-input {
  border: 2px solid #f6d7c5;
}

.sheet-modal-panel .suggest-textarea:focus,
.fmd-pop-input:focus {
  border-color: var(--orange-ink);
}

/* достижения: открытые — золотые марки, закрытые — тёплые, не серые */
.achievement-stamp {
  background: #fde6d8;
}

.is-unlocked .achievement-stamp {
  background: #ffe2a6;
}

.achievement-stamp::before {
  background: rgba(191, 58, 11, 0.1);
}

.achievement-badge:not(.is-unlocked) .achievement-title {
  color: #8a4127;
}

.achievement-badge:not(.is-unlocked) .achievement-icon {
  opacity: 0.85;
}

.achievement-badge.is-unlocked {
  filter: drop-shadow(0 4px 6px rgba(150, 70, 0, 0.25));
}

/* график курса юбилейных — золотом по тёмной карточке */
#bank-jubilee-card .jubilee-chart-line {
  stroke: var(--gold);
}

#bank-jubilee-card .jubilee-chart-fill {
  fill: rgba(255, 195, 115, 0.18);
}

/* стекло: сплошная подложка под градиентом (и для расчёта контраста) */
.fmd-toast {
  background-color: rgba(255, 248, 243, 0.62);
}

/* --- v2: фон под текстом может только темнеть ---
   Пиксельный замер показал: золотое свечение шапок (наследие тёмной
   темы), светлое пятно в углу и персиковый знак поднимали фон под белым
   текстом до контраста 2,2–2,9. Теперь все переходы — в глубину:
   знак форума тон-в-тон темнее холста, тени по краям, никакого «белёсого». */

.hero-brand {
  background: none;
}

.page-glow {
  background:
    radial-gradient(80% 55% at 100% 100%, rgba(170, 40, 2, 0.5) 0%, rgba(170, 40, 2, 0) 70%),
    radial-gradient(70% 45% at 0% 0%, rgba(196, 58, 10, 0.32) 0%, rgba(196, 58, 10, 0) 70%),
    var(--orange);
}

.page-identity {
  top: 30%;
  background: #b9380a;
  -webkit-mask: url('../shared/brand/swirl-blur.png') center / contain no-repeat;
  mask: url('../shared/brand/swirl-blur.png') center / contain no-repeat;
  opacity: 0.55;
}

/* --- v2: слой для чтения — на тон глубже фирменного ---
   Белый мелкий текст на фирменном #e4511a даёт контраст 3,8 (мало для
   текста мельче 18–19 px). Поэтому всё, где белым набран обычный текст,
   — лист ленты, низ чата, оранжевые кнопки — стоит на --orange-deep
   (контраст 4,9). Шапка остаётся фирменного цвета, как в квизе: там
   только крупные цифры и короткие подписи. */

:root {
  --orange-deep: #c8420f;
}

.sheet {
  background: rgba(196, 63, 13, 0.88);
}

.fmd-chat-bottom {
  background: rgba(196, 63, 13, 0.9);
}

.fmd-chat-log {
  background: linear-gradient(180deg, rgba(196, 63, 13, 0) 0, rgba(196, 63, 13, 0.92) 28px);
}

.btn-solid,
.qr-card .btn,
.app-dialog-btn-primary,
.sheet-modal-panel .btn-coral-solid,
.app-dialog-panel .btn-coral-solid,
.tasks .btn-coral-solid,
.qr-card .btn-coral-solid {
  background: var(--orange-deep);
}

/* подписи прямо на фирменном оранжевом — крупнее, жирнее и с мягкой
   тенью вниз, чтобы буквы держали край */
.hero-tagline,
.home-action-label,
.balance-unit,
.bank-progress-label,
.fmd-chat-who {
  text-shadow: 0 1px 2px rgba(110, 28, 0, 0.35);
}

.hero-tagline {
  font-size: 13px;
}

.home-action-label {
  font-size: 14px;
}

.bank-progress-label {
  font-size: 12px;
}

/* тон сверху чуть глубже — под подписями шапки (бегущая строка, кнопки
   действий) контраст белого поднимается до нормы */
.page-glow {
  background:
    linear-gradient(180deg, rgba(150, 34, 0, 0.2) 0, rgba(150, 34, 0, 0.12) 320px, rgba(150, 34, 0, 0) 460px),
    radial-gradient(80% 55% at 100% 100%, rgba(170, 40, 2, 0.5) 0%, rgba(170, 40, 2, 0) 70%),
    var(--orange);
}

/* --- v2, итог: яркость возвращаем, бледность — нет ---
   Правило: под белым текстом фон не светлее фирменного #e4511a (это
   и есть бренд, как в квизе: белый жирный на оранжевом). Всё, что
   светлее, — «бледно» и запрещено. Мелкие подписи и ссылки на холсте
   не затемняем, а переносим на белые плашки. */

.page-glow {
  background:
    radial-gradient(80% 55% at 100% 100%, rgba(176, 44, 4, 0.42) 0%, rgba(176, 44, 4, 0) 70%),
    var(--orange);
}

.page-identity {
  opacity: 0.3;
}

.sheet {
  background: rgba(228, 81, 26, 0.9);
}

.fmd-chat-bottom {
  background: rgba(228, 81, 26, 0.92);
}

.fmd-chat-log {
  background: none;
}

/* мелкие ссылки на холсте — белые плашки с оранжевым текстом */
.sheet > .link-btn,
.sheet .group > .link-btn,
.fmd-idea {
  align-self: center;
  width: auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--orange-ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

/* суммы: белые таблетки, выбранная — «чернила» */

/* подсказки на холсте — крупным жирным, как заголовок шага */
.sheet .group > .hint {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
}

/* время сообщения — внутри пузыря, а не на холсте */
.fmd-msg-meta {
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(110, 28, 0, 0.35);
}

.home-action-label {
  font-size: 14px;
  font-weight: 800;
}

/* короткие подписи на холсте — не мельче 14 px */
.hero-tagline { font-size: 14px; letter-spacing: 0.04em; }
.fmd-chat-who .fmd-status { font-size: 14px; }
.fmd-msg-meta { font-size: 13.5px; }
.bank-progress-label { font-size: 14px; }

.fmd-chat-who .fmd-status { font-weight: 800; }

/* ======================================================================
   v3 (2026-10-18): стекло, узор и цвет вместо чёрного.
   · Фон снова с узором: огромный размытый знак форума (как в квизе) и
     поверх — фирменные «вертушки» тон-в-тон. Лента — настоящее стекло:
     сквозь неё видно, как узор размывается и окрашивает плёнку.
   · Чёрный убран. Его роли разобраны по фирменным цветам:
       подтвердить / отправить (вход, отправка в чате) — бирюза;
       твои сообщения в чате — бирюза;
       «премиальное» (юбилейные) — фиолетовый с золотом;
       ошибки — белая плашка с оранжевым текстом.
   · Лента разная по частям: реплика ФМД (пузырь, а не карточка),
     «сейчас на форуме» — золото, программа — белая, уведомления —
     фиолетовые, квиз — глубокий оранжевый с узором как на экранах,
     задания — персик, трек — бирюза, колесо — белое.
   ====================================================================== */

:root {
  --teal-ink: #0d7a66;
  --violet-deep: #6a45d1;
  --orange-deep: #c8420f;
}

/* --- фон: размытый знак + «вертушки» --- */

.page-glow {
  background:
    radial-gradient(70% 60% at 88% 92%, rgba(247, 164, 103, 0.55) 0%, rgba(247, 164, 103, 0) 70%),
    radial-gradient(60% 50% at 6% 4%, rgba(239, 122, 53, 0.6) 0%, rgba(239, 122, 53, 0) 70%),
    var(--orange);
}

.page-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #ff9a62;
  -webkit-mask: url('../shared/brand/pattern.png') center top / 230px auto repeat;
  mask: url('../shared/brand/pattern.png') center top / 230px auto repeat;
  opacity: 0.22;
}

.page-identity {
  top: 58%;
  background: url('../shared/brand/swirl-blur.png') center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
  opacity: 0.55;
  transform: rotate(-18deg);
}

/* --- лента — стекло --- */

.sheet {
  --surface-2: var(--cream);
  background: rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 -10px 34px rgba(120, 30, 0, 0.18);
  gap: 18px;
}

/* --- кнопки-таблетки --- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}

.pill:active {
  transform: scale(0.96);
}

.pill-white {
  background: #ffffff;
  color: var(--orange-ink);
}

.pill-wide {
  width: 100%;
}

/* --- главная: три действия --- */

.home-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 340px;
  margin: 22px auto 0;
}

/* --- реплика ФМД: аватар и пузырь, как сообщение в чате --- */

/* --- подписи групп ленты --- */

/* --- «сейчас на форуме» — золото --- */

.now-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 20px 20px;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.now-card:active {
  transform: scale(0.98);
}

.now-card::before {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -50px;
  z-index: -1;
  width: 200px;
  height: 200px;
  background: #ffad4a;
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  transform: rotate(-14deg);
}

.now-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.now-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--orange-deep);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.now-card.is-live .now-label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  animation: fmd-dot-pulse 1.4s ease-in-out infinite;
}

.now-time {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 30px;
  line-height: 1;
  color: var(--orange-ink);
}

.now-title {
  font-size: 24px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.now-desc {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-soft);
}

.sheet-modal.is-program .sheet-modal-title,
.now-modal-time {
  font-family: 'TikTok Sans', sans-serif;
  font-weight: 900;
}

.now-modal-time {
  font-size: 26px;
  color: var(--orange-ink);
}

/* программа — белая; текущее выделено, прошедшее спокойнее (но не бледно) */
.program-item.is-now {
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 18px;
  background: #fff1e0;
}

.program-item.is-past .program-item-time {
  background: var(--cream);
}

.program-item.is-past .program-item-time-text {
  color: var(--ink-soft);
}

.program-item.is-past .program-item-title {
  color: var(--ink-soft);
}

/* --- уведомления организаторов — фиолетовые --- */

.notify-card {
  --text: #ffffff;
  background: var(--violet-deep);
  color: #ffffff;
}

.notify-card .tasks-head .activity-title {
  color: #ffffff;
}

.notify-card .tasks-head-icon {
  background: #ffffff;
  color: var(--violet-deep);
}

#notify-list .feed-item {
  background: #ffffff;
}

/* --- квиз — как обложка на экранах: глубокий оранжевый и узор справа --- */

.quiz-promo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 20px 20px;
  border-radius: var(--radius-sm);
  background: #b8370a;
  color: #ffffff;
}

.quiz-promo-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 38%;
  background: #ff9a5c;
  -webkit-mask: url('../shared/brand/pattern.png') right top / 120px auto repeat-y;
  mask: url('../shared/brand/pattern.png') right top / 120px auto repeat-y;
  animation: quiz-art-drift 40s linear infinite;
}

@keyframes quiz-art-drift {
  to { -webkit-mask-position: right 261px; mask-position: right 261px; }
}

.quiz-promo-kicker {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 22px;
  line-height: 1;
}

.quiz-promo-title {
  display: flex;
  flex-direction: column;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.quiz-promo-title span:first-child {
  font-size: 44px;
}

.quiz-promo-title span:last-child {
  font-size: 22px;
  margin-top: 4px;
}

.quiz-promo-text {
  max-width: 62%;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
}

.quiz-promo .pill {
  margin-top: 4px;
}

/* --- задания — персик, трек — бирюза --- */

#tasks-section {
  background: var(--peach);
}

#tasks-section .tasks-head-icon {
  background: var(--orange-deep);
  color: #ffffff;
}

#track-section {
  background: #8fe6d3;
}

#track-section .tasks-head-icon {
  background: var(--teal-ink);
  color: #ffffff;
}

.track-chat-btn {
  background: var(--teal-ink);
  color: #ffffff;
}

/* --- банк: тоже разные части --- */

.bank-top {
  background: #ffffff;
}

#bank-news-list,
.tasks:has(#bank-news-list) {
  background: var(--peach);
}

.tasks:has(#bank-news-list) .tasks-head-icon {
  background: var(--orange-deep);
  color: #ffffff;
}

.tasks.bank-card-teal {
  background: #8fe6d3;
}

.tasks.bank-card-teal .tasks-head-icon {
  background: var(--teal-ink);
}

#bank-jubilee-card {
  background: var(--violet-deep);
}

.jubilee-stepper-btn {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.7);
}

/* --- без чёрного --- */

.auth-btn {
  background: var(--teal-ink);
}

.auth-screen .error,
.sheet .error {
  background: #ffffff;
  color: var(--orange-ink);
}

.sheet .success {
  background: #ffffff;
  color: var(--teal-ink);
}

.app-dialog-btn-ghost {
  border-color: var(--orange-ink);
  color: var(--orange-ink);
}

.quiz-scan-frame {
  background: var(--orange-deep);
}

/* --- «Мой код» и «Сканер» --- */

#view-receive .sheet,
#view-quiz-scan .sheet {
  align-items: center;
}

#view-receive .pill-wide,
#view-quiz-scan .pill-wide {
  max-width: 380px;
}

/* ======================================================================
   Чат с ФМД
   Экран закреплён во весь видимый экран (при открытой клавиатуре — во
   всю оставшуюся область), прокручивается только лента сообщений.
   ====================================================================== */

.view-fmd {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 3;
  width: min(100%, 560px);
  max-width: none;
  height: var(--vvh, 100dvh);
  margin: 0;
  flex: none;
  transform: translateX(-50%);
}

.view-fmd:not(.hidden) {
  animation: none;
}

.fmd-chat-log {
  scroll-padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

.fmd-msg {
  max-width: 88%;
}

.fmd-msg-bot {
  max-width: 94%;
}

.fmd-msg-bot:has(+ .fmd-msg-bot) .fmd-bubble {
  border-bottom-left-radius: 22px;
}

.fmd-msg-me .fmd-bubble {
  background: var(--teal-ink);
  color: #ffffff;
}

.fmd-msg.is-pending .fmd-bubble {
  background: #fff1e7;
  color: var(--ink);
  font-style: normal;
}

.fmd-msg.is-pending .fmd-bubble-text::before {
  content: '⏳ ';
}

.fmd-chat-bottom {
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.fmd-ask-send {
  background: #ffffff;
  color: var(--orange-ink);
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.fmd-ask-send.is-ready {
  background: var(--teal-ink);
  color: #ffffff;
}

.fmd-idea {
  padding: 8px 14px;
  font-size: 13px;
}

.fmd-avatar[data-mood='still'],
.fmd-avatar[data-mood='still']::before {
  animation: none;
}

/* --- окно перевода от ФМД --- */

.tr-who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-ava {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
}

.tr-name {
  min-width: 0;
  font-size: 18px;
  font-weight: 800;
  text-align: left;
}

.tr-cur {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--cream);
}

.tr-cur-btn {
  flex: 1;
  padding: 11px 10px;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.tr-cur-btn.is-on {
  background: var(--orange-deep);
  color: #ffffff;
}

.tr-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.tr-amount-value {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 58px;
  line-height: 1;
  color: var(--orange-ink);
}

.tr-amount-unit {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.tr-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.tr-pill {
  min-width: 58px;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}

.tr-pill:active {
  transform: scale(0.94);
}

.tr-pill.is-on {
  background: var(--orange-deep);
  color: #ffffff;
}

.tr-custom {
  text-align: center;
}

.fmd-pop-link {
  color: var(--orange-ink);
}

/* --- v3: читаемость поверх узора ---
   Узор гаснет в зоне шапки (там белые цифры и подписи прямо на фоне) и
   во всю силу виден ниже — под стеклом ленты и в чате. */

.page-glow {
  background:
    radial-gradient(70% 60% at 88% 92%, rgba(247, 164, 103, 0.55) 0%, rgba(247, 164, 103, 0) 70%),
    var(--orange);
}

.page-glow::after {
  -webkit-mask:
    url('../shared/brand/pattern.png') center top / 230px auto repeat,
    linear-gradient(to bottom, transparent 0, transparent 300px, #000 470px);
  -webkit-mask-composite: source-in;
  mask:
    url('../shared/brand/pattern.png') center top / 230px auto repeat,
    linear-gradient(to bottom, transparent 0, transparent 300px, #000 470px);
  mask-composite: intersect;
}

.page-identity {
  transform: none;
  -webkit-mask: linear-gradient(to bottom, transparent 0, transparent calc(17vh + 300px), #000 calc(17vh + 480px));
  mask: linear-gradient(to bottom, transparent 0, transparent calc(17vh + 300px), #000 calc(17vh + 480px));
}

/* подписи групп — стикеры, как плашки на экранах квиза */

/* сплошная тёмно-оранжевая таблетка — второстепенная кнопка на стекле */
.pill-deep {
  background: var(--orange-deep);
  color: #ffffff;
}

/* время сообщения — внутри пузыря */
.now-time { color: #a8320a; }

.jubilee-stepper-btn {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--violet-deep);
}

/* быстрые суммы в окне перевода — в одну строку на узких телефонах */
.tr-pills { flex-wrap: nowrap; gap: 6px; }
.tr-pill { flex: 1 1 0; min-width: 0; padding: 12px 4px; }
a.pill { text-decoration: none; }

/* экраны входа: мелкие действия на узоре — сплошные таблетки */
.auth-link {
  padding: 10px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--orange-ink);
  text-decoration: none;
}

.auth-ghost {
  border: none;
  background: var(--orange-deep);
  color: #ffffff;
}

/* ======================================================================
   v4 — главная (2026-10-18)
   ====================================================================== */

/* Узор — тон-в-тон ТЕМНЕЕ фона: хорошо виден и в шапке, а белым цифрам
   и подписям только добавляет контраста. Раньше светлый узор приходилось
   прятать под шапкой, а ниже его съедало размытое стекло. */
.page-glow {
  background:
    radial-gradient(90% 55% at 100% 100%, rgba(176, 44, 4, 0.4) 0%, rgba(176, 44, 4, 0) 70%),
    var(--orange);
}

.page-glow::after {
  background: #b9390b;
  -webkit-mask: url('../shared/brand/pattern.png') center top / 250px auto repeat;
  -webkit-mask-composite: source-over;
  mask: url('../shared/brand/pattern.png') center top / 250px auto repeat;
  mask-composite: add;
  opacity: 0.42;
}

.page-identity {
  opacity: 0.38;
}

/* стекло тоньше: узор просвечивает мягко размытым, а не исчезает */
.sheet {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  gap: 14px;
}

/* --- карточка ФМД ---
   Карточка 30 px с отступом 14 px — кнопки внутри скруглены на 16 px
   (30 − 14) и стоят вплотную к нижним углам: дуги концентричны. */
.fmd-card {
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-sm);
}

.fmd-card-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.fmd-card .fmd-avatar {
  width: 48px;
  height: 48px;
  background: var(--orange);
  transition: box-shadow 0.3s ease;
}

.fmd-card .fmd-avatar::before {
  background: #ffffff;
}

.fmd-card.has-news .fmd-avatar {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px var(--teal);
}

.fmd-card .fmd-who {
  flex: 1;
  min-width: 0;
}

.fmd-card .fmd-name {
  font-size: 15px;
  color: var(--ink);
}

.fmd-card .fmd-status {
  font-size: 12.5px;
  color: var(--teal-ink);
}

.fmd-card-go {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--orange-ink);
  transition: transform 0.2s ease;
}

.fmd-card-head:active .fmd-card-go {
  transform: translateX(3px);
}

.fmd-card .fmd-card-text {
  min-height: 2.84em;
  padding: 2px 6px 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.42;
  color: var(--ink);
}

.fmd-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fmd-btn {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}

.fmd-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.fmd-btn:active {
  transform: scale(0.98);
}

.fmd-btn-main {
  background: var(--orange-deep);
  color: #ffffff;
}

.fmd-btn-soft {
  background: var(--cream);
  color: var(--orange-ink);
}

/* стекло ленты: плотнее размытие — закреплённая шапка просвечивает
   мягкими пятнами, а не читаемыми цифрами */
.sheet {
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  gap: 12px;
}

/* колесо: кнопка как остальные главные в карточках; недоступная — не
   бледная, а спокойная кремовая с понятной надписью */
.fortune-spin-btn {
  height: 54px;
  padding: 0 18px;
  border-radius: 16px;
  background: var(--orange-deep);
  color: #ffffff;
  font-weight: 800;
}

.fortune-spin-btn:disabled {
  opacity: 1;
  background: var(--cream);
  color: var(--orange-ink);
}

/* элементы у краёв карточки (30 px, отступ 14 px) — 16 px */
#notify-list .feed-item {
  border-radius: 16px;
}

#view-home .hero {
  transform-origin: 50% 0;
  will-change: opacity, transform;
}

/* фраза в шапке главной — помещается целиком и на узком телефоне */
#view-home .hero-tagline {
  font-size: clamp(12.5px, 3.55vw, 14px);
  letter-spacing: 0.025em;
}

/* на узких телефонах длинная фраза переносится на вторую строку, а не
   обрезается; место под две строки отведено заранее — шапка не прыгает,
   пока фраза печатается и стирается */
@media (max-width: 370px) {
  #view-home .hero-tagline {
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    line-height: 1.15;
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }
}

/* ======================================================================
   v5 — главная (2026-10-18)
   ====================================================================== */

/* 1. Узор: крупный, светлый и почти невидимый — фактура, а не рисунок.
   Верх фона на тон глубже: светлый узор под белыми подписями шапки не
   опускает контраст ниже фирменного (белый на #e4511a). */
.page-glow {
  background:
    linear-gradient(180deg, rgba(150, 34, 0, 0.1) 0, rgba(150, 34, 0, 0.1) 320px, rgba(150, 34, 0, 0) 500px),
    radial-gradient(90% 55% at 100% 100%, rgba(176, 44, 4, 0.4) 0%, rgba(176, 44, 4, 0) 70%),
    var(--orange);
}

.page-glow::after {
  background: #ffd9c2;
  -webkit-mask: url('../shared/brand/pattern.png') center top / 640px auto repeat;
  mask: url('../shared/brand/pattern.png') center top / 640px auto repeat;
  opacity: 0.07;
}

.page-identity {
  opacity: 0.3;
}

/* 2. Карточка ФМД: кнопки — капсулы, концентричные углам карточки.
   Карточка 30 px, кнопки отстоят от краёв на 6 px → радиус 24 px,
   высота 48 px (ровно две дуги), и нижние углы кнопки повторяют угол
   карточки. */
.fmd-card {
  gap: 4px;
  padding: 6px;
}

.fmd-card-head {
  padding: 10px 10px 2px;
}

.fmd-card .fmd-card-text {
  padding: 4px 12px 10px;
}

.fmd-card-actions {
  gap: 6px;
}

.fmd-btn {
  height: 48px;
  border-radius: 24px;
}

/* 3. Без точек-маркеров */
.fmd-online,
.now-card.is-live .now-label::before {
  display: none !important;
}

.now-label {
  gap: 0;
}

/* непрочитанный ответ — бирюзовое кольцо вокруг кружка ФМД */
.fmd-top-btn.has-news {
  box-shadow: 0 0 0 3px var(--teal);
}

/* 4. Программа: прошедшее свёрнуто, текущее — под стеклянным «ползунком» */
.program-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.program-collapse.is-collapsed .program-inner {
  opacity: 0;
}

.program-past-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 16px;
  background: var(--cream);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.program-past-toggle svg {
  flex: none;
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.program-past.is-open .program-past-toggle svg {
  transform: rotate(180deg);
}

.program-past-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.program-past.is-open .program-past-fold {
  grid-template-rows: 1fr;
}

.program-past-list {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.4s;
}

.program-past.is-open .program-past-list {
  visibility: visible;
  transition-delay: 0s;
}

.program-rail {
  position: relative;
  overflow: hidden;
}

.program-list {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.program-list.is-rising {
  transition: transform 0.7s cubic-bezier(0.3, 0.8, 0.3, 1);
}

.program-rail.is-rising {
  transition: height 0.7s cubic-bezier(0.3, 0.8, 0.3, 1);
}

.program-item,
.program-item:first-child,
.program-item:last-child {
  padding: 10px 10px;
  border-top: 1px solid var(--line);
}

.program-item:first-child {
  border-top: none;
}

.program-item.is-current + .program-item {
  border-top: none;
}

.program-item.is-leaving {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.program-list.is-rising .program-item-title,
.program-list.is-rising .program-item-desc,
.program-list.is-rising .program-item-time {
  transition: color 0.5s ease, background-color 0.5s ease;
}

.program-item-time {
  background: var(--cream);
}

.program-item-time-text {
  color: var(--orange-ink);
}

.program-item.is-current .program-item-time {
  background: #ffffff;
}

.program-item.is-current .program-item-title,
.program-item.is-current .program-item-desc {
  color: #ffffff;
}

.program-item.is-current .program-item-title {
  font-weight: 800;
}

.program-item.is-current .program-item-desc {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.program-item.is-past .program-item-time-text,
.program-item.is-past .program-item-title,
.program-item.is-past .program-item-desc {
  color: var(--ink-soft);
}

/* «ползунок»: стоит на месте, пункты поднимаются под него.
   Стекло — объём сверху светлее, по краю тонкая линза-кромка,
   блик-полоса; радиус 16 = 30 (карточка) − 14 (отступ). */
.program-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #d84812 0%, #c03a0a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 -6px 12px rgba(130, 28, 0, 0.3),
    0 3px 8px rgba(120, 30, 0, 0.16);
  transition: height 0.3s ease;
}

.program-thumb::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 13px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  -webkit-mask: linear-gradient(135deg, #000 0%, transparent 40%, transparent 62%, #000 100%);
  mask: linear-gradient(135deg, #000 0%, transparent 40%, transparent 62%, #000 100%);
}

.program-thumb::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 42%;
  top: 4px;
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
}

.program-over {
  padding: 8px 10px 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* 5. Задания — карусель карточек-квестов */
#tasks-section.quests {
  width: calc(100% + var(--sheet-inset) * 2);
  margin: 0 calc(var(--sheet-inset) * -1);
  padding: 0;
  border-radius: 0;
  background: none;
}

.quests-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px var(--sheet-inset) 4px;
  scroll-padding: 0 var(--sheet-inset);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.quests-track::-webkit-scrollbar {
  display: none;
}

.quest {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  flex: 0 0 76%;
  max-width: 300px;
  min-height: 236px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.quest:active {
  transform: scale(0.98);
}

.quest-gold { --quest-tint: #ffe4bf; background: var(--gold); }
.quest-mint { --quest-tint: #ccf5ec; background: #8fe6d3; }
.quest-peach { --quest-tint: #ffdcc4; background: var(--peach); }
.quest-lilac { --quest-tint: #e8e1ff; background: #cbbcff; }

.quest-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quest-reward {
  display: inline-flex;
  padding: 7px 13px 5px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--orange-ink);
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 22px;
  line-height: 1;
}

.quest-when {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--quest-tint, #ffffff);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.quest-title {
  font-size: 19px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.quest-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--ink-soft);
}

.quest-go {
  margin-top: auto;
  align-self: flex-end;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--orange-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quest-go svg {
  width: 20px;
  height: 20px;
}

/* вводная карточка — белая, спокойная: общая награда крупно */
.quest-intro {
  background: #ffffff;
  cursor: default;
}

.quest-intro-art {
  position: absolute;
  right: -46px;
  bottom: -54px;
  z-index: -1;
  width: 190px;
  height: 190px;
  background: #ffe2cf;
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  transform: rotate(-14deg);
}

.quest-intro-kicker {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 22px;
  line-height: 1;
  color: var(--orange-ink);
}

.quest-intro-total {
  display: flex;
  flex-direction: column;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.quest-intro-total span:first-child {
  font-size: 40px;
  color: var(--orange-ink);
}

.quest-intro-total span:last-child {
  margin-top: 4px;
  font-size: 18px;
}

.quest-intro-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--ink-soft);
}

.quest-intro-hint {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--orange-ink);
}

.quest-intro-hint svg {
  width: 18px;
  height: 18px;
}

.quest-sheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.quest-sheet-meta .quest-reward {
  background: var(--orange-deep);
  color: #ffffff;
  font-size: 18px;
}

.quest-sheet-meta .quest-when {
  background: var(--cream);
}

.quest-sheet-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--cream);
  font-weight: 700;
}

/* 6. Трек — карточка-пропуск: глубокая бирюза, название крупно */
#track-section.track-card {
  --text: #ffffff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 20px 6px;
  border-radius: var(--radius-sm);
  background: var(--teal-ink);
  color: #ffffff;
}

#track-section.track-card:not(:has(.track-chat:not(.hidden))) {
  padding-bottom: 20px;
}

.track-mark {
  position: absolute;
  right: -56px;
  top: -46px;
  z-index: -1;
  width: 210px;
  height: 210px;
  background: #13917b;
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  transform: rotate(12deg);
}

.track-kicker {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 22px;
  line-height: 1;
}

.track-title {
  max-width: 88%;
  font-size: 28px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.track-desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #e6faf5;
}

.track-more {
  padding: 9px 15px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--teal-ink);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.track-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.track-steps:empty {
  display: none;
}

.track-step {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.track-step-n {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal-ink);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
}

.track-step-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
}

.track-step-reward {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 18px;
  color: var(--orange-ink);
}

/* чат трека — капсула у нижних углов: отступ 6 → радиус 24, высота 48 */
.track-chat {
  align-self: stretch;
  height: 48px;
  margin: 4px -14px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 24px;
  background: #ffffff;
  color: var(--teal-ink);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}

.track-chat svg {
  width: 20px;
  height: 20px;
}

/* 7. Колесо фортуны: на главной — тизер, само колесо — отдельный экран */
.fortune-teaser {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  min-height: 152px;
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.fortune-teaser:active {
  transform: scale(0.98);
}

.fortune-teaser-text {
  position: relative;
  z-index: 1;
  max-width: 58%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fortune-teaser-kicker {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 20px;
  line-height: 1;
  color: var(--orange-ink);
}

.fortune-teaser-title {
  font-size: 22px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.fortune-teaser-sub {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-soft);
}

.fortune-teaser-wheel {
  position: absolute;
  top: 50%;
  right: -72px;
  width: 214px;
  height: 214px;
  margin-top: -107px;
}

.fortune-teaser-wheel svg {
  width: 100%;
  height: 100%;
  animation: teaser-spin 48s linear infinite;
}

@keyframes teaser-spin {
  to { transform: rotate(360deg); }
}

/* экран колеса */
.fortune-hero {
  padding-bottom: 46px;
}

.fortune-hero .fortune-play {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
}

.fortune-hero .fortune-stage {
  width: min(84vw, 340px);
  max-width: none;
  margin-top: 10px;
}

.fortune-hero .fortune-wheel {
  filter: drop-shadow(0 14px 26px rgba(110, 28, 0, 0.3));
}

.fortune-hero .fortune-pointer {
  top: -12px;
  border-left-width: 14px;
  border-right-width: 14px;
  border-top: 28px solid #ffffff;
}

.fortune-hero .fortune-hub {
  width: 19%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(110, 28, 0, 0.25);
}

.fortune-hero .fortune-hub::before {
  background: var(--orange);
}

.fortune-hero .fortune-spin-btn {
  width: min(100%, 340px);
  height: 56px;
  padding: 0 22px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--orange-ink);
  font-size: 17px;
  font-weight: 800;
}

.fortune-hero .fortune-spin-btn:disabled {
  background: var(--cream);
  color: var(--orange-ink);
}

/* «всё собрано» — белая плашка: белый текст на светлых пятнах фона
   середины экрана был бы бледным */
.fortune-hero #fortune-done {
  width: 100%;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.fortune-how,
#view-fortune .fortune-tickets {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
}

.fortune-how-title,
#view-fortune .fortune-tickets-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}

.fortune-how-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fortune-how-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.fortune-how-list span {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--orange-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
}

#view-fortune .fortune-ticket-row {
  background: var(--cream);
  color: var(--ink);
}

#view-fortune .fortune-sub,
#view-fortune .fortune-tickets-title,
#view-fortune .fortune-ticket-row-title,
#view-fortune .fortune-ticket-row-meta {
  text-shadow: none;
}

#view-fortune .fortune-tickets-title {
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
}

#view-fortune .fortune-tickets {
  margin-top: 0;
}

#view-fortune .fortune-tickets-list {
  gap: 6px;
}

/* строки билетиков — у краёв карточки 30 px с отступом 18 → 12 px */
#view-fortune .fortune-ticket-row {
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
}

#view-fortune .fortune-ticket-row.is-used {
  opacity: 1;
}

#view-fortune .fortune-ticket-row-emoji {
  background: #ffffff;
}

#view-fortune .fortune-ticket-row-meta {
  color: var(--ink-soft);
}

#view-fortune .fortune-ticket-row-arrow {
  color: var(--orange-ink);
}

#view-fortune .fortune-tickets-more {
  background: var(--cream);
  color: var(--orange-ink);
}

.fmd-toast-title span {
  margin-right: 3px;
}

/* ======================================================================
   задания с проверкой: способ сдачи, «засчитано», кодовое слово
   ====================================================================== */

.quest-foot {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quest-foot .quest-go {
  margin-top: 0;
  align-self: auto;
  flex: none;
}

.quest-how {
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink-soft);
}

.quest.is-done .quest-go {
  background: var(--teal-ink);
  color: #ffffff;
}

.quest-done-chip {
  align-items: center;
  gap: 5px;
  color: var(--teal-ink);
}

.quest-done-chip svg {
  width: 15px;
  height: 15px;
}

.task-action {
  margin-top: 16px;
  padding: 16px;
  border-radius: 20px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-action-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

.task-staff-qr-wrap {
  position: relative;
  width: min(72vw, 260px);
  aspect-ratio: 1;
  margin: 16px auto 10px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
}

.task-staff-qr {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.task-staff-qr-corners {
  position: absolute;
  inset: 5px;
  border: 2px solid var(--orange-deep);
  border-radius: 20px;
  pointer-events: none;
}

.task-staff-qr-name {
  margin: 0 auto;
  max-width: 30ch;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  text-align: center;
}

.task-action-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-soft);
}

.task-code-row {
  display: flex;
  gap: 8px;
}

.task-code-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border-radius: 24px;
  border: 2px solid transparent;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  outline: none;
}

.task-code-input:focus {
  border-color: var(--teal-ink);
}

.task-code-input::placeholder {
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.task-code-send,
.task-check-btn,
.task-mycode-btn {
  flex: none;
  height: 48px;
  padding: 0 20px;
  border-radius: 24px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.task-code-send,
.task-check-btn {
  background: var(--teal-ink);
  color: #ffffff;
}

.task-mycode-btn {
  background: #ffffff;
  color: var(--orange-ink);
}

.task-check-btn,
.task-mycode-btn {
  width: 100%;
}

.task-code-send:active,
.task-check-btn:active,
.task-mycode-btn:active {
  transform: scale(0.97);
}

.task-code-send:disabled,
.task-check-btn:disabled {
  background: var(--ink-soft);
}

.task-error {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #b42318;
}

.task-action-done {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.task-action-done p {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.task-done-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--teal-ink);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-done-icon svg {
  width: 20px;
  height: 20px;
}

.track-step.is-done .track-step-n svg {
  width: 16px;
  height: 16px;
}

.track-step.is-done .track-step-reward {
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--teal-ink);
}

/* пункт программы открывает подробности: время, место, спикеры */
.program-item {
  cursor: pointer;
}

/* --- отметка в зале: правила, статус, предупреждение на карточке --- */

.quest-how.is-warn {
  color: #b42318;
}

.task-attend-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.task-attend-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.task-attend-steps span {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--orange-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
}

.task-attend-status {
  padding: 12px 14px;
  border-radius: 14px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.task-attend-status.is-in {
  color: var(--teal-ink);
}

.task-attend-status.is-warn {
  color: #b42318;
}

/* ======================================================================
   профиль — цифровой бейдж участника на ленте
   ====================================================================== */

.profile-hero-v2 {
  padding-bottom: 56px;
}

.pbadge-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}

.pbadge {
  position: relative;
  z-index: 1;
  width: min(78vw, 300px);
  perspective: 1400px;
  /* качается вокруг точки, где сходятся нити */
  transform-origin: 50% -254px;
}

.pbadge.is-swinging {
  animation: pbadge-swing 1.9s cubic-bezier(0.3, 0.6, 0.4, 1) 1;
}

@keyframes pbadge-swing {
  0% { transform: rotate(4deg); }
  24% { transform: rotate(-3deg); }
  48% { transform: rotate(1.6deg); }
  70% { transform: rotate(-0.7deg); }
  100% { transform: rotate(0deg); }
}

/* две нити уходят за верхний край экрана и продеты в дырочки в верхних
   углах; координаты дырочек в процентах ширины — нити попадают в них при
   любой ширине бейджа */
.pbadge-cord {
  position: absolute;
  left: 0;
  top: -254px;
  z-index: 3;
  width: 100%;
  height: 276px;
  overflow: visible;
  pointer-events: none;
}

.pbadge-cord path {
  fill: none;
  stroke: #a8330a;
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.pbadge-hole {
  position: absolute;
  top: 14px;
  width: 17px;
  height: 17px;
  border: 3px solid var(--cream);
  border-radius: 50%;
  background: #8f2b07;
  transform: translateX(-50%);
}

.pbadge-hole-l {
  left: 7.33%;
}

.pbadge-hole-r {
  left: 92.67%;
}

.pbadge-inner {
  position: relative;
}

.pbadge-face {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 22px 44px rgba(110, 28, 0, 0.3);
}

.pbadge-front {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 24px;
}

.pbadge-band {
  position: relative;
  width: 100%;
  height: 104px;
  flex: none;
  background: var(--orange);
}

.pbadge-brand {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
}

.pbadge-mark {
  width: 24px;
  height: 21px;
  background: #ffffff;
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
}

.pbadge-photo-wrap {
  position: relative;
  margin-top: -44px;
}

.pbadge-photo {
  position: relative;
  width: 132px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 5px solid #ffffff;
  border-radius: 36px;
  background: var(--cream);
}

.pbadge-photo .profile-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.pbadge-letter {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 66px;
  line-height: 1;
  color: var(--orange-ink);
}

.pbadge-camera {
  position: absolute;
  right: -12px;
  bottom: -6px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: var(--orange-deep);
  color: #ffffff;
  cursor: pointer;
}

.pbadge-camera svg {
  width: 20px;
  height: 20px;
}

/* фамилия — всегда одной строкой: длинную приложение уменьшает до ширины
   бейджа (fitBadgeSurname), а не рвёт посреди слова */
.pbadge-surname {
  width: 88%;
  margin-top: 16px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 25px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
}

.pbadge-given {
  max-width: 88%;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-soft);
}

.pbadge-chips {
  margin-top: 14px;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.pbadge-chip {
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
}

.pbadge-chip-role {
  background: var(--orange-deep);
}

.pbadge-chip-track {
  background: var(--teal-ink);
}

.pbadge-shift {
  margin-top: 10px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--ink-soft);
}

.pbadge-slogan {
  margin-top: 14px;
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 21px;
  line-height: 1;
  color: var(--orange-ink);
}

@media (prefers-reduced-motion: reduce) {
  .pbadge.is-swinging {
    animation: none;
  }

}

/* --- под бейджем: мой форум в цифрах, имя, встречающий экран --- */

.profile-sheet {
  gap: 12px;
}

.pstats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pstat {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 18px 18px;
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.pstat b {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.pstat span {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink-soft);
}

.pstat-gold { background: var(--gold); }
.pstat-mint { background: #8fe6d3; }
.pstat-peach { background: var(--peach); }
.pstat-lilac { background: #cbbcff; }

.pcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 6px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
}

.pcard-title {
  font-size: 18px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.pcard-text {
  margin-top: -4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-soft);
}

.pcard-input {
  height: 52px;
  padding: 0 20px;
  border: 2px solid transparent;
  border-radius: 26px;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  outline: none;
}

.pcard-input:focus {
  border-color: var(--teal-ink);
}

.pcard-input::placeholder {
  color: var(--ink-soft);
  font-weight: 700;
}

.pcard-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 20px 12px;
  border-radius: 24px;
  background: var(--cream);
}

.pcard-row-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

.pcard-row-value {
  font-size: 15px;
  font-weight: 800;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.pcard-link {
  align-self: flex-start;
  padding: 2px 4px;
  background: none;
  color: var(--orange-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.pcard-status {
  padding: 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--teal-ink);
}

.pcard-note {
  padding: 0 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* капсула у нижних углов карточки: отступ 6 → радиус 24, высота 48 */
.pcard-save {
  height: 48px;
  margin: 2px -12px 0;
  border-radius: 24px;
  background: var(--orange-deep);
  color: #ffffff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.pcard-save:active {
  transform: scale(0.98);
}

.prow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 14px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.prow-icon {
  flex: none;
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--orange);
}

.prow-icon::before {
  content: '';
  position: absolute;
  inset: 12px 11px;
  background: #ffffff;
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
}

.prow-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prow-title {
  font-size: 16px;
  font-weight: 800;
}

.prow-sub {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-soft);
}

.prow-chevron {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--orange-ink);
}

/* =====================================================================
   Банк форума и монетный двор (v6, общие части; v7 ниже).
   Шапка — кошелёк из двух валют: форумные (деньги для обмена) и
   юбилейные (монеты для аукциона). Лист: монетный двор, детали,
   сделки, новости, монета у банка, летопись, хранители монет.
   Радиусы: лист 44 → карточка 30 (отступ 14) → плитка 16; кнопка-капсула
   у нижнего края карточки — 48/24 с зазором 6 (30 − 6 = 24).
   ===================================================================== */

.tone-brick { --tone: #ffb684; }
.tone-zachet { --tone: #ffc373; }
.tone-key { --tone: #8fe6d3; }
.tone-lamp { --tone: #ffc373; }
.tone-film { --tone: #cbbcff; }
.tone-rose { --tone: #ffb3c4; }
.tone-seal { --tone: #6a45d1; }

/* --- шапка: кошелёк --- */

#view-bank .bank-hero-v2 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.bank-wallet {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 6px;
}

.bank-wallet-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bank-wallet-num {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 64px;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.bank-wallet-unit {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(110, 28, 0, 0.35);
}

.bank-wallet-sep {
  width: 2px;
  height: 70px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.6);
}

/* монета: плоский золотой диск с ободком и знаком форума */
.coin-mini {
  position: relative;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 5px #b8761f;
}

.coin-mini {
  width: 40px;
  height: 40px;
}

.coin-mini::before {
  content: '';
  position: absolute;
  inset: 22%;
  background: #8a5414;
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
}

/* --- общие карточки листа --- */

.deals-incoming,
.lore-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--sheet-inset);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
}

.bank-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 0;
}

.bank-card-title {
  font-size: 16px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.deals-incoming > .bank-card-title {
  padding: 4px 4px 0;
}

/* иконка детали — белый круг, рисунок цвета чернил */
.part-ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.part-ico svg {
  width: 22px;
  height: 22px;
}

.part-ico-seal {
  color: #6a45d1;
}

/* --- монетный двор: три детали дают одну монету --- */

/* итог рецепта — монета и подсказка, что ещё нужно */

.lore-more {
  width: calc(100% + 16px);
  height: 48px;
  margin: 0 -8px -8px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.lore-more:active {
  transform: scale(0.97);
}

/* --- входящие сделки --- */

.deals-incoming-list {
  display: flex;
  flex-direction: column;
}

.deal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-top: 1px solid var(--line);
}

.deal-row:first-child {
  border-top: none;
  padding-top: 2px;
}

.deal-row .part-ico {
  background: var(--cream);
}

.deal-row-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.deal-row-open {
  flex: none;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--teal-ink);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

/* --- мои детали --- */

/* --- новости банка --- */

/* --- монета у банка: фиолетовая «премиальная» карточка --- */

#bank-jubilee-card.coin-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--sheet-inset);
  border-radius: var(--radius-sm);
  background: #6a45d1;
  color: #ffffff;
}

.coin-card .bank-card-title {
  color: #ffffff;
}

.coin-card-have {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

.coin-card-have b,
#bank-jubilee-card .jubilee-balance {
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
}

#bank-jubilee-card .coin-rate {
  padding: 2px 4px 0;
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 40px;
  line-height: 1;
  color: #ffffff;
}

.coin-rate-note {
  padding: 0 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
}

#bank-jubilee-card .jubilee-chart {
  width: 100%;
  height: 72px;
}

#bank-jubilee-card .jubilee-chart-line {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#bank-jubilee-card .jubilee-chart-fill {
  fill: rgba(255, 255, 255, 0.16);
  stroke: none;
}

#bank-jubilee-card .jubilee-buy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

#bank-jubilee-card .jubilee-stepper-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: #6a45d1;
  font-size: 24px;
  font-weight: 800;
}

#bank-jubilee-card .jubilee-buy-count {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 40px;
  line-height: 1;
  color: #ffffff;
}

#bank-jubilee-card .jubilee-buy-cost {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

.coin-error {
  padding: 10px 14px;
  border-radius: 16px;
  background: #ffffff;
  color: var(--orange-ink);
  font-size: 14px;
  font-weight: 800;
}

#bank-jubilee-card .coin-buy-btn {
  width: calc(100% + 16px);
  height: 48px;
  margin: 2px -8px -8px;
  border-radius: 24px;
  background: #ffffff;
  color: #4f2eb0;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

#bank-jubilee-card .coin-buy-btn:disabled {
  opacity: 1;
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

/* --- летопись двора --- */

.lore-card {
  overflow: hidden;
  isolation: isolate;
  gap: 10px;
}

.lore-card::after {
  content: '';
  position: absolute;
  right: -52px;
  bottom: -40px;
  z-index: -1;
  width: 200px;
  height: 200px;
  background: #ffe2cf;
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  transform: rotate(-14deg);
}

.lore-mark {
  position: absolute;
  top: calc(var(--sheet-inset) + 2px);
  left: calc(var(--sheet-inset) + 4px);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--orange);
}

.lore-mark::before {
  content: '';
  position: absolute;
  inset: 6px;
  background: #ffffff;
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
}

.lore-kicker {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 4px 4px 0 44px;
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 22px;
  line-height: 1;
  color: var(--orange-ink);
}

.lore-title {
  padding: 0 4px;
  font-size: 22px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.lore-text {
  padding: 0 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-soft);
}

.lore-more {
  margin-top: 4px;
  border: 2px solid var(--orange-ink);
  background: #ffffff;
  color: var(--orange-ink);
}

.bank-top-title {
  padding: 4px 4px 2px;
}

/* --- окна: летопись и деталь --- */

/* Только содержимое окна летописи монетного двора. */
.mint-story {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 2px 8px;
  color: var(--ink);
}

.mint-story-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 22px 16px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 28px;
  background: #fff1d9;
}

.mint-story-coin {
  position: relative;
  flex: none;
  width: 116px;
  height: 116px;
}

.mint-story-coin > svg { display: block; }
.mint-story-coin .forge-mark { width: 22px; height: 22px; }

.mint-story-lead { min-width: 0; }

.mint-story-kicker {
  display: block;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mint-story-lead > p {
  margin-top: 8px;
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 25px;
  line-height: 1.16;
}

.mint-story-opening {
  padding: 0 4px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  text-wrap: pretty;
}

.mint-story-section > h3,
.mint-story-bank > h3 {
  margin: 0 4px 12px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.mint-story-parts,
.mint-story-specials {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mint-story-part {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  background: color-mix(in srgb, var(--tone) 24%, #fffaf6);
}

.mint-story-part-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mint-story-part-head .part-ico {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--tone);
}

.mint-story-part-head .part-ico svg { width: 26px; height: 26px; }

.mint-story-part-head > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mint-story-part-head small {
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink-soft);
}

.mint-story-part-head b {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.mint-story-part > p,
.mint-story-steps p,
.mint-story-bank > p,
.mint-story-special p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.mint-story-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 18px 16px;
  border: 1px solid rgba(107, 58, 40, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  list-style: none;
}

.mint-story-steps > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mint-story-step-number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--orange-ink);
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 18px;
  line-height: 1;
}

.mint-story-steps h4,
.mint-story-special h4 {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.mint-story-bank {
  padding: 20px;
  border: 1px solid rgba(191, 58, 11, 0.12);
  border-radius: 26px;
  background: var(--cream);
}

.mint-story-bank > h3 {
  margin: 7px 0 10px;
  color: var(--orange-ink);
}

.mint-story-bank > p + p { margin-top: 10px; }

.mint-story-special {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(107, 58, 40, 0.08);
  border-radius: 24px;
}

.mint-story-seal { background: #f2ecff; }
.mint-story-series { background: #fff3db; }
.mint-story-special .part-ico { background: #ffffff; }
.mint-story-special > div { min-width: 0; }

.mint-story-ending {
  padding: 8px 4px 0;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.5;
  text-align: center;
  color: var(--orange-ink);
}

@media (max-width: 360px) {
  .mint-story-intro { gap: 12px; padding: 18px 12px; }
  .mint-story-lead > p { font-size: 21px; }
  .mint-story-kicker { font-size: 9px; letter-spacing: 0.04em; }
  .mint-story-part,
  .mint-story-steps,
  .mint-story-special { padding: 14px; }
}

/* Только окно детали монеты: другие шторки используют свои стили. */
.part-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--ink);
}

.part-detail-overview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 28px;
  background: color-mix(in srgb, var(--tone) 32%, #fffaf6);
}

.part-detail-overview .part-ico {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  background: var(--tone);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.part-detail-overview .part-ico svg {
  width: 36px;
  height: 36px;
}

.part-detail-stock {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.part-detail-label,
.part-detail-prices > div > span {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink-soft);
}

.part-detail-stock > b {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.part-detail-stock small {
  font-family: 'TikTok Sans', sans-serif;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-soft);
}

.part-detail-tag {
  max-width: 96px;
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
}

.part-detail-description {
  padding: 0 4px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}

.part-detail-market {
  overflow: hidden;
  border: 1px solid rgba(107, 58, 40, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
}

.part-detail-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.part-detail-prices > div {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: 16px;
}

.part-detail-prices > div + div {
  border-left: 1px solid rgba(107, 58, 40, 0.1);
}

.part-detail-prices b {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 6px;
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.part-detail-prices b small {
  font-family: 'TikTok Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}

.part-detail-prices b.part-detail-no-price {
  font-family: 'TikTok Sans', sans-serif;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}

.part-detail-history {
  padding: 0 16px 14px;
  border-top: 1px solid rgba(107, 58, 40, 0.08);
}

.part-detail-history .part-chart {
  display: block;
  width: 100%;
  height: 54px;
  margin-top: 14px;
}

.part-detail-history .part-chart polyline {
  fill: none;
  stroke: var(--orange-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.part-detail-history .part-chart-note {
  margin-top: 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-soft);
}

.part-detail-tip {
  padding: 2px 4px 2px 14px;
  border-left: 3px solid var(--tone);
}

.part-detail-tip-title {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 750;
}

.part-detail-tip p {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
}

.part-detail-sell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  width: 100%;
  min-height: 56px;
  padding: 15px 20px;
  border-radius: 28px;
  background: var(--orange-ink);
  color: #ffffff;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.part-detail-sell b {
  font-size: 14px;
  font-weight: 750;
}

.part-detail-sell:active:not(:disabled) {
  transform: scale(0.98);
}

.part-detail-sell:focus-visible {
  outline: 3px solid var(--orange-ink);
  outline-offset: 3px;
}

.part-detail-sell:disabled {
  background: rgba(107, 58, 40, 0.1);
  color: var(--ink-soft);
  cursor: default;
}

.part-detail-unavailable {
  margin-top: -8px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-soft);
}

.seal-choice { display: grid; gap: 10px; margin-top: 14px; }
.seal-choice-mint,
.seal-choice-exchange {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 64px;
  padding: 13px 17px;
  border: 0;
  border-radius: 20px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.seal-choice-mint { background: linear-gradient(135deg, #ffbd36, #e34a13); color: #351005; box-shadow: 0 12px 24px rgba(58, 28, 15, .18); }
.seal-choice-mint span,
.seal-choice-exchange span { font-size: 15px; font-weight: 900; }
.seal-choice-mint b,
.seal-choice-exchange b { font-size: 12px; font-weight: 750; opacity: .9; }
.seal-choice-mint:disabled,
.seal-choice-exchange:disabled { opacity: .52; cursor: default; box-shadow: none; }

.seal-help-sheet { color: var(--ink); text-align: left; }
.seal-help-emblem {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 2px auto 14px;
  padding: 13px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #ffd35a;
  color: #6f260d;
  transform: rotate(-7deg);
}
.seal-help-emblem svg { display: block; width: 100%; height: 100%; }
.seal-help-lead { max-width: 310px; margin: 0 auto 16px; color: var(--ink-soft); font-size: 14px; font-weight: 700; line-height: 1.45; text-align: center; }
.seal-help-options { display: grid; gap: 10px; }
.seal-help-option {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(107, 58, 40, .14);
  border-radius: 22px;
  background: #fffaf4;
}
.seal-help-number { color: var(--orange-ink); font-size: 26px; font-weight: 950; line-height: 1; text-align: center; }
.seal-help-option h3 { margin: 0 0 4px; font-size: 15px; font-weight: 950; }
.seal-help-option p { margin: 0; color: var(--ink-soft); font-size: 13px; font-weight: 650; line-height: 1.4; }
.seal-help-note { margin: 13px 4px 0; color: var(--ink-soft); font-size: 12px; font-weight: 700; line-height: 1.45; text-align: center; }
.seal-help-done {
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  border: 0;
  border-radius: 26px;
  background: var(--orange-deep);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}
.seal-help-done:active { transform: scale(.98); }
.seal-help-done:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

@media (max-width: 360px) {
  .seal-help-option { grid-template-columns: 72px minmax(0, 1fr); padding: 13px; }
  .seal-help-number { font-size: 23px; }
}

@media (max-width: 360px) {
  .part-detail-overview { gap: 12px; padding: 12px; }
  .part-detail-overview .part-ico { width: 56px; height: 56px; border-radius: 18px; }
  .part-detail-stock > b { font-size: 38px; }
  .part-detail-tag { max-width: 80px; font-size: 10px; }
  .part-detail-prices > div { padding: 14px 12px; }
}

/* --- окно сделки (fmdPop) --- */

.deal-offer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 24px;
  background: var(--cream);
  text-align: left;
}

.deal-offer-ico {
  width: 52px;
  height: 52px;
  background: var(--tone, #ffffff);
}

.deal-offer-ico svg {
  width: 26px;
  height: 26px;
}

.deal-offer-ico.part-ico-seal {
  color: #ffffff;
}

.deal-offer-main {
  min-width: 0;
}

.deal-offer-part {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
}

.deal-offer-meta {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--ink-soft);
}

/* --- карточка по бейджу: перевод или сделка --- */

.tr-mode,
.tr-side {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--cream);
}

.tr-mode-btn,
.tr-side-btn {
  flex: 1;
  min-width: 0;
  padding: 11px 8px;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.tr-mode-btn.is-on {
  background: var(--orange-deep);
  color: #ffffff;
}

.tr-side-btn.is-on {
  background: #ffffff;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--orange-deep);
}

#tr-send-box,
.tr-deal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#tr-send-box.hidden,
.tr-deal.hidden {
  display: none;
}

.tr-deal-parts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.tr-part {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.tr-part .part-ico {
  width: 32px;
  height: 32px;
}

.tr-part .part-ico svg {
  width: 18px;
  height: 18px;
}

.tr-part.is-on {
  background: var(--tone);
  box-shadow: inset 0 0 0 2px var(--ink);
}

.tr-part.is-on.tone-seal {
  color: #ffffff;
  box-shadow: none;
}

.tr-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.tr-price-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 110px;
}

.tr-price-step {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  cursor: pointer;
}

.tr-price-step:active {
  transform: scale(0.92);
}

.tr-deal-hint,
.tr-deal-empty {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* банк v6, поправки: цифры деталей — TikTok Sans (у A24 ноль похож на
   полумесяц), новости — персиковая карточка с белыми строками */

#bank-jubilee-card .coin-rate {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: inherit;
  font-size: 15px;
}

#bank-jubilee-card .coin-rate b {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 0.9;
}

#bank-jubilee-card .coin-rate span {
  font-size: 15px;
  font-weight: 800;
}

.part-prices b {
  font-family: 'TikTok Sans', sans-serif;
  font-size: 22px;
  font-weight: 900;
  font-stretch: 125%;
}

/* =====================================================================
   Банк форума v7. Шапка — монетный двор: счёт, серия, монета из трёх
   деталей (SVG, coinSvg в app.js) и кнопка чеканки. Лист: детали
   каруселью коллекционных карточек, «Вестник монетного двора», казна.
   ===================================================================== */

#view-bank .forge-hero {
  padding-bottom: 54px;
}

#view-bank .bank-wallet {
  gap: 20px;
  margin-top: 0;
}

#view-bank .bank-wallet-num {
  font-size: 46px;
}

#view-bank .coin-mini {
  width: 32px;
  height: 32px;
}

#view-bank .bank-wallet-sep {
  height: 54px;
}

.forge {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.forge-kicker {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 28px;
  line-height: 1;
  color: #ffffff;
}

.forge-series {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(110, 28, 0, 0.35);
}

.forge-coin {
  position: relative;
  width: 220px;
  height: 220px;
  margin-top: 14px;
  filter: drop-shadow(0 14px 22px rgba(110, 28, 0, 0.32));
  cursor: pointer;
}

.forge-coin > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.forge-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  background: #ffffff;
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  pointer-events: none;
}

.forge-qty {
  font-family: 'TikTok Sans', sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.forge-sector path {
  transition: fill 0.4s ease;
}

.forge-coin.is-ready {
  animation: forgeReady 2.6s ease-in-out infinite;
}

.forge-coin.is-minted {
  animation: forgeMint 1.1s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.forge-seal-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  padding: 13px;
  box-sizing: border-box;
  border: 4px solid rgba(255, 244, 196, .94);
  border-radius: 50%;
  background: linear-gradient(145deg, #ffbf32, #dc3d0d);
  box-shadow: 0 12px 30px rgba(93, 21, 0, .38), inset 0 2px 5px rgba(255, 255, 255, .58);
  color: #fff8dc;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.7) rotate(-18deg);
  pointer-events: none;
  transition: opacity .25s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
}

.forge-seal-mark svg { display: block; width: 100%; height: 100%; }
.forge-coin.has-seal .forge-seal-mark { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-8deg); }
.forge-coin.is-stamping .forge-seal-mark { animation: forgeStamp .82s cubic-bezier(.16, 1, .3, 1); }
.forge.has-seal .forge-btn { background: linear-gradient(135deg, #ffb22c, #d83a0b); box-shadow: 0 12px 28px rgba(117, 30, 3, .28); }

@keyframes forgeReady {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes forgeMint {
  0% { transform: scale(1) rotateY(0); }
  40% { transform: scale(1.18) rotateY(200deg); }
  75% { transform: scale(0.96) rotateY(360deg); }
  100% { transform: scale(1) rotateY(360deg); }
}

@keyframes forgeStamp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.4) rotate(-26deg); filter: blur(3px); }
  46% { opacity: 1; transform: translate(-50%, -50%) scale(.82) rotate(-8deg); filter: blur(0); }
  68% { transform: translate(-50%, -50%) scale(1.12) rotate(-8deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); }
}

.forge-seal-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: rgba(42, 15, 6, .18);
}

.forge-seal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 13px 0 5px;
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.forge-seal-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.forge-seal-box {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: inset 0 0 0 1px rgba(42, 15, 6, .12);
}

.forge-seal-box::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 8px;
  width: 10px;
  height: 6px;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(-45deg);
}

.forge-seal-control.is-on .forge-seal-box { background: #ffd35a; }
.forge-seal-control.is-on .forge-seal-box::after { border-color: #371407; }

.forge-seal-toggle:focus-within,
.forge-seal-help:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.forge-seal-help {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #6f260d;
  font: inherit;
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
}

.forge-seal-help:active { transform: scale(.96); }

.forge-btn {
  width: 100%;
  max-width: 340px;
  height: 56px;
  margin-top: 16px;
  border-radius: 28px;
  background: #ffffff;
  color: var(--orange-ink);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.forge-btn:not(:disabled):active {
  transform: scale(0.97);
}

.forge-btn:disabled {
  background: rgba(42, 15, 6, 0.22);
  color: #ffffff;
  cursor: default;
}

/* --- детали: карусель коллекционных карточек --- */

.parts-rail {
  display: flex;
  gap: 10px;
  margin: 0 calc(var(--sheet-inset) * -1);
  padding: 2px var(--sheet-inset) 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--sheet-inset);
  scrollbar-width: none;
}

.parts-rail::-webkit-scrollbar {
  display: none;
}

.parts-rail-items {
  display: contents;
}

.ptile {
  flex: 0 0 158px;
  min-height: 214px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--tone);
  color: var(--ink);
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.ptile:active {
  transform: scale(0.97);
}

.ptile.is-empty {
  background: #ffffff;
}

.ptile.is-empty .part-ico {
  background: var(--tone);
}

.ptile.is-empty.tone-seal .part-ico {
  color: #ffffff;
}

.ptile .part-ico {
  width: 48px;
  height: 48px;
}

.ptile .part-ico svg {
  width: 26px;
  height: 26px;
}

.ptile-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ptile-qty {
  font-family: 'TikTok Sans', sans-serif;
  font-size: 24px;
  font-weight: 900;
  font-stretch: 125%;
  font-variant-numeric: tabular-nums;
}

.ptile-name {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.05;
  text-transform: uppercase;
}

.ptile-mine {
  padding: 4px 9px 3px;
  border-radius: 999px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.ptile.is-empty .ptile-mine {
  background: var(--cream);
}

.ptile-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ptile-market {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ptile-market b {
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.ptile-trend {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ptile-trend svg {
  width: 12px;
  height: 12px;
}

.ptile-trend.is-up {
  color: var(--teal-ink);
}

.ptile-trend.is-down {
  color: var(--orange-ink);
}

.ptile-bank,
.ptile-price-note {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-soft);
}

.ptile.tone-seal:not(.is-empty) {
  color: #ffffff;
}

.ptile.tone-seal:not(.is-empty) .part-ico {
  color: #6a45d1;
}

.ptile.tone-seal:not(.is-empty) .ptile-price-note,
.ptile.tone-seal:not(.is-empty) .ptile-bank {
  color: #ffffff;
}

.ptile-intro {
  flex-basis: 196px;
  background: #ffffff;
  cursor: default;
}

.ptile-intro-kicker {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 26px;
  line-height: 1;
  color: var(--orange-ink);
}

.ptile-intro-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-soft);
}

.ptile-intro .bank-sec-link {
  margin-top: auto;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--orange);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

/* --- «Вестник монетного двора» --- */

.gazette {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  border-radius: var(--radius-sm);
  background: #fffaf3;
  color: var(--ink);
}

.gazette-mast {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--ink);
}

.gazette-name {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 25px;
  line-height: 1;
  color: var(--ink);
}

.gazette-date {
  flex: none;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
}

.gazette-list {
  display: flex;
  flex-direction: column;
}

.gazette-lead {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 12px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line);
}

.gazette-lead .gazette-emoji {
  grid-row: span 2;
  font-size: 32px;
  line-height: 1.1;
}

.gazette-headline {
  font-size: 18px;
  font-weight: 900;
  font-stretch: 112%;
  line-height: 1.2;
}

.gazette-time {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}

.gazette-item {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.gazette-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.gazette-item .gazette-emoji {
  flex: none;
  width: 40px;
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
}

.gazette-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.gazette-empty {
  padding-top: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* --- казна --- */

.treasury {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--sheet-inset);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
}

.treasury-count {
  font-size: 15px;
  font-weight: 900;
  color: var(--orange-ink);
}

.treasury-coins {
  padding: 0 4px;
}

.treasury-stack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 14px;
}

.tcoin {
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: -14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 5px #b8761f, 0 0 0 2px #ffffff;
}

.tcoin::before {
  content: '';
  position: absolute;
  inset: 26%;
  background: #8a5414;
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
}

.tcoin-more {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 900;
}

.treasury-series {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tseries {
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--cream);
  font-size: 13px;
  font-weight: 800;
}

.tseries.is-gold {
  background: var(--gold);
}

.treasury-empty {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-soft);
}

.treasury-rank {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--cream);
}

.treasury-rank-title {
  font-size: 16px;
  font-weight: 900;
}

.treasury-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(42, 15, 6, 0.12);
  overflow: hidden;
}

.treasury-fill {
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: var(--orange);
  transition: width 0.8s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.treasury-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* =====================================================================
   Установка — разговор с ФМД (v7). Реплики ФМД — белые пузыри, ответы
   человека — бирюзовые справа, шаги — карточка с номерами и значками тех
   самых кнопок, что нужно нажать. Ответы — таблетки внизу экрана.
   ===================================================================== */

.view.install-chat {
  position: fixed;
  inset: 0;
  z-index: 3;
  max-width: 480px;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  gap: 0;
  justify-content: flex-start;
  align-items: stretch;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ichat-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 14px;
  background: rgba(200, 66, 15, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.ichat-ava {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
}

.ichat-ava::before {
  content: '';
  position: absolute;
  inset: 22%;
  background: var(--orange);
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
}

.ichat-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #ffffff;
}

.ichat-who b {
  font-size: 18px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
}

.ichat-who span {
  font-size: 14px;
  font-weight: 700;
}

.ichat-brand {
  flex: none;
  font-size: 10px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-align: right;
  text-transform: uppercase;
  color: #ffffff;
}

.ichat-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px 12px;
}

.ichat-msg {
  align-self: flex-start;
  max-width: 88%;
  padding: 13px 17px;
  border-radius: 24px 24px 24px 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.42;
  animation: ichatIn 0.38s cubic-bezier(0.2, 1, 0.3, 1) both;
}

.ichat-msg p {
  margin: 0;
}

.ichat-me {
  align-self: flex-end;
  border-radius: 24px 24px 8px 24px;
  background: var(--teal-ink);
  color: #ffffff;
  font-weight: 800;
}

.ichat-card {
  width: 100%;
  max-width: 100%;
  padding: 14px;
  border-radius: 24px 24px 24px 8px;
}

.ichat-typing {
  padding: 10px 16px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}

.ichat-typing span {
  display: none;
}

.ichat-typing::before {
  content: 'ФМД печатает…';
  animation: ichatBlink 1.1s ease-in-out infinite;
}

@keyframes ichatIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
}

@keyframes ichatBlink {
  50% { opacity: 0.55; }
}

/* шаги: номер, что сделать и значок той самой кнопки */
.ichat-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ichat-steps li {
  display: grid;
  grid-template-columns: 32px 1fr 46px;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border-radius: 14px;
  background: var(--cream);
}

.ichat-n {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange);
  color: #ffffff;
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ichat-step-text {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.ichat-ui {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #ffffff;
  color: #1a73e8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(42, 15, 6, 0.12);
}

.ichat-ui svg {
  width: 24px;
  height: 24px;
}

.ichat-install {
  width: 100%;
  height: 56px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 28px;
  background: var(--orange);
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}

.ichat-install svg {
  width: 24px;
  height: 24px;
}

.ichat-install:disabled {
  background: var(--cream);
  color: var(--ink-soft);
}

.ichat-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.ichat-tip svg {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background: var(--teal-ink);
  color: #ffffff;
}

.ichat-linkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: var(--cream);
}

.ichat-link-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 800;
}

.ichat-copy {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--orange);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.ichat-copy svg {
  width: 18px;
  height: 18px;
}

.ichat-qr {
  display: block;
  width: 220px !important;
  height: 220px !important;
  margin: 0 auto;
}

.ichat-replies {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
}

.ichat-replies:empty {
  display: none;
}

.ichat-reply {
  padding: 14px 20px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: rgba(200, 66, 15, 0.55);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  animation: ichatIn 0.38s cubic-bezier(0.2, 1, 0.3, 1) both;
}

.ichat-reply.is-main {
  background: #ffffff;
  color: var(--orange-ink);
}

.ichat-reply:active {
  transform: scale(0.96);
}

/* банк v7, поправки: газета без старой персиковой подложки, шапка газеты
   по центру в две строки, подпись «рынок» у цены */
#bank-news-list.gazette-list {
  background: none;
}

.gazette-mast {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.gazette-name {
  font-size: 27px;
  text-wrap: balance;
}

.gazette-date {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ptile-market-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-soft);
}

.ptile.tone-seal:not(.is-empty) .ptile-market-label {
  color: #ffffff;
}

/* =====================================================================
   Встречающий экран v7: прогресс-полоски сверху, ФМД крупно, его реплика
   на белой карточке печатается, под ней картинка из деталей приложения
   (бейдж, монета, детали, газета банка). Ответы — внизу.
   ===================================================================== */

.view.view-welcome {
  position: fixed;
  inset: 0;
  z-index: 3;
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

.view-welcome.is-exiting {
  animation: wlExit 0.45s cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}

@keyframes wlExit {
  to { opacity: 0; transform: scale(0.96); }
}

.wl {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  overflow-y: auto;
}

.wl-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wl-progress {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(42, 15, 6, 0.24);
  overflow: hidden;
}

.wl-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: #ffffff;
  transition: width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.wl-mute {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--orange-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wl-mute svg {
  width: 22px;
  height: 22px;
}

.wl-mute .icon-sound-off,
.wl-mute.is-muted .icon-sound-on {
  display: none;
}

.wl-mute.is-muted .icon-sound-off {
  display: block;
}

.wl-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: clamp(18px, 6vh, 56px);
}

.wl-who {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wl-mascot {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(110, 28, 0, 0.25);
}

.wl-mascot::before {
  content: '';
  position: absolute;
  inset: 21%;
  background: var(--orange);
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
}

.wl-mascot.is-typing {
  animation: wlTalk 0.9s ease-in-out infinite;
}

@keyframes wlTalk {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-4px) rotate(-5deg); }
  60% { transform: translateY(0) rotate(4deg); }
}

.wl-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #ffffff;
}

.wl-name b {
  font-size: 22px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
}

.wl-name span {
  font-size: 14px;
  font-weight: 800;
}

.wl-bubble {
  padding: 20px 22px;
  border-radius: 10px 30px 30px 30px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
}

.wl-text {
  min-height: 2.6em;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.32;
  transition: opacity 0.2s ease;
}

.wl-text.is-leaving {
  opacity: 0.35;
}

.wl-text.is-typing::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.95em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--orange);
  animation: wlCaret 0.9s steps(1) infinite;
}

@keyframes wlCaret {
  50% { opacity: 0; }
}

.wl-art {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}

.wl-art.is-in {
  opacity: 1;
  transform: none;
}

.wl-options {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: ichatIn 0.38s cubic-bezier(0.2, 1, 0.3, 1) both;
}

.wl-options:empty {
  animation: none;
}

.welcome-choices-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wl-next {
  width: 100%;
  height: 58px;
  border-radius: 29px;
  background: #ffffff;
  color: var(--orange-ink);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}

.wl-choice {
  width: 100%;
  padding: 15px 20px;
  border: 2px solid #ffffff;
  border-radius: 26px;
  background: rgba(200, 66, 15, 0.45);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.wl-next:active,
.wl-choice:active {
  transform: scale(0.98);
}

/* --- картинки к репликам --- */

.wl-card {
  padding: 16px;
  border-radius: 24px;
  background: #ffffff;
  color: var(--ink);
}

.wl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wl-row-tight {
  gap: 6px;
}

.wl-chip {
  padding: 9px 15px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.wl-chip-program { background: var(--gold); }
.wl-chip-tasks { background: var(--peach); }
.wl-chip-badge { background: #8fe6d3; }
.wl-points .wl-chip { background: var(--cream); }

.wl-forum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.wl-forum-mark {
  width: 46px;
  height: 40px;
  background: var(--orange);
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
}

.wl-forum b {
  font-size: 19px;
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
}

.wl-forum span {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
}

.wl-tap {
  gap: 4px;
  padding: 8px 0;
}

.wl-phone {
  width: 58px;
  height: 96px;
  padding: 6px;
  border-radius: 16px;
  background: #ffffff;
  transform: rotate(-8deg);
}

.wl-phone span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 11px;
  background: var(--orange);
}

.wl-wave-wrap {
  color: #ffffff;
}

.wl-waves {
  width: 46px;
  height: 46px;
  animation: wlPulse 1.4s ease-in-out infinite;
}

@keyframes wlPulse {
  50% { opacity: 0.45; }
}

.wl-minibadge {
  position: relative;
  width: 82px;
  height: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  transform: rotate(5deg);
}

.wl-minibadge-band {
  width: 100%;
  height: 28px;
  background: var(--orange);
}

.wl-minibadge-ava {
  width: 36px;
  height: 36px;
  margin-top: -16px;
  border: 3px solid #ffffff;
  border-radius: 12px;
  background: var(--cream);
  color: var(--orange-ink);
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wl-minibadge b,
.wl-minibadge i {
  width: 52px;
  height: 7px;
  border-radius: 4px;
  background: var(--ink);
}

.wl-minibadge i {
  width: 38px;
  background: var(--teal-ink);
}

.wl-pill-btn {
  padding: 13px 20px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--orange-ink);
  font-size: 15px;
  font-weight: 800;
}

.wl-plus {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
}

.wl-points {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.wl-points-num {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 58px;
  line-height: 0.9;
  color: var(--orange-ink);
}

.wl-points-unit {
  font-size: 16px;
  font-weight: 900;
}

.wl-coin {
  position: relative;
  width: 176px;
  height: 176px;
  margin: 0 auto;
  filter: drop-shadow(0 12px 20px rgba(110, 28, 0, 0.3));
}

.wl-coin > svg {
  display: block;
}

.wl-coin .forge-mark {
  width: 30px;
  height: 30px;
}

.wl-parts {
  flex-wrap: nowrap;
  align-items: stretch;
}

.wl-part {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 20px;
  background: var(--tone);
  color: var(--ink);
  text-align: center;
}

.wl-part b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 900;
}

.wl-part span:last-child {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink-soft);
}

.wl-gazette {
  background: #fffaf3;
}

.wl-gazette-name {
  display: block;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--ink);
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 21px;
  line-height: 1;
  text-align: center;
}

.wl-gazette p {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}

.wl-auction {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.wl-auction-ico {
  font-size: 40px;
  line-height: 1;
}

.wl-auction b {
  font-size: 18px;
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
}

.wl-auction .wl-row {
  font-size: 14px;
  font-weight: 800;
}

.wl-auction .coin-mini {
  width: 22px;
  height: 22px;
}

.wl-program,
.wl-fmdcard {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wl-time {
  flex: none;
  padding: 9px 14px 7px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--orange-ink);
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 22px;
  line-height: 1;
}

.wl-program b,
.wl-fmdcard b {
  display: block;
  font-size: 16px;
  font-weight: 900;
}

.wl-program span span {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
}

.wl-fmd-ava {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px var(--teal);
}

.wl-fmd-ava::before {
  content: '';
  position: absolute;
  inset: 22%;
  background: #ffffff;
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
}

.wl-fmdcard span span {
  font-size: 14px;
  font-weight: 800;
  color: var(--teal-ink);
}

/* заставка на время загрузки: ФМД посередине, мягко дышит */
.view.view-splash {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.splash-mascot {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #ffffff;
  animation: splashBreath 1.6s ease-in-out infinite;
}

.splash-mascot::before {
  content: '';
  position: absolute;
  inset: 21%;
  background: var(--orange);
  -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
  mask: url('../shared/brand/logo-mark.png') center / contain no-repeat;
}

.splash-name {
  font-size: 22px;
  font-weight: 900;
  font-stretch: 125%;
  color: #ffffff;
}

@keyframes splashBreath {
  50% { transform: scale(1.06); }
}

/* =====================================================================
   v8: картинки встречающего экрана (слоган, трек, единство, деталь) и
   на экране установки — значок без пометки браузера и с пометкой.
   ===================================================================== */

.wl-slogan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 16px;
  text-align: center;
}

.wl-slogan-main {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 34px;
  line-height: 1;
  color: var(--orange-ink);
}

.wl-slogan-sub {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-soft);
}

.wl-track {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--teal-ink);
  color: #ffffff;
}

.wl-track-kicker {
  font-family: 'A24', 'TikTok Sans', sans-serif;
  font-size: 22px;
  line-height: 1;
}

.wl-track b {
  font-size: 24px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.02;
  text-transform: uppercase;
}

.wl-part-big {
  flex: 0 1 220px;
  padding: 18px 14px;
  gap: 8px;
}

.wl-part-big .part-ico {
  width: 56px;
  height: 56px;
}

.wl-part-big .part-ico svg {
  width: 30px;
  height: 30px;
}

.wl-part-big b {
  font-size: 18px;
  white-space: normal;
}

.wl-unity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wl-unity-track {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: var(--tone);
  color: var(--ink);
}

.wl-unity-track b {
  font-size: 15px;
  font-weight: 900;
}

.wl-unity-track.is-mine {
  box-shadow: inset 0 0 0 3px #ffffff;
}

.wl-unity-track.is-mine b::after {
  content: ', твой';
  font-weight: 700;
}

/* значок: с пометкой браузера и без */
.ichat-icons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ichat-icon-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px 12px;
  border-radius: 16px;
  background: var(--cream);
  text-align: center;
}

.ichat-appicon {
  position: relative;
  width: 68px;
  height: 68px;
}

.ichat-appicon img {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  box-shadow: 0 4px 10px rgba(42, 15, 6, 0.18);
}

.ichat-appicon-badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 28px;
  height: 28px;
  padding: 4px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #ffffff;
  color: #1a73e8;
  box-shadow: 0 2px 6px rgba(42, 15, 6, 0.2);
}

.ichat-appicon-badge svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ichat-appicon-label {
  font-size: 13px;
  font-weight: 800;
}

.ichat-verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.ichat-verdict svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  color: #ffffff;
}

.is-bad .ichat-verdict svg {
  background: var(--orange-ink);
}

.is-good .ichat-verdict svg {
  background: var(--teal-ink);
}

.is-bad .ichat-verdict {
  color: var(--orange-ink);
}

.is-good .ichat-verdict {
  color: var(--teal-ink);
}

/* =====================================================================
   v9. Обложка банка компактнее: подписи под монетой нет (что мешает
   чеканке, говорит кнопка), монета меньше, отступы плотнее.
   ===================================================================== */

#view-bank .forge-hero {
  padding-bottom: 40px;
}

.forge {
  margin-top: 10px;
}

.forge-kicker {
  font-size: 26px;
}

.forge-series {
  margin-top: 4px;
}

.forge-coin {
  width: 188px;
  height: 188px;
  margin-top: 12px;
}

.forge-coin .forge-qty {
  font-size: 14px;
}

.forge-coin .forge-mark {
  width: 32px;
  height: 32px;
}

.forge-btn {
  margin-top: 18px;
}

/* =====================================================================
   v9. Нижние окна — снова стекло: шторка и карточка ФМД. Молочное
   стекло, как у уведомлений сверху. Само окно прозрачное, стекло
   рисуют два слоя под его содержимым:
   ::after  — кромка: фон под ней преломляется (SVG-фильтр #fmd-refract;
              где браузер его не умеет, остаётся светлая кромка) и
              светлый блик по краю;
   ::before — середина: размытие и насыщенность того, что под окном,
              к краям растворяется в кромку.
   Слои — псевдоэлементы самого окна, а не потомки элемента с
   backdrop-filter: иначе вложенный слой «видел» бы только окно, а не
   экран. Подложка темнит экран слабее, чтобы приложение было видно
   сквозь стекло. Текст — чернилами: стекло всегда светлее фона.
   Кремовые плашки внутри становятся полупрозрачно-белыми.
   ===================================================================== */

.sheet-modal-panel,
.fmd-pop-card,
.app-dialog-panel {
  --cream: rgba(255, 255, 255, 0.58);
  --orange-ink: #a8320a;
  --glass-edge: 16px;
}

.sheet-modal-panel,
.fmd-pop-card {
  isolation: isolate;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sheet-modal-panel {
  box-shadow: 0 -18px 50px rgba(110, 28, 0, 0.3);
}

.fmd-pop-card {
  box-shadow: 0 18px 50px rgba(110, 28, 0, 0.32);
}

.sheet-modal-panel::before,
.sheet-modal-panel::after,
.fmd-pop-card::before,
.fmd-pop-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.sheet-modal-panel::after,
.fmd-pop-card::after {
  z-index: -2;
  background: rgba(255, 249, 245, 0.5);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(2px) saturate(180%);
  backdrop-filter: blur(2px) saturate(180%);
  backdrop-filter: url(#fmd-refract) blur(1.5px) saturate(180%) brightness(1.04);
}

.sheet-modal-panel::before,
.fmd-pop-card::before {
  z-index: -1;
  background:
    radial-gradient(120% 60% at 15% 0%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 60%),
    rgba(255, 249, 245, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.05);
  backdrop-filter: blur(22px) saturate(185%) brightness(1.05);
  -webkit-mask:
    linear-gradient(90deg, transparent, #000 var(--glass-edge), #000 calc(100% - var(--glass-edge)), transparent),
    linear-gradient(180deg, transparent, #000 var(--glass-edge), #000 calc(100% - var(--glass-edge)), transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, transparent, #000 var(--glass-edge), #000 calc(100% - var(--glass-edge)), transparent),
    linear-gradient(180deg, transparent, #000 var(--glass-edge), #000 calc(100% - var(--glass-edge)), transparent);
  mask-composite: intersect;
}

/* шторка прилегает к низу экрана: снизу кромки нет */
.sheet-modal-panel::before {
  -webkit-mask:
    linear-gradient(90deg, transparent, #000 var(--glass-edge), #000 calc(100% - var(--glass-edge)), transparent),
    linear-gradient(180deg, transparent, #000 var(--glass-edge));
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, transparent, #000 var(--glass-edge), #000 calc(100% - var(--glass-edge)), transparent),
    linear-gradient(180deg, transparent, #000 var(--glass-edge));
  mask-composite: intersect;
}

/* диалог по центру появляется с прозрачностью — слои стекла под ним на
   время анимации ослепли бы, поэтому у него стекло одним слоем */
.app-dialog-panel {
  background: rgba(255, 249, 245, 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.05);
  backdrop-filter: blur(22px) saturate(185%) brightness(1.05);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 24px 60px rgba(110, 28, 0, 0.32);
}

.sheet-modal-backdrop,
.app-dialog-backdrop,
.fmd-pop-backdrop {
  background: rgba(42, 15, 6, 0.3);
}

/* поля ввода на стекле — светлее плашек, с тёплой кромкой */
.fmd-pop-input,
.sheet-modal-panel .suggest-textarea {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(191, 58, 11, 0.22);
}

.fmd-pop-close {
  background: rgba(255, 255, 255, 0.62);
}

/* на стекле фон светлее и пестрее карточки: оранжевые надписи — на тон
   глубже (--orange-ink выше), вторичная кнопка — светлым стеклом */
.app-dialog-panel .app-dialog-btn-ghost {
  background: rgba(255, 255, 255, 0.66);
}

/* номера шагов летописи: белый A24 обычного начертания — только на
   глубоком оранжевом (на фирменном контраст 3,8) */
.lore-steps li span {
  background: var(--orange-deep);
}

/* v10: экран установки. «Открыть в Safari/Chrome» — ссылка в виде основной
   кнопки; адрес фмд-онлайн.рф крупно, его можно выделить и набрать руками */
.ichat-open {
  text-decoration: none;
}

.ichat-link-text {
  font-size: 18px;
  font-weight: 900;
  -webkit-user-select: all;
  user-select: all;
}

.ichat-qr-note {
  margin-top: 10px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

.ichat-qr-note b {
  font-weight: 900;
  color: var(--orange-ink);
}

/* ответы внизу — на полосе цвета шапки: текст ленты уходит под неё, а
   не просвечивает сквозь кнопки */
.ichat-replies {
  padding-top: 26px;
  background: linear-gradient(180deg, rgba(200, 66, 15, 0) 0, rgba(200, 66, 15, 0.94) 24px);
}

/* номера шагов: цифры TikTok Sans (у A24 «4» похожа на «ч»), белое — на
   глубоком оранжевом */
.ichat-n {
  background: var(--orange-deep);
  font-family: 'TikTok Sans', sans-serif;
  font-size: 16px;
  font-weight: 900;
}

/* адрес — крупно отдельной строкой (в одну строку с кнопкой он обрезался),
   «Скопировать» — второстепенная кнопка во всю ширину под ним */
.ichat-linkbox {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  background: none;
}

.ichat-link-text {
  padding: 4px 0 2px;
  overflow: visible;
  white-space: normal;
  text-align: center;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
}

.ichat-copy {
  justify-content: center;
  height: 52px;
  padding: 0 16px;
  border-radius: 26px;
  background: var(--cream);
  color: var(--orange-ink);
  font-size: 16px;
}

/* проверка значка — одна карточка: подпись сверху, два значка */
.ichat-icons-title {
  margin: 2px 6px 12px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

/* карточка из одной кнопки — без отступа сверху */
.ichat-card > .ichat-install:first-child {
  margin-top: 0;
}

/* =====================================================================
   v13. «Мой код» — пропуск. Карточка 30 (лист 44 − 14), внутри всё 16
   (30 − 14). QR на белом квадрате в кремовой рамке с оранжевыми
   уголками видоискателя. Под карточкой — кнопка-капсула 60/30.
   ===================================================================== */

.pass,
.scanner {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
}

.pass-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 0;
}

.pass-ava {
  flex: none;
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--orange-deep);
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pass-ava img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pass-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.pass-name {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.pass-track {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 12px 4px 4px;
  border-radius: 15px;
  background: var(--tone, #ffd9c2);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

.pass-track > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pass-track .part-ico,
.pass-track-ico {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pass-track .part-ico svg {
  width: 14px;
  height: 14px;
}

.pass-qr {
  position: relative;
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pass-qr-canvas {
  display: block;
  width: 74% !important;
  height: auto !important;
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 12px;
  background: #ffffff;
}

.pass-corners,
.scanner-frame {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
}

.pass-corners {
  inset: 7%;
  --c: var(--orange-deep);
  background:
    linear-gradient(var(--c), var(--c)) top left / 34px 5px,
    linear-gradient(var(--c), var(--c)) top left / 5px 34px,
    linear-gradient(var(--c), var(--c)) top right / 34px 5px,
    linear-gradient(var(--c), var(--c)) top right / 5px 34px,
    linear-gradient(var(--c), var(--c)) bottom left / 34px 5px,
    linear-gradient(var(--c), var(--c)) bottom left / 5px 34px,
    linear-gradient(var(--c), var(--c)) bottom right / 34px 5px,
    linear-gradient(var(--c), var(--c)) bottom right / 5px 34px;
  background-repeat: no-repeat;
}

.pass-hint {
  padding: 0 4px 2px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-soft);
}

.scan-cta {
  width: 100%;
  max-width: 420px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--orange-ink);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.scan-cta:active {
  transform: scale(0.97);
}

.scan-cta svg {
  width: 24px;
  height: 24px;
}

/* --- сканер: камера во всю карточку, рамка и бегущая линия --- */

.scanner-cam {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--orange-deep);
}

.scanner-cam video {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.scanner-frame {
  inset: 15%;
  --c: #ffffff;
  background:
    linear-gradient(var(--c), var(--c)) top left / 38px 5px,
    linear-gradient(var(--c), var(--c)) top left / 5px 38px,
    linear-gradient(var(--c), var(--c)) top right / 38px 5px,
    linear-gradient(var(--c), var(--c)) top right / 5px 38px,
    linear-gradient(var(--c), var(--c)) bottom left / 38px 5px,
    linear-gradient(var(--c), var(--c)) bottom left / 5px 38px,
    linear-gradient(var(--c), var(--c)) bottom right / 38px 5px,
    linear-gradient(var(--c), var(--c)) bottom right / 5px 38px;
  background-repeat: no-repeat;
}

.scanner-line {
  position: absolute;
  left: 19%;
  right: 19%;
  top: 18%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  animation: scannerLine 2.2s ease-in-out infinite alternate;
}

@keyframes scannerLine {
  to { top: 81%; }
}

.scanner-result {
  display: flex;
  justify-content: center;
  padding: 22px 0 4px;
}

.scanner .quiz-scan-icon {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--teal-ink);
  color: #ffffff;
}

.scanner .quiz-scan-icon.is-error {
  background: var(--orange-deep);
  color: #ffffff;
}

.scanner-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 6px 4px;
  text-align: center;
}

.scanner-title {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
}

.scanner-hint {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-soft);
}

#view-quiz-scan .sheet,
#view-receive .sheet {
  gap: 10px;
}

/* =====================================================================
   v13. Чат с ФМД: частые вопросы — лента-капсула внутри нижней панели.
   Панель 44, отступ 16 → лента 28 (высота 56); внутри отступ 4 → чипы
   24 (высота 48). Чипы листаются внутри ленты и не уходят за углы.
   ===================================================================== */

.fmd-chat-bottom {
  padding-top: 16px;
}

/* =====================================================================
   v13. Колесо фортуны — обложка, как на главной и в банке: закреплено
   сверху и плавно гаснет, а лента с билетиками заезжает на него.
   ===================================================================== */

#view-fortune .hero {
  position: sticky;
  top: 0;
  transform-origin: 50% 0;
  will-change: opacity, transform;
}

/* «Мой код» и сканер — содержимое сверху листа, а не по центру: иначе
   над карточкой оставалась пустая полоса */
#view-receive .sheet,
#view-quiz-scan .sheet {
  justify-content: flex-start;
}

/* =====================================================================
   v16. Стекло нижних окон — ровное, без светлого прямоугольника.
   Раньше середину рисовал отдельный слой с маской-прямоугольником
   поверх кромки: середина выходила светлее краёв, а в скруглённых
   углах (особенно пока шторка открывается и углы ещё 72px) торчали его
   прямые углы. Теперь стекло — один слой на всё окно: одинаково
   размытое и молочное от края до края, искажение фона (где браузер
   умеет SVG-фильтр) идёт по всему окну, кромка — тонкая белая линия
   по скруглению и блик сверху.
   ===================================================================== */
.sheet-modal-panel::before,
.fmd-pop-card::before {
  content: none;
}

.sheet-modal-panel::after,
.fmd-pop-card::after {
  z-index: -1;
  background: rgba(255, 248, 243, 0.7);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(32px) saturate(160%) brightness(1.05);
  backdrop-filter: blur(32px) saturate(160%) brightness(1.05);
  backdrop-filter: blur(28px) url(#fmd-refract) saturate(160%) brightness(1.05);
}

/* Отметка идущего блока программы — из того же стекла, что и нижние
   окна: молочно-тёплая плашка с белой кромкой по скруглению и мягкой
   тенью, будто кусочек шторки лёг на строку. Без градиентов и бликов.
   Текст — чернилами, время — на фирменной оранжевой плашке.
   Радиус 16 = 30 (карточка) − 14 (отступ). */
.program-thumb {
  border-radius: 16px;
  background: rgba(228, 81, 26, 0.16);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 0 0 1px rgba(191, 58, 11, 0.1),
    0 4px 14px rgba(110, 28, 0, 0.1);
}

.program-thumb::before,
.program-thumb::after {
  content: none;
}

.program-item.is-current .program-item-time {
  background: var(--orange);
}

.program-item.is-current .program-item-time-text {
  color: #ffffff;
}

.program-item.is-current .program-item-title {
  color: var(--ink);
  font-weight: 800;
}

/* на тёплом стекле оранжевый — на тон глубже (контраст 5,4) */
.program-item.is-current .program-item-desc {
  color: #a8320a;
}

/* Перенос входа из Safari: 8 цифр в чате установки — крупно, чтобы
   переписать в приложение, если ключ не дойдёт сам */
.ichat-code-label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
}

.ichat-code {
  margin: 4px 0 0;
  font-family: 'TikTok Sans', sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: center;
  user-select: all;
  -webkit-user-select: all;
}

/* экран входа на iPhone: кнопка и поле цифр — одной колонкой */
#auth-ios-first,
#auth-handoff-code-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#auth-ios-first.hidden,
#auth-handoff-code-form.hidden {
  display: none;
}

/* =====================================================================
   v17. Стекло на iPhone. Safari 18+ понимает backdrop-filter без
   приставки и принимает в нём url(#fmd-refract) как правильную запись,
   поэтому она перебивала -webkit-вариант. Но SVG-фильтр к фону Safari
   применить не умеет, и стекло пропадало совсем: окно становилось
   просто прозрачным. Теперь стекло — на самом окне (так его надёжнее
   всего рисует Safari), без SVG-фильтра: одинаково на iPhone и Android.
   ===================================================================== */
.sheet-modal-panel::after,
.fmd-pop-card::after {
  content: none;
}

.sheet-modal-panel,
.fmd-pop-card {
  background: rgba(255, 248, 243, 0.72);
  -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.05);
  backdrop-filter: blur(28px) saturate(160%) brightness(1.05);
}

.sheet-modal-panel {
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 -18px 50px rgba(110, 28, 0, 0.3);
}

.fmd-pop-card {
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 18px 50px rgba(110, 28, 0, 0.32);
}

/* кольцо преломления у уведомлений сверху — SVG-фильтр, на iPhone его
   нет; само уведомление остаётся матовым стеклом */
@supports (-webkit-touch-callout: none) {
  .fmd-toast-refract {
    display: none;
  }
}

/* В установленном iOS-приложении фиксированное окно не прокручивает body.
   Длинная история сделок прокручивается внутри карточки, а действия и
   крестик всегда остаются доступными над домашним индикатором. */
.fmd-pop {
  inset: var(--vv-top, 0px) 0 auto;
  height: var(--vvh, 100dvh);
  overflow: hidden;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
}

.fmd-pop-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
  overflow: hidden;
  box-sizing: border-box;
}

.fmd-pop-kicker,
.fmd-pop-text,
.fmd-pop-actions {
  flex: none;
}

.fmd-pop-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(180, 69, 24, 0.5) transparent;
  scrollbar-width: thin;
}

.fmd-pop-body::-webkit-scrollbar {
  width: 5px;
}

.fmd-pop-body::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(180, 69, 24, 0.5);
}

/* Окно отзыва остаётся внутри видимой области над экранной клавиатурой.
   При длинном названии прокручивается вся карточка, поэтому поле комментария
   и кнопка отправки не оказываются за клавиатурой. */
.fmd-pop.is-feedback {
  padding-top: max(8px, env(safe-area-inset-top, 0px));
}

.fmd-pop.is-feedback .fmd-pop-card {
  max-height: calc(var(--vvh, 100dvh) - max(18px, env(safe-area-inset-bottom, 0px)) - 8px);
  padding-top: 88px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.fmd-pop.is-feedback .fmd-pop-body {
  flex: none;
  overflow: visible;
}

.fmd-pop.is-feedback .fmd-pop-input {
  min-height: 92px;
  font-size: 16px;
  scroll-margin: 18px 0 84px;
}

@media (max-height: 620px) {
  .fmd-pop.is-feedback .fmd-pop-card {
    padding-top: 70px;
  }

  .fmd-pop.is-feedback .fmd-pop-avatar {
    top: 10px;
    width: 56px;
    height: 56px;
    margin-left: -28px;
  }

  .fmd-pop.is-feedback .fmd-pop-kicker {
    font-size: 23px;
  }

  .fmd-pop.is-feedback .fmd-pop-text {
    min-height: 0;
    font-size: 15px;
    line-height: 1.32;
  }
}

/* =====================================================================
   v19. Квиз на экранах: текст не заходит на узор справа. Узор — правые
   38% карточки, поэтому всё текстовое держим левее (62% минус зазор), а
   «ДО 400», «форумных» и подпись сверху уменьшаются вместе с шириной
   карточки (cqi — доля ширины карточки). На широких телефонах размеры
   прежние, на узких (375 и меньше) заголовок становится меньше.
   ===================================================================== */
.quiz-promo {
  container-type: inline-size;
}

.quiz-promo-kicker,
.quiz-promo-title,
.quiz-promo-text {
  max-width: calc(62% - 8px);
}

.quiz-promo-kicker {
  font-size: min(22px, calc((62cqi - 8px) / 6.5));
  white-space: nowrap;
}

.quiz-promo-title span {
  white-space: nowrap;
}

.quiz-promo-title span:first-child {
  font-size: min(44px, calc((62cqi - 8px) / 4.8));
}

.quiz-promo-title span:last-child {
  font-size: min(22px, calc((62cqi - 8px) / 8));
}

/* Блок знакомства: один экран, девять стеклянных карточек. */
.meet-game[hidden] { display: none; }
body.meet-locked > :not(#meet-game) { display: none !important; }
body.meet-locked { overflow: hidden !important; }
.meet-game { position: fixed; inset: 0; z-index: 200; overflow: hidden; color: #fff8f1; background: linear-gradient(180deg,rgba(150,34,0,.1) 0,rgba(150,34,0,.1) 320px,transparent 500px),radial-gradient(90% 55% at 100% 100%,rgba(176,44,4,.4),transparent 70%),var(--orange); isolation: isolate; }
.meet-game::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #ffd9c2; -webkit-mask: url('../shared/brand/pattern.png') center top / 640px auto repeat; mask: url('../shared/brand/pattern.png') center top / 640px auto repeat; opacity: .07; }
.meet-wrap { display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 16px; width: 100%; max-width: 560px; height: 100%; min-height: 0; margin: 0 auto; padding: calc(env(safe-area-inset-top,0px) + 18px) 14px calc(env(safe-area-inset-bottom,0px) + 16px); }
.meet-header { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.meet-brand { display: inline-block; flex: none; width: 28px; height: 28px; background: currentColor; -webkit-mask: url('../shared/brand/logo-mark.png') center / contain no-repeat; mask: url('../shared/brand/logo-mark.png') center / contain no-repeat; }
.meet-header > span:last-child { font-size: 11px; font-weight: 600; line-height: 1.3; }
.meet-heading { padding: 8px 4px 0; text-align: center; }
.meet-heading h1 { margin: 0; font-family: 'A24','TikTok Sans',sans-serif; font-size: clamp(29px,8vw,42px); font-weight: 400; line-height: 1; letter-spacing: -.02em; }
.meet-heading p { margin: 7px auto 0; max-width: 360px; color: #4a1808; font-size: 12px; font-weight: 750; line-height: 1.3; }
.meet-grid { height: min(64dvh,480px); max-height: 100%; align-self: center; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); gap: 8px; min-height: 0; }
.meet-cell { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 32px 11px 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.74); border-radius: 24px; background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.05); backdrop-filter: blur(28px) saturate(160%) brightness(1.05); box-shadow: inset 0 1.5px 1px rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.22),0 6px 16px rgba(110,28,0,.1); color: var(--ink); }
.meet-cell-number { position: absolute; top: 12px; left: 12px; font-family: 'A24','TikTok Sans',sans-serif; font-size: 16px; line-height: 1; color: var(--orange-ink); opacity: .65; }
.meet-cell p { width: 100%; margin: 0; font-size: clamp(12px,3.3vw,17px); font-weight: 650; line-height: 1.32; overflow-wrap: anywhere; text-wrap: pretty; }
.meet-cell-fact { display: block; width: 100%; font-weight: 700; line-height: 1.28; overflow-wrap: anywhere; text-wrap: pretty; }
.meet-network { margin: 0 4px; font-size: 11px; line-height: 1.3; color: #ffe3a1; }
.meet-network:empty { display: none; }
.meet-loading { max-width: 400px; margin: 15vh auto 0; padding: 24px; }
.meet-loading .meet-brand { width: 48px; height: 48px; margin-bottom: 20px; }
.meet-loading h1 { font-size: 26px; line-height: 1.2; margin-bottom: 12px; }
.meet-loading p { font-size: 14px; line-height: 1.5; }
.meet-loading button { padding: 14px 20px; margin-top: 20px; border-radius: 26px; background: #fff1df; color: #7e280b; font-size: 15px; font-weight: 700; cursor: pointer; }
.meet-loading button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media(max-width:360px) { .meet-wrap { gap: 12px; padding-left: 10px; padding-right: 10px; } .meet-grid { gap: 6px; } .meet-cell { padding: 28px 9px 10px; border-radius: 19px; } .meet-cell-number { top: 10px; left: 10px; font-size: 14px; } }
@media(max-height:500px) { .meet-wrap { gap: 8px; max-width: 760px; padding-top: calc(env(safe-area-inset-top,0px) + 8px); padding-bottom: calc(env(safe-area-inset-bottom,0px) + 8px); } .meet-header .meet-brand { width: 18px; height: 18px; } .meet-header > span:last-child { font-size: 10px; } .meet-heading h1 { font-size: 24px; } .meet-grid { gap: 6px; } .meet-cell { padding: 8px 10px 8px 30px; border-radius: 16px; } .meet-cell-number { top: 10px; left: 9px; font-size: 12px; } }

/* NFC-знакомства: выбор и сохранённый человек. */
.meet-item { display: flex; min-width: 0; min-height: 0; }
button.meet-cell { width: 100%; height: 100%; font-family: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
button.meet-cell:disabled { opacity: 1; cursor: default; }
.meet-cell.is-selected { border: 2px solid #fff; background: rgba(255,255,255,.95); box-shadow: 0 0 0 3px #ffffff40,inset 0 1px 1px #fff,0 6px 16px #6e1c001a; }
.meet-cell.is-done { padding-bottom: 34px; }
.meet-cell.is-done { border-color: #fff5ad; background: #fff08b; color: #431901; box-shadow: inset 0 1px 1px #fffbd7,0 8px 22px rgba(74,20,0,.22); }
.meet-cell.is-done .meet-cell-number { color: #16745b; opacity: 1; font-family: 'TikTok Sans',sans-serif; font-weight: 800; }
.meet-cell-person { position: absolute; bottom: 10px; left: 9px; right: 9px; font-size: 10px; line-height: 1.2; font-weight: 650; color: #16745b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meet-cell-note { position:absolute; left:9px; right:9px; bottom:9px; color:#743009; font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.04em; }
.meet-cell:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.meet-tools { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.meet-tool { min-height:44px; padding:10px 12px; border:1px solid rgba(255,255,255,.7); border-radius:14px; background:rgba(255,255,255,.5); color:#4a1808; font:inherit; font-size:13px; font-weight:850; }
.meet-tool-main { background:#fff5e9; color:#7b2609; }
.meet-progress { margin:0 3px; color:#4a1808; font-size:10px; font-weight:700; line-height:1.25; text-align:center; }
.meet-progress b { color:#321006; }

.meet-layer { position:absolute; inset:0; z-index:5; display:grid; align-items:end; padding:16px; background:rgba(66,17,2,.62); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.meet-layer.hidden { display:none; }
.meet-note-sheet,.meet-qr-sheet,.meet-scan-sheet { position:relative; width:min(100%,520px); max-height:calc(100dvh - 32px); margin:0 auto; overflow:auto; padding:24px 18px calc(18px + env(safe-area-inset-bottom,0px)); border-radius:24px; background:#fff9f4; color:#3b170b; box-shadow:0 24px 70px rgba(51,12,0,.36); }
.meet-layer-close { position:absolute; top:10px; right:11px; width:40px; height:40px; border-radius:50%; background:#f7e6dc; color:#5b2412; font:inherit; font-size:27px; line-height:1; }
.meet-note-num { display:block; margin:0 46px 7px 0; color:#a6421f; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.meet-note-sheet h2,.meet-qr-sheet h2,.meet-scan-sheet h2 { margin:0 46px 8px 0; font-size:23px; line-height:1.15; letter-spacing:-.02em; }
.meet-note-sheet > p,.meet-qr-sheet > p,.meet-scan-sheet > p { margin:0 42px 14px 0; color:#774331; font-size:13px; font-weight:600; line-height:1.4; }
.meet-note-sheet textarea { display:block; width:100%; min-height:180px; max-height:38dvh; resize:vertical; padding:15px; border:1px solid #e6c9b8; border-radius:15px; background:#fff; color:#351208; font:inherit; font-size:16px; line-height:1.45; outline:none; }
.meet-note-sheet textarea:focus { border-color:#e4511a; box-shadow:0 0 0 3px rgba(228,81,26,.16); }
.meet-note-foot { display:flex; justify-content:space-between; gap:12px; margin:8px 2px 15px; color:#8a5744; font-size:11px; font-weight:700; }
.meet-note-foot .is-error { color:#b03213; }
.meet-note-done { width:100%; min-height:48px; border-radius:15px; background:#e4511a; color:#fff; font:inherit; font-size:15px; font-weight:850; }
.meet-qr-sheet { text-align:center; }
.meet-qr-sheet canvas { display:block; width:min(70vw,260px)!important; height:min(70vw,260px)!important; margin:18px auto; padding:10px; border-radius:18px; background:#fff; }
.meet-scan-camera { position:relative; aspect-ratio:1; overflow:hidden; border-radius:20px; background:#351208; }
.meet-scan-camera video { width:100%; height:100%; object-fit:cover; }
.meet-scan-camera span { position:absolute; inset:12%; border:3px solid #fff; border-radius:18px; box-shadow:0 0 0 999px rgba(35,8,0,.26); }
.bp-meet { display: flex; flex-direction: column; gap: 16px; }
.bp-meet-slot { color: var(--ink-soft); font-size: 12px; }
.bp-meet-fact { font-size: 23px; font-weight: 750; line-height: 1.3; color: var(--ink); }
.bp-meet-person { font-size: 17px; font-weight: 650; line-height: 1.4; color: var(--ink); }
.bp-meet-success { font-size: 42px; color: #16745b; }
.bp-meet-copy-name { margin:0; font-size:25px; font-weight:850; line-height:1.15; color:var(--ink); }
.bp-meet-copy-track { margin:0; padding:12px 14px; border-radius:14px; background:var(--cream); color:var(--ink); font-size:15px; font-weight:750; }
.bp-meet-copy-status { color:var(--ink-soft); font-size:13px; font-weight:650; line-height:1.4; }
.bp-meet-copy .bp-send.is-copied { background:#16745b; }

/* Постоянный архив знакомств на главной и отдельный экран контактов. */
.networking-archive-entry { width:100%; display:flex; align-items:center; gap:13px; margin:0 0 16px; padding:15px; border:0; border-radius:16px; background:#fff08b; color:#4b1c08; text-align:left; box-shadow:0 8px 22px rgba(106,42,9,.12); }
.networking-archive-icon { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:#e4511a; color:#fff; }
.networking-archive-icon svg { width:25px; height:25px; }
.networking-archive-copy { flex:1; min-width:0; }
.networking-archive-copy b,.networking-archive-copy small { display:block; }
.networking-archive-copy b { font-size:16px; font-weight:900; }
.networking-archive-copy small { margin-top:3px; color:#7b3f21; font-size:12px; font-weight:650; }
.networking-archive-go { flex:none; width:23px; height:23px; }
.networking-hero { min-height:245px; }
.networking-hero-copy { max-width:470px; padding:30px 22px 48px; color:#fff; }
.networking-hero-copy h1 { max-width:410px; margin:0; font-family:'A24','TikTok Sans',sans-serif; font-size:clamp(32px,9vw,48px); font-weight:400; line-height:.98; letter-spacing:-.03em; }
.networking-hero-copy p { max-width:390px; margin:14px 0 0; color:#3b170b; font-size:14px; font-weight:750; line-height:1.45; }
.networking-sheet { padding-top:20px; }
.networking-archive-list { display:grid; gap:12px; }
.networking-contact { position:relative; display:grid; grid-template-columns:37px minmax(0,1fr); gap:12px; padding:17px 15px; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(80,30,8,.08); }
.networking-contact-number { display:grid; place-items:center; align-self:start; width:36px; height:36px; border-radius:12px; background:#fff08b; color:#743009; font-size:12px; font-weight:900; }
.networking-contact h2 { margin:0; color:var(--ink); font-size:15px; font-weight:900; line-height:1.3; }
.networking-contact p { margin:9px 0 0; color:#633725; font-size:14px; font-weight:600; line-height:1.48; overflow-wrap:anywhere; }
.networking-contact time { display:block; margin-top:11px; color:#96634e; font-size:11px; font-weight:700; }
.networking-archive-empty { margin:30px 10px; color:var(--ink-soft); font-size:15px; font-weight:700; line-height:1.5; text-align:center; }

/* Единая сделка в приложении и в карточке NFC-бейджа. */
.part-trade { color:var(--ink); text-align:left; min-width:0; }
.part-trade [hidden] { display:none !important; }
.part-trade-intro,.part-trade-hint,.part-trade-status { font-size:14px; line-height:1.5; margin:10px 0; overflow-wrap:anywhere; }
.part-trade-wallet { font-size:15px; font-weight:800; margin:12px 0 16px; }
.part-trade-field { display:grid; gap:8px; font-size:14px; font-weight:800; margin:16px 0 8px; min-width:0; }
.part-trade-field select,.part-trade-field input { box-sizing:border-box; width:100%; min-width:0; max-width:100%; border:1px solid var(--line); border-radius:14px; padding:14px 12px; background:var(--cream); color:var(--ink); font:inherit; min-height:48px; }
.part-trade-qty { display:grid; gap:8px; margin:16px 0 8px; font-size:14px; font-weight:800; }
.part-trade-stepper { display:grid; grid-template-columns:48px minmax(48px,1fr) 48px auto; gap:8px; align-items:center; }
.part-trade-stepper button { min-width:48px; min-height:48px; padding:0 14px; border:1px solid var(--line); border-radius:15px; background:var(--cream); color:var(--ink); font:inherit; font-size:22px; font-weight:900; }
.part-trade-stepper b { display:grid; place-items:center; min-height:48px; border-radius:15px; background:rgba(228,81,26,.1); color:var(--orange-ink); font-size:20px; }
.part-trade-stepper .part-trade-all { font-size:13px; }
.part-trade-total { margin:10px 0 14px; color:var(--orange-ink); font-size:16px; font-weight:900; line-height:1.35; }
.part-trade-primary,.part-trade-secondary { min-height:48px; height:auto; padding:12px 16px; border-radius:24px; font:inherit; font-size:14px; font-weight:800; line-height:1.4; cursor:pointer; white-space:normal; }
.part-trade-primary { background:var(--orange-deep); color:#fff; width:100%; }
.part-trade-secondary { background:var(--cream); color:var(--ink); }
.part-trade-refresh { padding:10px 0; min-height:44px; color:var(--orange-ink); background:none; text-decoration:underline; text-underline-offset:3px; font:inherit; font-size:14px; cursor:pointer; }
.part-trade .is-error { color:var(--error,#ad210d); font-weight:700; }
.part-trade-offers { margin-top:20px; }
.part-trade-offers:empty { display:none; }
.part-trade-offers h3 { font-size:16px; font-weight:900; margin:20px 0 8px; }
.part-trade-offer { padding:14px 0; border-top:1px solid var(--line); }
.part-trade-offer h4 { margin:0 0 6px; font-size:16px; font-weight:800; overflow-wrap:anywhere; }
.part-trade-offer p { font-size:14px; line-height:1.5; margin:6px 0; overflow-wrap:anywhere; }
.part-trade-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.part-trade-actions button { flex:1 1 130px; }
.part-trade button:disabled { opacity:.55; cursor:default; }
.part-trade :focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

@media (max-width: 360px) {
  .part-trade-stepper { grid-template-columns:46px minmax(42px,1fr) 46px; }
  .part-trade-stepper .part-trade-all { grid-column:1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .forge-coin.is-stamping .forge-seal-mark,
  .forge-coin.is-ready,
  .forge-coin.is-minted { animation: none; }
}
#bp-own-deals { margin-top:20px; padding-top:12px; border-top:1px solid var(--line); }

/* Обязательное напоминание сохранить личный QR до начала форума. */
body.qr-shot-open { overflow: hidden; }
.qr-shot-notice { position:fixed; inset:0; z-index:12000; display:grid; place-items:center; padding:max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom)); }
.qr-shot-notice.hidden { display:none; }
.qr-shot-backdrop { position:absolute; inset:0; background:rgba(48,16,5,.74); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.qr-shot-card { position:relative; width:min(100%,390px); max-height:100%; overflow:auto; overscroll-behavior:contain; box-sizing:border-box; padding:24px 20px 20px; border:1px solid rgba(255,255,255,.72); border-radius:32px; background:rgba(255,250,246,.97); box-shadow:0 28px 80px rgba(52,15,3,.38); color:#361307; text-align:center; }
.qr-shot-kicker { display:inline-flex; margin:0 0 7px; padding:6px 12px; border-radius:999px; background:#e4511a; color:#fff; font-size:12px; font-weight:900; letter-spacing:.12em; }
.qr-shot-title { margin:0; font-family:var(--font-display,inherit); font-size:clamp(38px,12vw,58px); font-weight:900; line-height:.96; letter-spacing:-.04em; }
.qr-shot-text,.qr-shot-help { margin:14px auto 0; max-width:330px; font-size:16px; font-weight:650; line-height:1.42; }
.qr-shot-code { position:relative; width:min(64vw,238px); aspect-ratio:1; box-sizing:border-box; margin:18px auto 8px; padding:12px; border-radius:24px; background:#fff; box-shadow:0 12px 32px rgba(110,45,16,.14); }
.qr-shot-code canvas { display:block; width:100% !important; height:100% !important; }
.qr-shot-corners { position:absolute; inset:5px; border:3px solid #e4511a; border-radius:22px; pointer-events:none; }
.qr-shot-name { margin:8px 0 0; font-size:15px; font-weight:850; }
.qr-shot-help { margin-top:10px; color:#78412e; font-size:14px; }
.qr-shot-done { width:100%; min-height:52px; margin-top:18px; padding:14px 18px; border:0; border-radius:18px; background:#e4511a; color:#fff; font:inherit; font-size:16px; font-weight:850; cursor:pointer; touch-action:manipulation; transition:filter .12s ease,box-shadow .12s ease; }
.qr-shot-done:active { filter:brightness(.9); }
.qr-shot-done:focus-visible { outline:3px solid #281006; outline-offset:3px; }
@media (max-height:690px) {
  .qr-shot-card { padding-top:18px; border-radius:26px; }
  .qr-shot-title { font-size:39px; }
  .qr-shot-text { margin-top:10px; font-size:14px; }
  .qr-shot-code { width:min(51vw,190px); margin-top:12px; }
  .qr-shot-help { font-size:13px; }
  .qr-shot-done { margin-top:12px; }
}
@media (prefers-reduced-motion:reduce) { .qr-shot-done { transition:none; } }

/* Разовый опрос о приложении при входе. */
body.app-review-open { overflow:hidden; }
.app-review { position:fixed; inset:0; z-index:11900; display:grid; place-items:center; padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom)); }
.app-review.hidden { display:none; }
.app-review-backdrop { position:absolute; inset:0; background:rgba(49,17,6,.72); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.app-review-card { position:relative; width:min(100%,430px); max-height:100%; overflow-y:auto; overscroll-behavior:contain; box-sizing:border-box; padding:28px 20px 20px; border-radius:28px; background:#fffaf6; color:#361307; box-shadow:0 28px 80px rgba(52,15,3,.4); }
.app-review-mark { position:absolute; top:-38px; right:-36px; width:150px; height:150px; background:#f2c2ab; -webkit-mask:url('../shared/brand/logo-mark.png') center/contain no-repeat; mask:url('../shared/brand/logo-mark.png') center/contain no-repeat; transform:rotate(14deg); pointer-events:none; }
.app-review-title { position:relative; max-width:300px; margin:0; font-family:'A24','TikTok Sans',sans-serif; font-size:clamp(30px,9vw,42px); font-weight:900; line-height:1; letter-spacing:-.025em; color:var(--orange-ink); }
.app-review-question { position:relative; max-width:350px; margin:12px 0 0; font-size:18px; font-weight:800; line-height:1.35; }
.app-review-text { display:block; width:100%; min-height:148px; box-sizing:border-box; margin-top:18px; padding:15px 16px; border:2px solid #efd8cd; border-radius:16px; background:#fff; color:#361307; font:inherit; font-size:16px; font-weight:650; line-height:1.45; resize:vertical; caret-color:var(--orange-ink); }
.app-review-text::placeholder { color:#78584b; opacity:1; }
.app-review-text:focus { border-color:var(--orange-deep); outline:3px solid rgba(200,66,15,.16); outline-offset:2px; }
.app-review-status { margin:10px 2px 0; font-size:14px; font-weight:800; line-height:1.35; }
.app-review-status.is-error { color:#a82f0b; }
.app-review-status.is-success { color:#0d705f; }
.app-review-send,.app-review-later { width:100%; min-height:50px; margin-top:14px; padding:12px 16px; border-radius:15px; font:inherit; font-size:16px; font-weight:850; touch-action:manipulation; }
.app-review-send { background:var(--teal-ink); color:#fff; }
.app-review-send:disabled { opacity:.6; }
.app-review-later { min-height:44px; margin-top:6px; background:transparent; color:#6f3b28; font-size:14px; }
.app-review-send:focus-visible,.app-review-later:focus-visible { outline:3px solid #361307; outline-offset:3px; }
@media (max-height:640px) { .app-review-card { padding-top:20px; border-radius:22px; } .app-review-title { font-size:30px; } .app-review-question { margin-top:8px; font-size:16px; } .app-review-text { min-height:112px; margin-top:12px; } }