/* ============ Каркас приложения ============ */

#app { min-height: 100vh; }
#views {
  padding: calc(var(--sp-4) + var(--safe-t)) max(var(--sp-4), var(--safe-r))
           calc(var(--tabbar-h) + var(--safe-b) + var(--sp-6) + 12px) max(var(--sp-4), var(--safe-l));
  max-width: var(--maxw); margin: 0 auto;
}
.view { display: none; }
.view.on { display: block; animation: viewIn var(--dur-3) var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Появление карточек списка с лёгким стаггером (--i задаётся в JS) */
.reveal { animation: riseIn var(--dur-3) var(--ease) both; animation-delay: calc(var(--i, 0) * 26ms); }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============ Таббар (плавающая пилюля) ============ */
#tabbar {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--safe-b) + 10px); z-index: 50;
  height: var(--tabbar-h);
  max-width: calc(var(--maxw) - 24px); margin-inline: auto;
  padding: 6px; display: flex; align-items: stretch; gap: 4px;
  border-radius: var(--r-bar); overflow: hidden;
}
.tab {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; border: 0; background: transparent; color: var(--text-faint);
  font: inherit; cursor: pointer; transition: color var(--dur-2) var(--ease);
}
/* Индикатор активной вкладки — глассовая «пилюля» за иконкой+подписью */
.tab::before {
  content: ""; position: absolute; inset: 2px 4px; z-index: 0;
  border-radius: calc(var(--r-bar) - 6px);
  background: var(--accent-soft);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .18), inset 0 0 0 1px var(--accent-line);
  -webkit-backdrop-filter: var(--bf-lozenge); backdrop-filter: var(--bf-lozenge);
  opacity: 0; transform: scale(.82);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.tab.on::before { opacity: 1; transform: scale(1); }
.tab svg, .tab span { position: relative; z-index: 1; }
.tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-2) var(--ease), stroke-width var(--dur-2) var(--ease); }
.tab span { font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: -.01em; line-height: 1; }
.tab.on { color: var(--accent); }
.tab.on svg { transform: translateY(-1px); stroke-width: 2; }
.tab:active svg { transform: scale(.9); }
/* Акцентный таб «Радар»: иконка всегда подсвечена; активный — с glow. */
.tab-accent svg { color: var(--accent); }
.tab-accent.on::before {
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .22),
              inset 0 0 0 1px var(--accent-line), var(--ring-accent);
}

/* ============ Заголовки ============ */
.page-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-1) 2px var(--sp-4); }
.page-h h1 { font-size: var(--fs-display); font-weight: var(--fw-heavy); letter-spacing: -.022em; line-height: 1.15; }
.sec-h { display: flex; align-items: center; justify-content: space-between; margin: var(--sp-5) 2px var(--sp-3); }
.sec-h h2 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-dim); text-transform: uppercase; letter-spacing: .02em; }
.sec-h .more { font-size: var(--fs-sm); color: var(--accent); cursor: pointer; font-weight: var(--fw-semibold); }

/* ============ Карточки-строки ============ */
.row-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); margin-bottom: var(--sp-2); cursor: pointer;
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease);
}
.row-card:active { transform: scale(.985); }
.row-img {
  width: 48px; height: 48px; border-radius: var(--r-sm); flex: none;
  background: rgba(127, 127, 127, .10); object-fit: cover;
  box-shadow: inset 0 0 0 1px var(--glass-border-soft);
}
.row-img.lg { width: 56px; height: 56px; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: var(--fw-bold); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.row-sub { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-end { text-align: right; flex: none; }
.row-price { font-weight: var(--fw-bold); font-size: 17px; display: flex; align-items: baseline; gap: 3px; justify-content: flex-end; }
.row-price .ton { color: var(--text-faint); font-size: 11px; font-weight: var(--fw-semibold); text-transform: lowercase; }
.row-end .badge { margin-top: 4px; }

/* ============ Сгруппированный inset-список (iOS) ============
   ОДИН стеклянный контейнер + строки, разделённые hairline-линиями.
   Заменяет стопку отдельных .glass-card строк → один backdrop вместо N
   (перф длинных списков сохраняется не хаком, а структурой). */
.list-group {
  position: relative; margin: 0 0 var(--sp-3);
  border-radius: var(--r-md); overflow: hidden;
  background:
    radial-gradient(120% 70% at 0% 0%, var(--sheen), transparent 45%),
    var(--glass);
  -webkit-backdrop-filter: var(--bf-card); backdrop-filter: var(--bf-card);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--sh-2);
}
.list-row {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: var(--sp-3) var(--sp-4); cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.list-row:active { background: rgba(127, 127, 127, .12); }
@media (hover: hover) { .list-row:hover { background: rgba(127, 127, 127, .05); } }
/* Разделитель только МЕЖДУ строками; с отступом слева (под текст, не под аватар). */
.list-row + .list-row::before {
  content: ""; position: absolute; top: 0;
  left: var(--row-sep-inset, var(--sp-4)); right: 0;
  height: 1px; transform: scaleY(.5); transform-origin: top;
  background: var(--hairline);
}
.list-row.has-media { --row-sep-inset: 76px; }   /* 16 pad + 48 img + 12 gap */
.list-row.stacked { flex-direction: column; align-items: stretch; gap: var(--sp-2); }

/* ============ Обзор ============ */
/* .hero — только ячейка .hero-grid; отступ снизу даёт сетка, не сама карточка. */
.hero { padding: var(--sp-5); }
.hero .t { font-size: var(--fs-sm); color: var(--text-dim); font-weight: var(--fw-semibold); }
.hero .v { font-size: var(--fs-title); font-weight: var(--fw-heavy); margin-top: 2px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.hero-grid .glass-card { padding: var(--sp-4); }

/* ============ Поиск ============ */
.search-wrap { position: relative; margin-bottom: var(--sp-4); }
.search-wrap svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--text-faint); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.search-wrap .input { padding-left: 44px; }
.grid-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.cell {
  padding: var(--sp-3) var(--sp-2) var(--sp-3); text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: transform var(--dur-1) var(--ease);
}
.cell:active { transform: scale(.96); }
.cell img { width: 52px; height: 52px; border-radius: var(--r-sm); background: rgba(127, 127, 127, .10); }
.cell .n { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--text-dim); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .p { font-size: var(--fs-xs); font-weight: var(--fw-heavy); }

/* Деталка модели */
.detail-head { display: flex; flex-direction: column; align-items: center; padding: var(--sp-2) 0 var(--sp-1); }
.detail-head img { width: 112px; height: 112px; border-radius: var(--r-xl); background: rgba(127, 127, 127, .10); box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 24px -6px rgba(0, 0, 0, .30); }
.detail-head .nm { font-size: var(--fs-lg); font-weight: var(--fw-heavy); margin-top: var(--sp-3); }
.detail-head .cl { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 2px; }
/* Маркет-блок = inset-группа (без своего backdrop — лист-шит уже размывает). */
.market-block { background: rgba(127, 127, 127, .05); border: 1px solid var(--glass-border-soft); border-radius: var(--r-md); overflow: hidden; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; margin-top: var(--sp-3); }
.market-block .mh { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
.market-block .mh b { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.market-block .mb-foot { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.kv { position: relative; display: flex; justify-content: space-between; padding: 9px var(--sp-4); font-size: var(--fs-sm); }
.kv + .kv::before { content: ""; position: absolute; top: 0; left: var(--sp-4); right: var(--sp-4); height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--hairline); }
.kv .k { color: var(--text-dim); }
.kv .v { font-weight: var(--fw-bold); }

/* Список моделей в шите коллекции: флор — справа, как первичное значение. */
.model-row { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: 9px 6px; border-radius: var(--r-md); cursor: pointer; min-height: 60px; transition: background var(--dur-1) var(--ease); }
.model-row:active { background: rgba(127, 127, 127, .10); }
.model-row + .model-row::before { content: ""; position: absolute; top: 0; left: 66px; right: 6px; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--hairline); }
.model-row img { width: 48px; height: 48px; border-radius: var(--r-sm); flex: none; background: rgba(127, 127, 127, .10); box-shadow: inset 0 0 0 1px var(--glass-border-soft); }
.model-row .mr-main { flex: 1; min-width: 0; }
.model-row .mr-name { font-weight: var(--fw-bold); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-row .mr-name .rar { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--text-faint); margin-left: 6px; }
.model-row .mr-sub { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 2px; }
.model-row .mr-end { text-align: right; flex: none; padding-left: var(--sp-2); }
.model-row .mr-pr { font-weight: var(--fw-heavy); font-size: var(--fs-md); white-space: nowrap; }
.model-row .mr-pr .ton { color: var(--text-faint); font-size: 11px; font-weight: var(--fw-semibold); text-transform: lowercase; margin-left: 2px; }
.model-row .mr-pr.none { color: var(--text-faint); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
/* «Все модели» (Задача 4): лид-глиф вместо превью-картинки, выровнен по 48px. */
.model-row .pick-lead { width: 48px; }

/* Деталка: герой-флор движка */
.q-hero { padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-3); }
.q-hero .lbl { font-size: var(--fs-2xs); color: var(--text-faint); font-weight: var(--fw-semibold); letter-spacing: .02em; }
.q-hero .big { font-size: 34px; font-weight: var(--fw-heavy); letter-spacing: -.022em; margin-top: 4px; line-height: 1.05; }
.q-hero .big .ton { font-size: var(--fs-lg); color: var(--accent); font-weight: var(--fw-bold); margin-left: 6px; }
/* Сравнение маркетов: две read-only пилюли (дешевле = accent). */
.q-hero .cmp { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.q-hero .bd-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }

/* Бейдж «live» с пульсом */
.live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-full); font-size: var(--fs-2xs); font-weight: var(--fw-bold); background: var(--green-soft); color: var(--green); }
.live-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 1.8s var(--ease) infinite; }
.live-badge.off { background: rgba(127, 127, 127, .12); color: var(--text-dim); }
.live-badge.off .dot { background: var(--text-faint); animation: none; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 155, .5); }
  70% { box-shadow: 0 0 0 6px rgba(52, 211, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 155, 0); }
}

/* ============ Карточки-превью лотов (Задача 3) ============
   Каждый лот MRKT/Portals — как настоящий подарок: фон (backdrop) + узор
   (symbol) + модель. Сетка по 4 в ряд (перенос), внутри маркет-блока. */
.gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.gift-card { cursor: pointer; min-width: 0; transition: transform var(--dur-1) var(--ease); }
.gift-card:active { transform: scale(.94); }
/* Композиция превью: радиальный фон → узор (mask+patternColor) → модель.
   Фолбэк --c/--e (нет backdrop у лота: напр. Portals флор-лот без инстанса,
   сессия 14) — ПРИЯТНЫЙ нейтральный слейт (не голый near-black): мягче и
   «дизайннее» прежнего #20222b/#0d0e12, читается как осознанный нейтральный фон,
   не как пустота. Когда backdrop есть — --c/--e инлайн перекрывают фолбэк
   (giftPreview), поэтому лоты С фоном выглядят БАЙТ-В-БАЙТ как раньше. */
.gift-img { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden;
  background: radial-gradient(circle at 50% 42%, var(--c, #353b48), var(--e, #181b23));
  box-shadow: inset 0 0 0 1px var(--glass-border-soft); }
/* Узор как у нативного подарка Telegram: мелкие символы РОВНОЙ СЕТКОЙ со
   смещёнными рядами и РАВНЫМИ ЗАЗОРАМИ (зазор ≈ символ), полупрозрачные, тон
   patternColor. Размер символа — mask-size 12% (== PAT_S в ui.js); сами позиции
   слоёв-символов задаёт ui.giftPreview (multi-layer no-repeat — даёт зазоры,
   которых repeat-впритык не давал). */
.gift-pat { position: absolute; inset: 0; opacity: .38; pointer-events: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 12%; mask-size: 12%; }
.gift-model { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .28)); }
.gp-meta { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 5px; }
.gp-num { font-size: var(--fs-2xs); color: var(--text-faint); font-weight: var(--fw-semibold);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-pr { font-size: var(--fs-sm); font-weight: var(--fw-heavy); display: inline-flex; align-items: baseline; gap: 2px; }
.gp-pr .ton { font-size: 10px; color: var(--text-faint); font-weight: var(--fw-semibold); text-transform: lowercase; }
.gift-card.deal .gp-pr, .gift-card.deal .gp-pr .ton { color: var(--green); }
.gift-card.deal .gift-img { box-shadow: inset 0 0 0 1.5px var(--green); }
/* Узкие экраны: 3 в ряд, чтобы карточки не сплющивались. */
@media (max-width: 380px) { .gift-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============ Карточка лота (шторка, Задача 2 / сессия 12) ============
   Тап по лоту → наша Liquid-Glass шторка: крупное АНИМИРОВАННОЕ превью (Lottie
   поверх статичной модели — см. ui.giftPreviewAnimated), имя/номер, цена,
   таблица атрибутов, кнопка «Купить». */
.lot-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lot-hero { width: 58%; max-width: 220px; margin: 2px auto var(--sp-3); }
/* Крупный радиус у героя-превью (перекрывает --r-sm у .gift-img). */
.lot-gift-img { border-radius: var(--r-lg); }
/* Анимация (svg от lottie) лежит ровно поверх статичной модели (.gift-model). */
.gift-anim { position: absolute; inset: 8%; pointer-events: none; }
.gift-anim svg { width: 100% !important; height: 100% !important; display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28)); }
.lot-title { display: inline-flex; align-items: baseline; gap: 8px; justify-content: center;
  font-size: var(--fs-title); font-weight: var(--fw-heavy); letter-spacing: -.01em; }
.lot-num { font-size: var(--fs-md); color: var(--text-faint); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; }
.lot-coll { color: var(--text-dim); font-size: var(--fs-sm); margin-top: 2px; }
.lot-price { font-size: 25px; font-weight: var(--fw-heavy); margin: var(--sp-2) 0 var(--sp-3);
  font-variant-numeric: tabular-nums; }
.lot-price .ton { font-size: var(--fs-lg); color: var(--accent); font-weight: var(--fw-bold); margin-left: 5px; }
.lot-attrs { width: 100%; display: flex; flex-direction: column; gap: 2px;
  border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-3); }
.lot-attr { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: 11px 14px; background: rgba(127, 127, 127, .07); }
.lot-attr .la-k { color: var(--text-dim); font-size: var(--fs-sm); flex: none; }
.lot-attr .la-v { font-weight: var(--fw-semibold); font-size: var(--fs-sm); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Редкость атрибута (Задача 1, сессия 15): мелкий приглушённый чип справа. */
.lot-attr .la-rar { margin-left: 7px; color: var(--text-dim); font-weight: var(--fw-medium);
  font-size: var(--fs-xs); opacity: .85; }
.lot-buy { margin-top: 2px; }

/* Длинные списки (Поиск/Обзор/Лента) теперь — ОДИН .list-group с единственным
   backdrop-filter (перф сохранён структурой, а не отключением размытия строк). */

/* ============ Радар (фильтры) ============ */
.slots-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.slots-bar .t { font-size: var(--fs-sm); color: var(--text-dim); font-weight: var(--fw-semibold); }
.slots-bar .v { font-size: var(--fs-lg); font-weight: var(--fw-heavy); margin-top: 1px; }
.sub-card { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); border-radius: var(--r-md); transition: opacity var(--dur-2) var(--ease); }
.sub-top { display: flex; align-items: center; gap: var(--sp-3); }
/* Фото подарка по цели фильтра (Задача 6): круглый кроп, фолбэк — глиф. */
.sub-thumb { width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden; background: rgba(127, 127, 127, .10); box-shadow: inset 0 0 0 1px var(--glass-border-soft); display: flex; align-items: center; justify-content: center; }
.sub-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sub-thumb.glyph { background: var(--accent-soft); box-shadow: none; }
.sub-thumb.glyph .sub-thumb-ico { color: var(--accent); display: inline-flex; }
.sub-thumb.glyph.gold { background: var(--gold-soft); }
.sub-thumb.glyph.gold .sub-thumb-ico { color: var(--gold); }
.sub-name { flex: 1; min-width: 0; font-weight: var(--fw-bold); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-desc { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 6px; line-height: 1.4; }
.sub-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.sub-foot .sp { flex: 1; }
.fab-new { margin-top: var(--sp-4); }

/* Конструктор: список выбора */
.pick-list { max-height: 56vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; -webkit-overflow-scrolling: touch; }
.pick-row { display: flex; align-items: center; gap: var(--sp-3); padding: 9px 6px; border-radius: var(--r-md); cursor: pointer; min-height: 56px; transition: background var(--dur-1) var(--ease); }
.pick-row:active { background: rgba(127, 127, 127, .10); }
.pick-row img { width: 42px; height: 42px; border-radius: var(--r-xs); background: rgba(127, 127, 127, .10); flex: none; box-shadow: inset 0 0 0 1px var(--glass-border-soft); }
.pick-row .bd-dot { width: 28px; height: 28px; border-radius: 50%; flex: none; border: 2px solid var(--glass-border); margin: 0 7px; }
.pick-row .pm { flex: 1; min-width: 0; }
.pick-row .pn { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.pick-row .ps { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 1px; }
.pick-row .chk {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  border: 2px solid var(--glass-border); display: flex; align-items: center; justify-content: center;
  color: transparent; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.pick-row.sel .chk { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-3); }
.preset {
  padding: var(--sp-4) var(--sp-3); text-align: center; cursor: pointer; border-radius: var(--r-md);
  background: rgba(127, 127, 127, .07); border: 1px solid var(--glass-border-soft);
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.preset:active { transform: scale(.96); }
.preset .pv { font-size: var(--fs-lg); font-weight: var(--fw-heavy); }
.preset .pl { font-size: var(--fs-2xs); color: var(--text-dim); margin-top: 4px; }
.preset.sel { background: var(--accent-soft); border-color: var(--accent-line); }
.preset.sel .pv { color: var(--accent); }

/* ============ Активность ============ */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.stat-grid .glass-card { padding: var(--sp-3) var(--sp-4); }
.stat-grid .t { font-size: var(--fs-xs); color: var(--text-dim); font-weight: var(--fw-semibold); }
.stat-grid .v { font-size: var(--fs-title); font-weight: var(--fw-heavy); margin-top: 3px; }
.hit-card { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.hit-top { display: flex; align-items: center; gap: var(--sp-3); }
.hit-title { flex: 1; min-width: 0; font-weight: var(--fw-bold); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit-sub { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit-foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }

/* ============ Профиль ============ */
.profile-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--avatar-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-title); font-weight: var(--fw-heavy); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), var(--sh-2);
}
/* Аватарка Telegram (через бэкенд-прокси /api/me/avatar) — поверх инициалов. */
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); min-height: 56px; cursor: pointer; transition: background var(--dur-1) var(--ease); }
.menu-row:active { background: rgba(127, 127, 127, .07); }
.menu-row + .menu-row { border-top: 1px solid var(--hairline); }
.menu-row .mi { flex: 1; font-weight: var(--fw-semibold); }
.menu-row .mv { color: var(--text-dim); font-size: var(--fs-sm); }
.menu-group { padding: 0; overflow: hidden; margin-bottom: var(--sp-3); }

/* ============ Карточка канала профитных сделок (Профиль) ============ */
.channel-card { padding: var(--sp-4); margin-bottom: var(--sp-3); }
.channel-card .cc-row { display: flex; align-items: center; gap: var(--sp-3); }
.channel-card .cc-badge {
  width: 44px; height: 44px; border-radius: var(--r-md); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line);
}
/* Вариант с картинкой подарка: круглый кроп. Изображение полностью заполняет
   бейдж. ЗАДАЧА 5 (сессия 12): убран ЖЁЛТЫЙ кант и золотой тинт — бейдж подаём
   чисто (нейтральный тонкий ободок + нейтральный фон под загрузку/фолбэк;
   фолбэк-искра при 404 тоже нейтральная, не жёлтая). */
.channel-card .cc-badge-gift {
  border-radius: 50%; padding: 0; overflow: hidden;
  border: none;
  background: rgba(127, 127, 127, .10);
  color: var(--text-dim);
  box-shadow: inset 0 0 0 1px var(--glass-border-soft);
}
.channel-card .cc-gift {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
}
.channel-card .cc-ttl { font-weight: var(--fw-heavy); font-size: var(--fs-lg); letter-spacing: -.01em; }
.channel-card .cc-desc { color: var(--text-dim); font-size: var(--fs-sm); margin-top: 2px; line-height: 1.4; }
.channel-card .cc-status {
  margin-top: var(--sp-3); color: var(--accent); font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
}

/* ============ Bottom sheet ============ */
#sheet-root .sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  z-index: 90; animation: fadeIn var(--dur-2) var(--ease);
}
#sheet-root .sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
  max-width: var(--maxw); margin: 0 auto;
  max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-2) max(var(--sp-4), var(--safe-r)) calc(var(--sp-5) + var(--safe-b)) max(var(--sp-4), var(--safe-l));
  animation: sheetUp var(--dur-3) var(--ease);
}
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--text-faint); opacity: .5; margin: 6px auto 14px; }
.sheet h3 { font-size: var(--fs-lg); font-weight: var(--fw-heavy); margin-bottom: 4px; }
.sheet .sheet-sub { font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: var(--sp-3); line-height: 1.45; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes sheetUp { from { transform: translateY(48px); opacity: .4; } }

/* ============ Тост ============ */
#toast-root { position: fixed; top: calc(var(--sp-3) + var(--safe-t)); left: 0; right: 0; z-index: 120; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); pointer-events: none; padding: 0 var(--sp-4); }
.toast {
  max-width: 100%; padding: 11px 18px; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-align: center; animation: toastIn var(--dur-2) var(--ease);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } }

/* ============ Пустые состояния / ошибки ============ */
.empty { text-align: center; padding: 40px 24px; color: var(--text-dim); }
.empty .e-ico {
  width: 76px; height: 76px; margin: 0 auto var(--sp-4);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, var(--sheen), transparent 60%),
    rgba(127, 127, 127, .08);
  border: 1px solid var(--glass-border-soft);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
/* Пустое состояние «нет фильтров» (сессия 14): анимированный подарок (Lottie)
   вместо круглого глифа. Контейнер прозрачный — подарок «парит» по центру (без
   тёмного квадрата .gift-img); чуть крупнее прежнего глифа-мишени. */
.empty .empty-gift {
  width: 132px; height: 132px; margin: 0 auto var(--sp-4);
}
.empty .empty-gift .gift-img {
  background: none; box-shadow: none; border-radius: 0; overflow: visible;
}
.empty b { color: var(--text); font-weight: var(--fw-bold); }
.hint { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-2); line-height: 1.5; }

.stale-note { font-size: var(--fs-xs); color: var(--gold); margin-top: 6px; }
a { color: var(--accent); }

/* ============ Деградация / состояние ============ */
/* Плашка «цены могли устареть» — золотой тон (не ошибка приложения). */
.stale-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); margin-bottom: var(--sp-3);
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-md);
  font-size: var(--fs-xs); line-height: 1.45; color: var(--gold);
}
.stale-banner .ic { color: var(--gold); flex: none; }
/* «маркеты временно недоступны» — мягкий empty в золотом, без кнопки */
.empty.empty-soft .e-ico { background: linear-gradient(180deg, var(--sheen), transparent 60%), var(--gold-soft); border-color: var(--gold-line); }
.empty.empty-soft .e-ico .ic { color: var(--gold); }
/* Мягкая плашка «не удалось обновить» (Профиль) — с кнопкой повтора. */
.refresh-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); margin-bottom: var(--sp-3);
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  border-radius: var(--r-md);
  font-size: var(--fs-xs); line-height: 1.4; color: var(--red);
}
.refresh-banner .ic { color: var(--red); flex: none; }
.refresh-banner .sp { flex: 1; }
/* Ошибка приложения — красный тон круглого бейджа иконки */
.empty .e-ico.danger { background: linear-gradient(180deg, var(--sheen), transparent 60%), var(--red-soft); border-color: var(--red-line); }
.empty .e-ico.danger .ic { color: var(--red); }

/* Карточка фильтра: пауза приглушена; подсказка под описанием. */
.sub-card.paused { opacity: .56; }
.sub-hint { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 6px; line-height: 1.45; }

/* ============ Иконки в контексте ============ */
.ic-dim { color: var(--text-faint); }
.ic-accent { color: var(--accent); }
.ic-gold { color: var(--gold); }
.e-ico .ic { color: var(--text-faint); }
.badge .ic, .chip .ic { margin-right: 1px; }
/* свотч фона (Black/Onyx) — круглый, как нативное обозначение фона Telegram */
.bd-swatch { width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 1px solid var(--glass-border); display: inline-block; vertical-align: -2px; }
/* ведущая иконка строки-пикера (вместо картинки) */
.pick-lead { width: 42px; display: inline-flex; align-items: center; justify-content: center;
  flex: none; color: var(--accent); }
/* крупная иконка в выборе типа фильтра */
.type-ico { width: 46px; height: 46px; border-radius: var(--r-sm); flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.type-ico.accent { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.type-ico.gold { background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line); }
/* иконка в строке меню (Профиль) */
.menu-ico { width: 30px; display: inline-flex; align-items: center; color: var(--text-dim); flex: none; }
.h3-ico { display: flex; align-items: center; gap: var(--sp-2); }
.h3-ico .ic { color: var(--gold); }
.doc-text { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-dim); }
.doc-p { margin-bottom: var(--sp-3); }
/* delete-кнопка с иконкой */
.btn .ic { flex: none; }

/* ============ Графики флора (Обзор) ============ */
/* Мини-спарклайн в строке трендовой коллекции (между подписью и ценой).
   Цвет наследуется от .up/.down → currentColor у линии/заливки/точки. */
.spark { flex: 0 0 auto; width: 56px; height: 28px; color: var(--text-dim); }
.spark.up { color: var(--green); }
.spark.down { color: var(--red); }
.spark svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Шапка детального экрана коллекции */
.chart-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) 2px var(--sp-3); }
.chart-head .ch-img { width: 52px; height: 52px; border-radius: var(--r-md); flex: none;
  background: rgba(127, 127, 127, .10); object-fit: cover; box-shadow: inset 0 0 0 1px var(--glass-border-soft); }
.chart-head .ch-meta { flex: 1; min-width: 0; }
.chart-head .ch-name { font-size: var(--fs-lg); font-weight: var(--fw-heavy); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-head .ch-floor { display: flex; align-items: baseline; gap: 6px; margin-top: 3px;
  font-size: 23px; font-weight: var(--fw-heavy); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chart-head .ch-floor .ton { font-size: 12px; }
.chart-head .ch-floor .badge { align-self: center; margin-left: 2px; }

.chart-seg { margin-bottom: var(--sp-3); }
.chart-skel { height: 220px; border-radius: var(--r-lg); }
.chart-empty { padding: 44px 24px; }
.chart-cap { font-size: var(--fs-2xs); color: var(--text-faint); text-align: center; margin: var(--sp-2) 0 var(--sp-3); }
.chart-cta { margin-top: var(--sp-2); }

/* Полный график: контейнер + SVG. touch-action: pan-y — вертикальный скролл
   листа сохраняется, горизонтальный жест ловит кросс-хэйр. */
.chart { position: relative; width: 100%; margin: var(--sp-1) 0 var(--sp-2);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.chart.up { color: var(--green); }
.chart.down { color: var(--red); }
.chart.flat { color: var(--text-dim); }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-svg .g-grid { stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-svg .g-lbl { fill: var(--text-faint); font-size: 10px; font-weight: var(--fw-semibold); font-family: var(--ff); }
.chart-svg .g-now { stroke: currentColor; stroke-width: 1; opacity: .5; vector-effect: non-scaling-stroke; }
.chart-svg .g-nowlbl { fill: currentColor; font-size: 10px; font-weight: var(--fw-bold); font-family: var(--ff); }

/* Кросс-хэйр (вертикальная линия + точка) + закреплённый readout-тултип. */
.chart-cursor { position: absolute; width: 1px; transform: translateX(-.5px);
  background: var(--text-faint); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-1) var(--ease); }
.chart.scrub .chart-cursor { opacity: .55; }
.chart-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 3px var(--bg-1); transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease); }
.chart.scrub .chart-dot { opacity: 1; }
.chart-tip { position: absolute; top: 2px; left: 2px;
  display: inline-flex; align-items: baseline; gap: 7px; padding: 5px 11px;
  border-radius: var(--r-full); background: var(--glass-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); box-shadow: var(--sh-1);
  font-size: var(--fs-xs); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease); }
.chart.scrub .chart-tip { opacity: 1; }
.chart-tip b { color: var(--text); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.chart-tip .tu { font-size: 9px; color: var(--text-faint); margin-left: 2px; text-transform: lowercase; }
.chart-tip .td { font-size: var(--fs-2xs); color: var(--text-dim); }

/* ============ Лендинг «Цены»: сравнение MRKT vs Portals ============ */
.compare-hero { padding: var(--sp-4) var(--sp-5) var(--sp-5); margin-bottom: var(--sp-4); text-align: center; }
.compare-hero .mkt-vs { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.mkt-ar { color: var(--text-faint); display: inline-flex; flex: none; }
.compare-hero .ch-sub { font-size: var(--fs-sm); color: var(--text-dim); margin-top: var(--sp-3); }

/* Брендовый аватар маркета (Задача 1): скруглённый глиф MRKT/Portals вместо
   текстовой подписи — герой «Цен», тег заголовка блока, пилюля сравнения.
   Чёткий на retina: фикс. размер задаётся inline, object-fit бережёт пропорции. */
.mkt-av { border-radius: var(--r-sm); object-fit: cover; flex: none; display: block; }
.mkt-av-hero { border-radius: var(--r-md); box-shadow: var(--sh-1); }
/* Фолбэк, если аватар не загрузился: текстовый брендовый бейдж (не битый
   квадрат) — цвета берёт из .mkt-mrkt/.mkt-portals. */
.mkt-fallback { display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: var(--r-sm); font-weight: var(--fw-heavy); font-size: var(--fs-sm);
  letter-spacing: -.01em; }
.mkt-mrkt { background: var(--mrkt-fill); color: var(--mrkt-ink); }
.mkt-portals { background: var(--portals-fill); color: var(--portals-ink); }

/* Пилюля сравнения флоров в деталке: аватар-бренд + значение; «дешевле» =
   акцент-пилюля + ✓ (индикатор НЕ зависит от подписи бренда). */
.mkt-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 5px;
  border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; background: var(--bg-2);
  border: 1px solid var(--hairline); color: var(--text); }
.mkt-pill .mp-val { font-variant-numeric: tabular-nums; }
.mkt-pill.cheap { background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--accent); box-shadow: var(--sh-1); }

/* Кастомная звезда Stars (ЗАДАЧА 2, сессия 10): присланный белый силуэт
   star.png перекрашивается в золото Stars (#f5b50a) через CSS-mask → читается
   и на светлой, и на тёмной теме (чистый белый силуэт на светлой теме был бы
   невидим). Размер ≈ текста рядом (~1em). Деградация: нет поддержки mask /
   картинка не загрузилась → JS-хелпер starIco() (ui.js) рисует текстовый
   фолбэк ⭐. Маска по альфа-каналу (силуэт непрозрачный → золото проступает). */
.star-ico {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: middle;
  margin: -0.1em 0 0 1px;
  background-color: #f5b50a;
  -webkit-mask: url("../img/star.png?v=21") no-repeat center / contain;
  mask: url("../img/star.png?v=21") no-repeat center / contain;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}
/* На синей btn-accent (кнопка «+ слот за 19 ⭐») звезда БЕЛАЯ и ВПЛОТНУЮ к числу
   (ЗАДАЧА 2, сессия 13). У star.png 15% прозрачного поля с каждой стороны
   (замер альфа-bbox: контент 77..435 из 512 → ~70% ширины), поэтому при
   mask center/contain видимая звезда стоит ~0.16em внутри 1.05em-бокса; плюс
   прежний margin-left:2px давал ~4.5px зазор («звезда далеко», сессия 12).
   Негативный margin-left компенсирует левое внутреннее поле PNG → звезда
   садится вплотную к «19». Белую заливку и текстовый фолбэк ⭐ сохраняем.
   Контекстный модификатор — золотую звезду в других местах НЕ трогает. */
.star-ico--on-accent { background-color: #fff; margin-left: -0.13em; }