/* ===== Базовые сбросы ===== */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bc-milk);
  color: var(--bc-dark);
  font-family: var(--bc-font-inter);
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button { font-family: var(--bc-font-inter); }
h1, h2, h3 { font-family: var(--bc-font-hero); margin: 0; }
p { margin: 0; }

/* 100vh — фолбэк для iOS младше 15.4 и старых Android, где нет dvh.
   Браузер без поддержки dvh просто проигнорирует вторую строку. */
.app {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
}

.screens {
  position: relative;
  width: 100%;
  max-width: 520px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bc-milk);
  box-shadow: var(--bc-shadow-lg);
}

/* ===== Экраны ===== */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .38s ease, transform .38s ease;
  pointer-events: none;
  overflow-y: auto;
  z-index: 1;
}
.screen.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}
.screen.leaving-left {
  opacity: 0;
  transform: translateX(-48px);
}
.screen.leaving-right {
  opacity: 0;
  transform: translateX(48px);
}

.screen-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 22px calc(28px + env(safe-area-inset-bottom, 0px));
  gap: 18px;
  min-height: 100%;
}

/* ===== Фото-фоны экранов (ТЗ раунд 3) =====
   Размытие запечено в самих JPEG — на мобильных filter: blur() во весь экран
   вместе с backdrop-filter на карточках даёт заметные тормоза.
   Слой ::before — только тонировка под палитру бренда и читаемость текста. */
.screen-entry,
.screen-category,
.screen-bridge {
  background-size: cover;
  background-position: center;
  background-attachment: local;
}
.screen-entry::before,
.screen-category::before,
.screen-bridge::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Экран 1 — вечерняя терраса, гирлянды */
.screen-entry {
  background-image: url("assets/bg/entry.jpg");
  background-color: #2A2038;
}
.screen-entry::before {
  background: linear-gradient(180deg, rgba(38,26,64,.34) 0%, rgba(38,26,64,.06) 38%, rgba(38,26,64,.10) 70%, rgba(38,26,64,.30) 100%);
}

/* Экран 2 — ночное окно под дождём, золотое боке */
.screen-category {
  background-image: url("assets/bg/category.jpg");
  background-color: var(--bc-milk);
}
.screen-category::before {
  background: linear-gradient(180deg, rgba(250,250,248,.40) 0%, rgba(250,250,248,.26) 50%, rgba(250,250,248,.44) 100%);
}

/* Экран 4 — терраса с видом на Альпы (холодная гамма → тонировка обязательна) */
.screen-bridge {
  background-image: url("assets/bg/final.jpg");
  background-color: var(--bc-milk);
}
.screen-bridge::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(193,171,229,.34) 0%, transparent 58%),
    linear-gradient(180deg, rgba(250,250,248,.50) 0%, rgba(250,250,248,.32) 40%, rgba(250,250,248,.56) 100%);
}

/* ===== Кнопки ===== */
.btn {
  border: none;
  cursor: pointer;
  border-radius: var(--bc-radius-lg);
  font-family: var(--bc-font-inter);
  font-weight: 800;
  font-size: 16px;
  padding: 16px 24px;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:active { transform: scale(.97); }

.btn-cta {
  background: linear-gradient(165deg, #FFF6D2, var(--bc-yellow));
  color: var(--bc-dark);
  box-shadow: var(--bc-shadow-lavender), inset 0 1px 0 rgba(255,255,255,.8);
}
.btn-cta-glossy {
  background: linear-gradient(135deg, var(--bc-lavender) 0%, var(--bc-yellow) 100%);
  color: var(--bc-dark);
  box-shadow: var(--bc-shadow-md), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-secondary {
  background: linear-gradient(165deg, rgba(255,255,255,.6), var(--bc-lavender-light));
  color: var(--bc-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.btn-secondary-light {
  background: linear-gradient(165deg, rgba(255,255,255,.7), var(--bc-lavender-pale));
  color: var(--bc-dark);
  box-shadow: var(--bc-shadow-sm), inset 0 1px 0 rgba(255,255,255,.8);
  align-self: center;
}
.btn-outline {
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  color: var(--bc-dark);
  border: 1.5px solid var(--bc-lavender);
}
.btn-ghost {
  background: transparent;
  color: var(--bc-gray);
  padding: 10px 14px;
  font-size: 14px;
}
.btn:disabled {
  opacity: .4;
  pointer-events: none;
}
.btn-row {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.btn-row .btn { flex: 1; }
.btn-row .btn-ghost { flex: 0 0 auto; }

/* ===== Плавающая корзина ===== */
.cart-float {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(165deg, rgba(255,255,255,.85), rgba(255,255,255,.5));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--bc-radius-lg);
  padding: 10px 18px 10px 14px;
  box-shadow: var(--bc-shadow-lavender), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -8px 16px -10px rgba(193,171,229,.35);
  transition: transform .25s ease;
}
.cart-float[hidden] { display: none; }
.cart-float.bump { animation: cartBump .45s ease; }
@keyframes cartBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  60% { transform: scale(.95); }
  100% { transform: scale(1); }
}
.cart-emoji { font-size: 20px; }
.cart-sum {
  font-weight: 800;
  font-size: 15px;
  color: var(--bc-dark);
  min-width: 4ch;
}

/* ===== Экран 1 — Вход ===== */
.screen-entry .screen-inner {
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px));
}

.entry-title {
  width: 100%;
  font-family: var(--bc-font-hero);
  font-size: 36px; /* фолбэк, если браузер не знает clamp() */
  font-size: clamp(30px, 9.2vw, 44px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 4px 26px rgba(28,18,48,.45);
}
.entry-title span {
  display: block;
  width: 100%;
}
.entry-subtitle-pill {
  display: inline-block;
  margin: 2px auto 0;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6);
  color: var(--bc-dark);
  font-family: var(--bc-font-hero);
  font-weight: 300;
  font-size: 14px;
  border-radius: var(--bc-radius-lg);
  padding: 7px 18px;
  box-shadow: var(--bc-shadow-xs), inset 0 1px 0 rgba(255,255,255,.8);
  white-space: nowrap;
}
.focus-blur {
  filter: blur(1.6px);
  opacity: .92;
  text-align: left;
}
.focus-sharp {
  filter: none;
  text-align: right;
}

.card-stack {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 30px auto 2px;
}
.stack-card {
  position: absolute;
  left: 5%;
  right: 5%;
  height: 100%;
  border-radius: 26px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 26px rgba(45,31,78,.14);
  padding: 18px;
  overflow: hidden;
}
.stack-card-1 {
  top: -18px;
  transform: scale(0.96);
  opacity: .88;
}
.stack-card-2 {
  top: -34px;
  transform: scale(0.91);
  opacity: .6;
  background: rgba(255,255,255,.72);
}
.stack-card-3 {
  top: -50px;
  transform: scale(0.86);
  opacity: .38;
  background: rgba(255,255,255,.6);
}
.stack-avatar {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(155deg, var(--bc-lavender), var(--bc-pink));
  margin-bottom: 10px;
  filter: blur(1px);
}
.stack-line {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(122,110,142,.35);
  margin-bottom: 6px;
  filter: blur(1.5px);
  width: 80%;
}
.stack-line-short {
  width: 50%;
}

.main-card {
  position: relative;
  background: rgba(255,255,255,.94);
  border-radius: 26px;
  padding: 18px;
  text-align: left;
  box-shadow: 0 20px 44px rgba(45,31,78,.22);
}
.main-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.main-card-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(155deg, var(--bc-lavender), var(--bc-pink));
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}
.main-card-avatar.avatar-fallback::after {
  content: "СЛ";
  color: #fff;
  font-family: var(--bc-font-inter);
  font-weight: 800;
  font-size: 15px;
}
.main-card-who {
  flex: 1;
  min-width: 0;
}
.main-card-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--bc-dark);
  line-height: 1.2;
}
.main-card-caption {
  font-family: var(--bc-font-hero);
  font-weight: 300;
  font-size: 11px;
  color: var(--bc-gray);
  opacity: .72;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-card-share {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bc-lavender-pale);
  color: var(--bc-lavender-deep, #8F72C4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-card-share svg { width: 16px; height: 16px; display: block; }
.main-card-heading {
  font-family: var(--bc-font-inter);
  font-weight: 800;
  font-size: 17px;
  color: var(--bc-dark);
  margin-bottom: 8px;
}
.main-card-text {
  font-family: var(--bc-font-inter);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bc-dark-mid);
  margin-bottom: 10px;
}
.main-card-text-accent {
  font-family: var(--bc-font-babayka);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.35;
  color: var(--bc-dark);
  margin-bottom: 0;
}

.entry-cta {
  margin-top: 4px;
  width: 100%;
  max-width: 320px;
  background: linear-gradient(135deg, var(--bc-lavender) 0%, var(--bc-milk) 100%);
  animation: entryCtaPulse 2.2s ease-in-out infinite;
}
.cta-arrow { font-weight: 400; }
@keyframes entryCtaPulse {
  0%, 100% { transform: scale(1); box-shadow: var(--bc-shadow-lavender), inset 0 1px 0 rgba(255,255,255,.8); }
  50% { transform: scale(1.045); box-shadow: 0 0 0 10px rgba(193,171,229,.22), var(--bc-shadow-lavender); }
}

/* ===== Экраны категорий ===== */
.screen-category .screen-inner {
  gap: 12px;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

.category-title {
  font-size: 21px;
  color: var(--bc-dark);
  text-shadow: 0 1px 10px rgba(255,255,255,.65);
}

/* Шкала прогресса — толстая полоса, подпись внутри (ТЗ 2.1) */
.bc-progress-track {
  position: relative;
  height: 34px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 2px 5px rgba(45,31,78,.10);
}
.bc-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.bc-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bc-font-inter);
  font-weight: 800;
  font-size: 12.5px;
  color: var(--bc-dark);
  text-shadow: 0 1px 3px rgba(255,255,255,.75);
  pointer-events: none;
}

/* minmax(0,1fr) — иначе длинные названия товаров распирают колонку за край экрана.
   grid-auto-rows: 1fr — все ряды равной высоты, т.е. все карточки одного размера
   по самой высокой (у товаров разной длины названия/подписи). */
.screen-category .bc-product-grid {
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: 1fr;
}
.item-card {
  aspect-ratio: auto;
  height: 100%;
  min-height: var(--item-card-h, auto);
}
.item-card > * { min-width: 0; }
.item-card { padding: 13px; }
.item-card .title { margin-top: 5px; font-size: 13.5px; }
.item-card .price { font-size: 12.5px; }
.item-card .caption { font-size: 10.5px; }
.item-card .add-btn { padding: 7px 12px; font-size: 11px; }

/* Карточка товара — стекло + объём (ТЗ 2.5, 2.7) */
.item-card {
  position: relative;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--bc-radius-sm);
  box-shadow:
    0 14px 30px -10px rgba(45,31,78,.30),
    0 3px 8px rgba(45,31,78,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
/* Состояние «в корзине» — заметно ярче (ТЗ 2.4), в пастельной зелёной палитре */
.item-card.selected {
  border-color: var(--bc-green);
  background: linear-gradient(165deg, rgba(255,255,255,.80), rgba(101,149,141,.26));
  box-shadow:
    0 0 0 2px rgba(101,149,141,.40),
    0 16px 32px -10px rgba(62,107,99,.40),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.item-card.selected .caption { color: var(--bc-dark-mid); }
.item-card.selected .price { color: var(--bc-dark); }
.item-card.bump { animation: cardBump .4s ease; }
@keyframes cardBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

/* Иконка товара — скруглённая подложка вместо острого белого квадрата (ТЗ 2.2) */
.item-card .icon {
  border-radius: 16px;
  background: #FFFFFF;
  overflow: hidden;
  box-shadow:
    0 8px 16px -6px rgba(45,31,78,.35),
    0 2px 4px rgba(45,31,78,.12),
    inset 0 1px 0 rgba(255,255,255,1);
}
.item-card .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Кнопка «Добавить» — ярче и объёмнее (ТЗ 2.3) */
.add-btn {
  cursor: pointer;
  font-weight: 800;
  background: linear-gradient(165deg, #A98BDE, #8A66C6) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 6px 14px -4px rgba(143,114,196,.55),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -3px 6px -3px rgba(93,66,142,.45);
  transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.add-btn.in-cart {
  background: linear-gradient(165deg, #6FA79E, #4E7D74) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 6px 14px -4px rgba(62,107,99,.55),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 6px -3px rgba(40,80,72,.45);
}
.add-btn:active { transform: scale(.96); }
.add-btn-icon { font-size: 13px; }

/* Кнопки навигации на экране категорий (ТЗ 2.6) */
.screen-category .btn-cta {
  box-shadow:
    0 14px 28px -8px rgba(45,31,78,.40),
    0 3px 8px rgba(45,31,78,.14),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.screen-category .btn-ghost {
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: var(--bc-radius-lg);
  color: var(--bc-dark-mid);
  font-weight: 800;
}

/* Летящая иконка в корзину */
.fly-emoji {
  position: fixed;
  width: 26px;
  height: 26px;
  object-fit: contain;
  z-index: 60;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.3,.6,.4,1), opacity .55s ease;
}

/* ===== Экран 7 — Результат (банковское приложение) ===== */
.screen-result {
  background:
    radial-gradient(circle at 15% 10%, var(--bc-lavender-light) 0%, transparent 42%),
    radial-gradient(circle at 90% 15%, var(--bc-pink-light) 0%, transparent 38%),
    radial-gradient(circle at 30% 95%, var(--bc-caramel-light) 0%, transparent 40%),
    var(--bc-milk);
}
.screen-result .screen-inner {
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.bank-greeting {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bc-font-hero);
  font-size: 17px;
  color: var(--bc-dark);
}
.bank-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  object-fit: cover;
  object-position: 50% 28%;
  box-shadow: var(--bc-shadow-xs);
}

.bank-account-card { padding: 0; overflow: hidden; }
.bc-bank-account .label { font-family: var(--bc-font-inter); }
.bc-bank-account .sum { color: var(--bc-dark); }

/* Иконка заполняет круг целиком, без углов белого квадрата (ТЗ 3.1) */
.bc-bank-chip-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  overflow: visible;
  padding: 0;
}
.bc-bank-chip { width: auto; min-width: 0; font-size: 10.5px; }
.bc-bank-chip .badge { width: 46px; height: 46px; }
.bc-bank-chip .badge {
  overflow: hidden;
  background: #FFFFFF;
  box-shadow:
    0 6px 14px -5px rgba(45,31,78,.35),
    inset 0 1px 0 rgba(255,255,255,1);
}
.bc-bank-chip .badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  display: block;
}

/* Текст плашки счёта — по центру (ТЗ 3.2) */
.bank-argument p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bc-dark-mid);
  padding: 18px;
  text-align: center;
}

/* Кнопка «Да хочу» (ТЗ 3.3) */
.bank-cta {
  width: 100%;
  justify-content: center;
  font-family: var(--bc-font-hero);
  font-weight: 800;
  font-size: 20px;
  color: var(--bc-dark);
  opacity: 0;
  transform: translateY(10px);
  animation: none;
  transition: opacity .4s ease, transform .4s ease;
}
.screen-result.result-ready .bank-cta { animation: bc-pulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .screen-result.result-ready .bank-cta { animation: none; }
}
.screen-result.result-ready .bank-cta {
  opacity: 1;
  transform: translateY(0);
}

.confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  border-radius: 3px;
  animation: confettiFall 2.4s ease-in forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(320px) rotate(340deg); opacity: 0; }
}

/* ===== Экран 8 — Финальный (ТЗ раунд 3, п. 4.1–4.9) ===== */
.screen-bridge .screen-inner {
  justify-content: flex-start;
  gap: 11px;
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px));
}
/* 4.8 — сумма меньше и выше */
.bridge-sum-hero {
  text-align: center;
  padding: 0;
}
.bridge-sum-value {
  font-family: var(--bc-font-hero);
  font-size: 32px;
  font-weight: 800;
  color: var(--bc-dark);
  letter-spacing: -.01em;
  text-shadow: 0 1px 12px rgba(255,255,255,.7);
}
.bridge-statement {
  text-align: center;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.42;
  color: var(--bc-dark);
  max-width: 330px;
  margin: 0 auto;
  text-shadow: 0 1px 10px rgba(255,255,255,.65);
}

/* 4.4 — обе карточки на стекле, без цветной полоски слева */
.bridge-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  text-align: center;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    0 16px 34px -12px rgba(45,31,78,.35),
    0 3px 8px rgba(45,31,78,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.bridge-card p {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--bc-dark-mid);
  text-align: center;
}
/* 4.1 — 3D-иконка вместо плоского «?».
   Белый фон самой PNG торчал бы острыми углами — прячем в скруглённую подложку. */
.bridge-card-icon {
  width: 42px;
  height: 42px;
  object-fit: cover;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow:
    0 8px 16px -6px rgba(45,31,78,.35),
    0 2px 4px rgba(45,31,78,.12),
    inset 0 1px 0 rgba(255,255,255,1);
}

.bridge-card-label {
  display: inline-block;
  background: var(--bc-green-pale);
  color: var(--bc-green);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: var(--bc-radius-lg);
  padding: 4px 12px;
}
.bridge-card-good p { color: var(--bc-dark); }

/* 4.5 — абзац по центру */
.bridge-lead {
  font-size: 13px;
  line-height: 1.45;
  color: var(--bc-dark);
  text-align: center;
  text-shadow: 0 1px 8px rgba(255,255,255,.85), 0 0 18px rgba(255,255,255,.7);
}

/* 4.6 — три плашки в один горизонтальный ряд */
.bridge-tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.bridge-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--bc-radius-sm);
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  color: var(--bc-dark);
  box-shadow: 0 10px 22px -10px rgba(45,31,78,.32), inset 0 1px 0 rgba(255,255,255,.9);
}
/* Та же скруглённая подложка, что у иконки «?» — иначе белый фон PNG торчит углами */
.bridge-tag-icon {
  width: 32px;
  height: 32px;
  object-fit: cover;
  flex: 0 0 auto;
  border-radius: 11px;
  background: #FFFFFF;
  box-shadow:
    0 6px 12px -5px rgba(45,31,78,.35),
    0 1px 3px rgba(45,31,78,.12),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* 4.7 — CTA во всю ширину, графитовый градиент, молочный текст */
.bridge-cta {
  width: 100%;
  margin-top: 2px;
  justify-content: center;
  font-family: var(--bc-font-hero);
  font-weight: 800;
  font-size: 16px;
  color: var(--bc-milk);
  background:
    linear-gradient(180deg, rgba(250,250,248,.18) 0%, rgba(250,250,248,0) 55%),
    var(--bc-dark-gradient);
  box-shadow:
    0 18px 36px -12px rgba(28,28,28,.60),
    0 4px 10px rgba(28,28,28,.25),
    inset 0 1px 0 rgba(250,250,248,.28);
}
.bridge-toast {
  text-align: center;
  font-size: 13px;
  color: var(--bc-gray);
  background: var(--bc-lavender-pale);
  border-radius: var(--bc-radius-lg);
  padding: 10px 14px;
}

/* Короткие экраны (iPhone SE и т.п.) — финал должен помещаться без скролла (ТЗ 4.9) */
@media (max-height: 720px) {
  .screen-bridge .screen-inner { gap: 8px; padding-top: 10px; }
  .bridge-sum-value { font-size: 27px; }
  .bridge-statement { font-size: 13px; }
  .bridge-card { padding: 11px 14px; gap: 6px; }
  .bridge-card p { font-size: 12.5px; }
  .bridge-card-icon { width: 32px; height: 32px; }
  .bridge-lead { font-size: 12px; }
  .bridge-tag { padding: 8px 6px; font-size: 10px; }
  .bridge-tag-icon { width: 28px; height: 28px; border-radius: 10px; }
  .bridge-cta { font-size: 15px; padding: 12px 20px; }
}

/* ===== Адаптив ===== */
@media (min-width: 560px) {
  .app { padding: 24px 0; align-items: center; }
  .screens { border-radius: 28px; min-height: 780px; overflow: hidden; }
  .screen { overflow-y: auto; }
}