/* ============================================================
   LOVII · продуктовый CSS витрины · каркас слоёв (SZ-062, фаза 2)
   ------------------------------------------------------------
   Порядок слоёв (от слабого к сильному):
     tokens · base · primitives · components · utilities · screens
   Сейчас в слои вынесены токены и base (сброс/анимации) — они не
   участвуют в переопределениях экранов, поэтому визуал не меняется.
   Остальной файл пока вне слоёв и переносится поэтапно с проверкой.
   ============================================================ */
@layer tokens, base, primitives, components, utilities, screens;
/* ============================================================
   LOVII Витрина — статическая версия для GitHub Pages
   Дизайн-система сайта-референса lovii-site:
   pink var(--lv-pink) · tiffany var(--lv-tiffany) · gold var(--lv-gold) · ink var(--lv-ink-deep)
   ============================================================
   ТОКЕНЫ: с v1.12.0 живут во фреймворке lovii-design и
   подключаются из assets/lovii-tokens.css (см. index.html).
   Легаси-имена (--pink, --bg, --card…) ниже по файлу работают
   через compat-алиасы снапшота (--pink: var(--lv-pink) и т.д.).
   Правка значений/новых токенов — только в lovii-design:
     tokens/tokens.css → build-lovii-css.py → propagate --push.
   ============================================================ */
/* ============================================================
   СЛОИ ФАЙЛА (SZ-062). Порядок применения: tokens → base →
   primitives → components → utilities. Фактические границы секций:
     · tokens      — НЕ здесь: assets/lovii-tokens.css (--lv-* + compat)
     · base        — сброс и каркас: *, html/body, .app, .app-header,
                     .app-nav, keyframes, утилиты .lv-dot/.lv-enter/.lv-float
     · primitives  — типографика/цвет/отступы берутся из токенов; отдельных
                     примитивных классов нет (базовый .icon — 16px)
     · components  — секции экранов: hero, категории, карточки, корзина,
                     заказы, кабинет(ы), кошелёк, дашборды, шиты, чаты
     · utilities   — .no-scrollbar, .shadow-soft/.shadow-lift (удалены как
                     мёртвые), служебные одноцелевые классы
   Классы и визуальные результаты не меняются; слои — карта, не реордер.
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }
@layer base{

html, body { margin: 0; padding: 0; }
}

@layer base{

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--lv-bg);
  color: var(--lv-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
}

@layer base{

button { font-family: inherit; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font-size: inherit; }
/* Тач-поведение: быстрые тапы по элементам управления не должны запускать двойной тап-зум браузера
   (на iOS он и увеличивал масштаб, из-за чего часть витрины уходила за края). Пинч-зум при этом сохраняется. */
button, a, label, input, select, textarea, [role="button"], [role="tab"] { touch-action: manipulation; }
button, [role="button"], [role="tab"] { -webkit-tap-highlight-color: transparent; }
/* Счётчики количества: быстрые серии тапов без выделения текста и случайных зумов */
.product-preview__counter > button, .product__counter > button, .qty button { touch-action: manipulation; }
}

@layer base{

input { font-family: inherit; }
}

@layer base{

:focus-visible { outline: 2px solid var(--lv-pink); outline-offset: 2px; border-radius: 8px; }
}

/* ---------- Градиенты, тени, утилиты ---------- */
.brand-gradient{ background-image: linear-gradient(135deg, var(--lv-pink) 0%, var(--lv-pink-dark) 100%); }
.ink-gradient{ background-image: linear-gradient(150deg, #262023 0%, var(--lv-ink-deep) 55%, #2b1219 100%); }
.no-scrollbar{ -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar{ display: none; }

@layer base{

@keyframes lv-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
}

@layer primitives{

.lv-dot { width: 6px; height: 6px; border-radius: var(--lv-r-pill); display: inline-block; animation: lv-pulse-dot 1.4s ease-in-out infinite; }
}

@layer base{

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

.lv-enter{ animation: lv-enter .35s ease-out both; }
@layer base{

@keyframes lv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
}

.lv-float{ animation: lv-float 5s ease-in-out infinite; }

/* ============================================================
   СЛОЙ КОМПОНЕНТОВ (SZ-062) — переиспользуемые блоки.
   Карточка: канон-рецепт одна на всё. Варианты — модификаторами.
   ============================================================ */
.card{ background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); box-shadow: var(--lv-shadow-soft); overflow: hidden; box-sizing: border-box; }
.card--flush{ padding: 0; }
.card--tap{ transition: box-shadow .2s, transform .2s, border-color .2s; }
.card--tap:hover{ box-shadow: var(--lv-shadow-lift); border-color: var(--lv-pink); transform: translateY(-2px); }

/* ---------- Каркас приложения ---------- */
.app{ max-width: 480px; margin: 0 auto; min-height: 100dvh; background: var(--lv-card); display: flex; flex-direction: column; box-shadow: var(--lv-shadow-app); }
main#view{ flex: 1; }

/* ---------- Шапка (стекло) ---------- */
.app-header{ position: sticky; top: 0; z-index: 40; background: var(--lv-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--lv-line); }
.app-header-in{ display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--lv-gutter); }
.logo{ display: inline-flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: -.02em; font-size: 22px; color: var(--lv-ink); }
.logo svg{ width: var(--lv-icon-24); height: var(--lv-icon-24); color: var(--lv-pink); }
.logo .lv{ color: var(--lv-pink); }
.logo .logo-img{ height: 32px; width: auto; display: block; }
@media (max-width: 360px){ .logo .logo-img { height: 28px; } }
@layer primitives{

.pill-btn { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--lv-r-pill); background: var(--lv-surface); font-size: 14px; font-weight: 500; transition: background .2s; }
}

.pill-btn:hover{ background: var(--lv-soft-pink); }
.pill-btn svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); color: var(--lv-pink); flex-shrink: 0; }
.pill-btn .chev{ width: 16px; height: 16px; color: var(--lv-dim); }
.pill-btn .lbl{ max-width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Шапка с 3-й кнопкой (тема): на узких экранах сжимаем район-пилл */
@media (max-width: 400px){
  .pill-btn .chev { display: none; }
  .pill-btn .lbl { max-width: 64px; }
  .app-header-in > div { gap: 6px; }
}
@layer primitives{

.icon-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--lv-r-pill); background: var(--lv-surface); transition: background .2s; }
}
@layer primitives{
.icon-btn:hover, .search-trigger:hover, .promo-card.tone-pink { background: var(--lv-soft-pink); }
}
@layer primitives{
.icon-btn svg, .back-btn svg { width: var(--lv-icon-20); height: var(--lv-icon-20); }
}
/* Базовый размер иконки icon(name, 'icon'): без него SVG без width/height схлопывается в 0×0 в Chrome и раздувается за пределы строки в Safari (iOS) */ @layer primitives{
/* Базовый размер иконки icon(name, 'icon'): без него SVG без width/height схлопывается в 0×0 в Chrome и раздувается за пределы строки в Safari (iOS) */ .icon, .icon-16 { width: var(--lv-icon-16); height: var(--lv-icon-16); flex-shrink: 0; }
}

/* SZ-062 · шкала размеров иконок (ДС): 12/16/20/24/32 */
@layer primitives{

/* SZ-062 · шкала размеров иконок (ДС): 12/16/20/24/32 */
.icon-12 { width: var(--lv-icon-12); height: var(--lv-icon-12); flex-shrink: 0; }
}

@layer primitives{

.icon-20 { width: var(--lv-icon-20); height: var(--lv-icon-20); flex-shrink: 0; }
}

@layer primitives{

.icon-24 { width: var(--lv-icon-24); height: var(--lv-icon-24); flex-shrink: 0; }
}

@layer primitives{

.icon-32 { width: var(--lv-icon-32); height: var(--lv-icon-32); flex-shrink: 0; }
}

/* ---------- Подшапка (назад) ---------- */
.subheader{ position: sticky; top: 56px; z-index: 30; background: var(--lv-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--lv-line); }
.subheader-in{ display: flex; align-items: center; height: 48px; padding: 0 12px; gap: 8px; }
.subheader h1{ margin: 0; font-size: 16px; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-btn{ display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--lv-r-pill); transition: background .2s; flex-shrink: 0; }
.back-btn:hover{ background: var(--lv-surface); }

/* ---------- Герой (сворачивается ярлычком) ---------- */
/* Вертикальный ритм приложения: блок↔блок 24px (section padding-top 20 + хвост контента 4), заголовок↔контент 12px */
.hero{ padding: 12px 16px 4px; background: linear-gradient(180deg, var(--lv-hero-top) 0%, var(--lv-card) 100%); transition: padding .3s ease; }
.hero-tab{ display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 12px; border-radius: var(--lv-r-md); background: var(--lv-card); border: 1px solid var(--lv-line-strong); box-shadow: 0 1px 3px rgba(26, 26, 26, .05); font-size: 13px; font-weight: 600; color: var(--lv-ink); cursor: pointer; }
@layer primitives{

.ht-ico { display: flex; flex-shrink: 0; width: 16px; height: 16px; color: var(--lv-pink); }
}
.ht-ico svg, .ht-chev svg, .stat-pill svg, .search-trigger svg, .link-btn svg, .walk-pill svg, .promo-timer svg, .glass-chip svg, .stat-pill.md svg, .added-pill svg, .info-pill svg, .search-bar .clear svg, .services-hint svg, .cart-store-head .trash svg, .pickup-hint svg, .order-foot .l svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }
.ht-lbl{ flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-chev{ display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--lv-r-pill); background: var(--lv-soft-pink); color: var(--lv-pink); transition: transform .3s ease; }
.hero:not(.collapsed) .ht-chev{ transform: rotate(180deg); }
.hero-body{ display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s ease; }
.hero-body-in{ min-height: 0; overflow: hidden; }
.hero-body-in h1{ margin: 12px 0 0; }
.hero.collapsed{ padding-bottom: 4px; }
.hero.collapsed .hero-body{ grid-template-rows: 0fr; }
.hero h1{ margin: 6px 0 0; font-size: 28px; line-height: 1.22; font-weight: 800; letter-spacing: -.01em; }.hero h1 .accent, .avail-name:hover, .info-pill.plain .pin, .pickup-hint .pin, .nav-btn.active{ color: var(--lv-pink); }
.hero .lead{ margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--lv-dim); }
.hero .lead b{ color: var(--lv-ink); font-weight: 600; }
.stat-row{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@layer primitives{

.stat-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--lv-r-pill); font-size: 12px; font-weight: 600; }
}

.stat-pill.grey, .open-pill.off, .stock-out{ background: var(--lv-grey-soft); color: var(--lv-dim); }
.search-trigger{ display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 var(--lv-gutter); margin-top: 16px; border-radius: var(--lv-r-pill); background: var(--lv-surface); color: var(--lv-dim); font-size: 14px; text-align: left; transition: background .2s; }

/* ---------- Категории ---------- */
.cats{ display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 4px;
  /* чипы растворяются у краёв вместо жёсткой обрезки об экран */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--lv-black) 16px, var(--lv-black) calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, var(--lv-black) 16px, var(--lv-black) calc(100% - 16px), transparent 100%); }
/* Липкая плашка чипов: непрозрачная, БЕЗ отрицательных отступов (иначе вылезает за край экрана),
   без постоянной тени; тень только в прилипшем состоянии — .stuck вешает IntersectionObserver (app.js) */
.cats-sticky{ position: sticky; top: 56px; z-index: 25; padding: 10px 0 16px; background: var(--lv-card); }
.cats-sticky .cats{ padding: 0 var(--lv-gutter); }
.cats-sticky.stuck{ box-shadow: var(--lv-shadow-stuck); }
.cats-sentinel{ height: 0; }
@layer primitives{

.cat-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--lv-r-pill); border: 1px solid var(--lv-line-strong); background: var(--lv-card); font-size: 13px; font-weight: 600; transition: all .2s; }
}
.cat-chip:hover, .district-row:hover{ border-color: var(--lv-pink); }
.cat-chip:active{ transform: scale(.96); }
.cat-chip.active{ background-image: linear-gradient(135deg, var(--lv-pink), var(--lv-pink-dark)); color: var(--lv-on-brand); border-color: transparent; box-shadow: var(--lv-shadow-lift); }.cat-chip .e, .price-row .unit{ font-size: 14px; }

/* ---------- Секции ---------- */
.section{ padding-top: 20px; }
/* Заголовок секции всегда дышит 12px до контента (чипы дают симметричные 12px сверху) */
.section > .section-head, .st-goods .section-head{ margin-bottom: 12px; }
/* Заголовок каталога дышит сильнее остальных: 16px сверху (даёт плашка чипов) и 16px снизу */
#catalog-head{ margin-bottom: 16px; }
.section-head{ display: flex; align-items: center; justify-content: space-between; padding: 0 var(--lv-gutter); gap: 8px; flex-wrap: wrap; }.section-head h2, .where-h h2{ margin: 0; font-size: 16px; font-weight: 800; }
.section-head .sub{ color: var(--lv-dim); font-weight: 600; font-size: 14px; }
@layer primitives{

.link-btn { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--lv-pink-dark); transition: gap .2s; }
}

.link-btn:hover{ gap: 6px; }
.hscroll{ display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--lv-gutter) 4px;
  /* карточки мягко растворяются у краёв ленты */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--lv-black) 16px, var(--lv-black) calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, var(--lv-black) 16px, var(--lv-black) calc(100% - 16px), transparent 100%); }

/* ---------- Плитки-подложки (категорийные цвета) ---------- */
.tile-pink{ background: linear-gradient(135deg, var(--lv-badge-hit), #fbf0f5); }
.tile-tiffany{ background: linear-gradient(135deg, var(--lv-badge-new), #eefcfb); }
.tile-gold{ background: linear-gradient(135deg, var(--lv-badge-sale), #fbf5ea); }
.tile-sand{ background: linear-gradient(135deg, #f3e9dc, #faf4ec); }
.tile-ink{ background: linear-gradient(135deg, #f4f4f4, #fafafa); }

/* ---------- Карточка точки ---------- */
.store-card-w{ flex-shrink: 0; width: 170px; }
.btn-card{ display: block; width: 100%; text-align: left; background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); box-shadow: var(--lv-shadow-soft); overflow: hidden; transition: transform .2s, box-shadow .2s; }.btn-card:hover, .promo-card:hover, .product-card:hover{ transform: translateY(-2px); box-shadow: var(--lv-shadow-lift); }
.cover-20{ height: 80px; display: flex; align-items: center; justify-content: center; position: relative; }.cover-20 .em, .cover-28 .em{ font-size: 36px; transition: transform .2s; }.btn-card:hover .em, .product-card:hover .em{ transform: scale(1.1); }
@layer primitives{

.open-pill { position: absolute; top: 8px; right: 8px; height: 20px; padding: 0 8px; border-radius: var(--lv-r-pill); font-size: 10px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
}
.open-pill .dot, .promo-mini .dot{ width: 6px; height: 6px; border-radius: var(--lv-r-pill); }.open-pill.on, .badge-new, .stock-ok{ background: var(--lv-badge-new); color: var(--lv-tiffany-text); }
.open-pill.on .dot{ background: var(--lv-tiffany); }
.open-pill.off .dot{ background: #bbb; }.store-body, .prod-body{ padding: 12px; }.store-name-row, .st-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.min-w-0{ min-width: 0; }.store-name, .cart-item .nm{ font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-sub{ font-size: 12px; color: var(--lv-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@layer primitives{

.rating { display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; flex-shrink: 0; }
}
.rating svg, .rating-pill svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); color: var(--lv-gold); fill: var(--lv-gold); }
.store-foot{ display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
@layer primitives{

.walk-pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--lv-r-pill); background: var(--lv-soft-tiffany); color: var(--lv-tiffany-text); font-size: 11px; font-weight: 600; }
}

@layer primitives{

.chev { width: 16px; height: 16px; color: var(--lv-dim); transition: transform .2s, color .2s; }
}

.btn-card:hover .chev{ transform: translateX(2px); color: var(--lv-pink); }

/* ---------- Акции ---------- */
.promo-card{ flex-shrink: 0; width: 240px; text-align: left; border-radius: var(--lv-r-lg); padding: 16px; transition: transform .2s, box-shadow .2s; }
.promo-card.tone-tiffany{ background: var(--lv-soft-tiffany); }
.promo-card.tone-gold{ background: var(--lv-soft-gold); }
.promo-mini{ display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: var(--lv-r-pill); background: rgba(255, 255, 255, .8); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--lv-pink-dark); }
.promo-title{ margin-top: 8px; font-size: 16px; font-weight: 800; line-height: 1.3; }.promo-desc, .st-head .sub{ font-size: 12px; color: var(--lv-dim); margin-top: 2px; }
.promo-timer{ display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--lv-pink-dark); margin-top: 10px; }

/* ---------- Карточка товара ---------- */
.prod-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 0 var(--lv-gutter) 4px; }
.product-card{ display: block; width: 100%; text-align: left; background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); box-shadow: var(--lv-shadow-soft); overflow: hidden; transition: transform .2s, box-shadow .2s, opacity .2s; }
.product-card.disabled{ opacity: .6; }
.product-card.disabled:hover{ transform: none; box-shadow: var(--lv-shadow-soft); }
.cover-28{ height: 112px; display: flex; align-items: center; justify-content: center; position: relative; }
@layer primitives{

.badge-pill { position: absolute; top: 8px; left: 8px; height: 20px; padding: 0 8px; border-radius: var(--lv-r-pill); font-size: 10px; font-weight: 700; display: flex; align-items: center; }
}

@layer primitives{

.badge-hit { background: var(--lv-badge-hit); color: var(--lv-pink-dark); }
}
@layer primitives{
.badge-sale, .stock-low { background: var(--lv-badge-sale); color: var(--lv-gold-text); }
}

@layer primitives{

.badge-eco { background: var(--lv-green-soft); color: var(--lv-green-text); }
}

@layer primitives{

.walk-mini { position: absolute; bottom: 8px; left: 8px; height: 20px; padding: 0 8px; border-radius: var(--lv-r-pill); background: rgba(255, 255, 255, .9); backdrop-filter: blur(4px); font-size: 10px; font-weight: 600; color: var(--lv-tiffany-text); display: flex; align-items: center; gap: 4px; }
}
.walk-mini svg, .walk-text svg, .compact-row .wk svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); }
.prod-name{ font-size: 14px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.prod-meta{ font-size: 11px; color: var(--lv-dim); margin-top: 4px; }
.price-line{ display: flex; align-items: baseline; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.price{ font-size: 16px; font-weight: 800; }
.old-price{ font-size: 12px; color: var(--lv-dim); text-decoration: line-through; }
.unit{ font-size: 11px; color: var(--lv-dim); }

/* ---------- Товары | Услуги + сортировка ---------- */
@layer primitives{

/* ---------- Товары | Услуги + сортировка ---------- */
.seg { display: flex; height: 40px; border-radius: var(--lv-r-pill); background: var(--lv-surface); padding: 4px; margin: 0 16px 12px; }
}
 /* width:auto — 100% + боковые margin давали горизонтальное переполнение */
.seg button{ flex: 1; height: 32px; border-radius: var(--lv-r-pill); font-size: 13px; font-weight: 700; color: var(--lv-dim); transition: all .2s; }.seg button:hover, .sort-btn:hover, .search-bar .clear:hover, .tab-btn:hover, .nav-btn:hover{ color: var(--lv-ink); }

.sort-group{ display: flex; gap: 6px; }
.sort-btn{ height: 28px; padding: 0 10px; border-radius: var(--lv-r-pill); font-size: 12px; font-weight: 600; background: var(--lv-surface); color: var(--lv-dim); transition: all .2s; }
.sort-btn.active{ background: var(--lv-ink); color: var(--lv-card); box-shadow: var(--lv-shadow-soft); }

/* ---------- Карточка лояльности ---------- */
.loyalty{ margin: 0 16px 16px; border-radius: var(--lv-r-xl); color: var(--lv-on-brand); padding: 20px; position: relative; overflow: hidden; }
.loyalty .blob{ position: absolute; top: -32px; right: -32px; width: 128px; height: 128px; border-radius: var(--lv-r-pill); background: rgba(246, 74, 138, .2); filter: blur(24px); }
.loyalty .kicker{ font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.loyalty .big{ margin-top: 6px; font-size: 18px; font-weight: 800; line-height: 1.35; }
.loyalty .big .g{ color: var(--lv-gold); }
.loyalty p{ margin: 6px 0 0; font-size: 13px; color: rgba(255, 255, 255, .7); line-height: 1.6; }
.loyalty .chips{ display: flex; gap: 8px; margin-top: 12px; }
@layer primitives{

.glass-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: var(--lv-r-pill); background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 600; }
}

.glass-chip .g{ color: var(--lv-gold); fill: var(--lv-gold); }.glass-chip .t, .pickup-hint .clk{ color: var(--lv-tiffany); }

/* ---------- Страница товара ---------- */
.pd-cover{ margin: 16px 16px 0; height: 176px; border-radius: var(--lv-r-xl); display: flex; align-items: center; justify-content: center; position: relative; }
.pd-cover .em{ font-size: 72px; }
.pd-cover .badge-pill{ top: 12px; left: 12px; height: 24px; padding: 0 10px; font-size: 11px; }
.price-row{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 0 var(--lv-gutter); margin-top: 14px; }
.price-row .price{ font-size: 22px; }
.price-row .old-price{ font-size: 16px; }
.pd-name{ padding: 0 var(--lv-gutter); margin: 4px 0 0; font-size: 22px; font-weight: 800; line-height: 1.3; }
.pd-desc{ padding: 0 var(--lv-gutter); margin: 6px 0 0; font-size: 14px; color: var(--lv-dim); line-height: 1.6; }
.status-row{ display: flex; gap: 8px; flex-wrap: wrap; padding: 0 var(--lv-gutter); margin-top: 12px; }
.stat-pill.md{ height: 32px; font-size: 12px; font-weight: 700; }
.where-h{ padding: 20px 16px 0; }.where-h .cnt, .page-h .cnt{ color: var(--lv-dim); font-size: 14px; font-weight: 600; margin-left: 6px; }
.where-h .note{ font-size: 12px; color: var(--lv-dim); margin: 4px 0 0; }
.avail-list{ padding: 12px 16px 4px; display: flex; flex-direction: column; gap: 10px; }
.avail-card{ background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); padding: 12px; box-shadow: var(--lv-shadow-soft); transition: box-shadow .2s, opacity .2s; }.avail-card:hover, .cta-btn:hover, .compact-row:hover{ box-shadow: var(--lv-shadow-lift); }
.avail-card.out{ opacity: .7; }.avail-row, .district-row .l{ display: flex; align-items: center; gap: 12px; }.avail-emoji, .compact-row .em-tile{ flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--lv-r-sm); display: flex; align-items: center; justify-content: center; font-size: 22px; }.avail-mid, .compact-row .mid, .cart-item .mid{ flex: 1; min-width: 0; }
.avail-name{ font-size: 14px; font-weight: 700; text-align: left; transition: color .2s; }
.avail-addr{ font-size: 11px; color: var(--lv-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avail-tags{ display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; align-items: center; }
.walk-text{ display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--lv-tiffany-text); }
@layer primitives{

.stock-pill { height: 18px; padding: 0 6px; border-radius: var(--lv-r-pill); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; }
}

.avail-right{ flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }.avail-price, .cart-store-total .v{ font-size: 14px; font-weight: 800; }
.out-note{ font-size: 11px; color: var(--lv-dim); }
@layer primitives{

.cta-btn { height: 36px; padding: 0 var(--lv-gutter); border-radius: var(--lv-r-pill); color: var(--lv-on-brand); font-size: 12px; font-weight: 700; transition: all .2s; display: inline-flex; align-items: center; justify-content: center; }
}

.cta-btn:active{ transform: scale(.95); }
.cta-btn.big{ height: 48px; width: 100%; font-size: 14px; }
@layer primitives{

.added-pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: var(--lv-r-pill); background: var(--lv-soft-tiffany); color: var(--lv-tiffany-text); font-size: 12px; font-weight: 700; }
}

@layer primitives{

.qty { display: inline-flex; align-items: center; height: 32px; border-radius: var(--lv-r-pill); background: var(--lv-pink-dark); }
}

.qty button{ width: 32px; height: 32px; border-radius: var(--lv-r-pill); color: var(--lv-on-brand); font-size: 18px; font-weight: 700; transition: background .2s; }
.qty button:hover{ background: color-mix(in srgb, var(--lv-white) 22%, transparent); }
.qty .n{ width: 22px; text-align: center; font-size: 13px; font-weight: 700; color: var(--lv-on-brand); }

/* ---------- Страница точки ---------- */
.st-cover{ height: 144px; display: flex; align-items: center; justify-content: center; position: relative; }
.st-cover .em{ font-size: 60px; }
.st-cover .open-pill{ top: 12px; right: 12px; height: 24px; padding: 0 10px; font-size: 11px; background: rgba(255, 255, 255, .9); }
.st-card{ margin: -20px 16px 0; background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); box-shadow: var(--lv-shadow-soft); padding: 16px; position: relative; }.st-head h1, .sheet-head h2{ margin: 0; font-size: 18px; font-weight: 800; }
@layer primitives{

.rating-pill { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: var(--lv-r-pill); background: var(--lv-soft-gold); font-size: 12px; font-weight: 700; color: var(--lv-gold-text); flex-shrink: 0; }
}

.rating-pill .rev{ color: var(--lv-gold-text); font-weight: 500; }
.st-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@layer primitives{

.info-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--lv-r-pill); font-size: 12px; font-weight: 700; }
}

.info-pill.plain{ background: var(--lv-surface); color: var(--lv-ink); font-weight: 600; }.info-pill.plain svg, .search-bar input::placeholder, .sum-row .l, .item-chip .q{ color: var(--lv-dim); }
.st-about{ margin: 12px 0 0; font-size: 13px; color: var(--lv-dim); line-height: 1.6; }
.tag-row{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
@layer primitives{

.tag-pill { height: 24px; padding: 0 10px; border-radius: var(--lv-r-pill); background: var(--lv-soft-pink); color: var(--lv-pink-dark); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
}

.st-goods{ padding: 20px 0 4px; }
.st-goods .section-head h2{ display: flex; align-items: center; gap: 8px; }
.st-goods .section-head h2 svg{ width: var(--lv-icon-20); height: var(--lv-icon-20); color: var(--lv-pink); }

/* ---------- Поиск ---------- */
@layer primitives{

/* ---------- Поиск ---------- */
.search-bar-wrap { position: sticky; top: 56px; z-index: 30; background: var(--lv-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 12px 16px 10px; border-bottom: 1px solid var(--lv-line); }
}

@layer primitives{

.search-bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 var(--lv-gutter); border-radius: var(--lv-r-pill); background: var(--lv-surface); transition: all .2s; }
}

.search-bar:focus-within{ background: var(--lv-card); box-shadow: var(--lv-ring-search); }
.search-bar > svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); color: var(--lv-dim); flex-shrink: 0; }
.search-bar input{ flex: 1; border: 0; outline: none; background: none; font-size: 14px; color: var(--lv-ink); min-width: 0; }
.search-bar .clear{ display: flex; color: var(--lv-dim); }
.search-tabs{ display: flex; gap: 8px; margin-top: 10px; }
@layer primitives{

.tab-btn { height: 32px; padding: 0 12px; border-radius: var(--lv-r-pill); font-size: 13px; font-weight: 700; background: var(--lv-surface); color: var(--lv-dim); transition: all .2s; }
}

.tab-btn.active{ background-image: linear-gradient(135deg, var(--lv-pink), var(--lv-pink-dark)); color: var(--lv-on-brand); box-shadow: var(--lv-shadow-lift); }
.results-wrap{ padding: 12px 16px 8px; }
.results-hint{ font-size: 12px; color: var(--lv-dim); margin: 0 0 10px; }
.rows{ display: flex; flex-direction: column; gap: 10px; }
.compact-row{display: flex; align-items: center; gap: 12px; padding: 12px; transition: box-shadow .2s; text-align: left; width: 100%;}
.compact-row .nm{ display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-row .sb{ display: block; font-size: 12px; color: var(--lv-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-row .right{ flex-shrink: 0; text-align: right; }
.compact-row .pr{ display: block; font-size: 14px; font-weight: 800; }
.compact-row .wk{ display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--lv-tiffany-text); font-weight: 600; }
.services-hint{ display: flex; align-items: center; gap: 8px; margin: 20px 0 8px; font-size: 12px; color: var(--lv-dim); }

/* ---------- Корзина ---------- */
.page-h{ padding: 16px 16px 0; }
.page-h h1{ margin: 0; font-size: 22px; font-weight: 800; }
.cart-list{ padding: 12px 16px 0; display: flex; flex-direction: column; gap: 16px; }
.cart-store-card{ background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); box-shadow: var(--lv-shadow-soft); overflow: hidden; }
.cart-store-head{ display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; }
.cart-store-head .walk-pill{ height: 28px; font-size: 11px; font-weight: 700; }
.cart-store-head .trash{ margin-left: auto; color: var(--lv-dim); display: flex; transition: color .2s; }
.cart-store-head .trash:hover{ color: var(--lv-pink-dark); }
.cart-item{ display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.cart-item + .cart-item{ border-top: 1px solid var(--lv-line-2); }
.cart-item .em-tile{ flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--lv-r-sm); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.cart-item .pr{ font-size: 12px; color: var(--lv-dim); }
.cart-store-total{display: flex; align-items: center; justify-content: space-between; padding: 10px 16px;}
.cart-store-total .l{ font-size: 12px; font-weight: 600; color: var(--lv-dim); }
.sum-card{ margin: 20px 16px 0; background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); box-shadow: var(--lv-shadow-soft); padding: 16px; }
.sum-row{ display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-top: 6px; }
.sum-row:first-child{ margin-top: 0; }
.sum-row .v{ font-weight: 700; }
.sum-row .v.ok{ color: var(--lv-tiffany-text); }
.sum-row .v.gold{ color: var(--lv-gold-text); }
.sum-div{ height: 1px; background: var(--lv-line-2); margin: 12px 0; }
.sum-total{ display: flex; align-items: center; justify-content: space-between; }
.sum-total .l{ font-size: 14px; font-weight: 700; }
.sum-total .v{ font-size: 18px; font-weight: 800; }
.pickup-hint{ display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 11px; color: var(--lv-dim); flex-wrap: wrap; }

/* ---------- Заказы ---------- */
.orders-list{ padding: 12px 16px 0; display: flex; flex-direction: column; gap: 12px; }
.order-card{ background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); box-shadow: var(--lv-shadow-soft); padding: 16px; }
.order-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }.order-head .oid, .order-foot .v{ font-weight: 800; }
@layer primitives{

.status-pill { height: 24px; padding: 0 10px; border-radius: var(--lv-r-pill); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
}

.status-dim{ background: var(--lv-grey-soft); color: var(--lv-dim); }
.order-meta{ display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--lv-dim); flex-wrap: wrap; }.order-meta svg, .district-row .ic svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); color: var(--lv-pink); }
.item-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.item-chip{ display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: var(--lv-r-pill); background: var(--lv-surface); font-size: 12px; font-weight: 500; }
.order-foot{ margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lv-line); display: flex; align-items: center; justify-content: space-between; }
.order-foot .l{ font-size: 12px; font-weight: 600; color: var(--lv-dim); display: flex; align-items: center; gap: 6px; }

/* ---------- Нижняя навигация ---------- */
.app-nav{ position: sticky; bottom: 0; z-index: 40; background: var(--lv-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--lv-line); padding-bottom: env(safe-area-inset-bottom); }
.app-nav-in{ display: grid; grid-template-columns: repeat(5, 1fr); height: 64px; max-width: 480px; margin: 0 auto; }
.nav-btn{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 500; color: var(--lv-dim); transition: color .2s; }
.nav-btn .top-ind{ position: absolute; top: 0; width: 32px; height: 2px; border-radius: var(--lv-r-pill); background: var(--lv-pink); display: none; }
.nav-btn.active .top-ind{ display: block; }
/* Активная вкладка — канон приложения (Task 89): подпись pink-dark вместо яркого #f64a8a
   (11px ярким розовым давал 3.1:1, pink-dark даёт ~4.8:1), индикатор остаётся ярким розовым —
   это не-текстовая графика с нормой 3:1. */
.nav-btn.active{ color: var(--lv-pink-dark); }
@layer primitives{

.nav-ico { position: relative; display: flex; }
}

.nav-ico svg{ width: var(--lv-icon-24); height: var(--lv-icon-24); }
.nav-count{ position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--lv-r-pill); color: var(--lv-on-brand); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ---------- Шит выбора района ---------- */
.sheet-overlay{ position: fixed; inset: 0; z-index: 50; background: rgba(26, 26, 26, .4); opacity: 0; pointer-events: none; transition: opacity .25s; }
.sheet-overlay.open{ opacity: 1; pointer-events: auto; }
.sheet{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; background: var(--lv-card); border-radius: 24px 24px 0 0; max-height: 72dvh; display: flex; flex-direction: column; transform: translateY(100%); visibility: hidden; transition: transform .3s cubic-bezier(.32, .72, 0, 1), visibility .3s; max-width: 480px; margin: 0 auto; }
.sheet.open{ transform: translateY(0); visibility: visible; }
.sheet-head{ padding: 20px 16px 8px; }
.sheet-head p{ margin: 4px 0 0; font-size: 14px; color: var(--lv-dim); }
.sheet-body{ padding: 0 var(--lv-gutter) 24px; overflow-y: auto; display: grid; gap: 8px; }
.district-row{ display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--lv-gutter); border-radius: var(--lv-r-lg); border: 1px solid var(--lv-line-strong); transition: all .2s; text-align: left; }
.district-row.active{ border-color: var(--lv-pink); background: var(--lv-soft-pink); }
.district-row .ic{ width: 36px; height: 36px; border-radius: var(--lv-r-sm); background: var(--lv-soft-pink); display: flex; align-items: center; justify-content: center; }
.district-row .nm{ display: block; font-size: 14px; font-weight: 600; }
.district-row .mt{ display: block; font-size: 12px; color: var(--lv-dim); }

/* ---------- Тосты ---------- */
.toast-wrap{ position: fixed; left: 0; right: 0; bottom: 84px; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 var(--lv-gutter); }
/* Уведомление: ширина по содержимому с потолком узкой капсулы (--lv-container, 480px),
   иначе длинный текст растягивался на всё окно. Тоны — на семантике канона. */
.toast{ width: max-content; max-width: min(100%, var(--lv-container, 480px)); display: flex; flex-flow: column; gap: 2px; background: var(--lv-ink); color: var(--lv-card); border: 1px solid transparent; border-radius: var(--lv-r-lg); padding: 12px 16px; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; box-shadow: var(--lv-shadow-toast); animation: toast-in .25s ease-out; }
.toast .d{ font-size: 11px; color: var(--lv-toast-d); font-weight: 400; }
.toast_t-positive{ background: var(--lv-soft-tiffany); color: color-mix(in srgb, var(--lv-tiffany-text) 88%, var(--lv-ink)); border-color: color-mix(in srgb, var(--lv-tiffany-text) 88%, var(--lv-ink)); }
.toast_t-positive .d{ color: color-mix(in srgb, var(--lv-tiffany-text) 88%, var(--lv-ink)); opacity: .85; }
.toast_t-important{ background: var(--lv-soft-gold); color: color-mix(in srgb, var(--lv-gold-text) 76%, var(--lv-ink)); border-color: color-mix(in srgb, var(--lv-gold-text) 76%, var(--lv-ink)); }
.toast_t-important .d{ color: color-mix(in srgb, var(--lv-gold-text) 76%, var(--lv-ink)); opacity: .85; }
.toast_t-negative{ background: var(--lv-negative-soft); color: color-mix(in srgb, var(--lv-negative) 62%, var(--lv-ink)); border-color: color-mix(in srgb, var(--lv-negative) 62%, var(--lv-ink)); }
.toast_t-negative .d{ color: color-mix(in srgb, var(--lv-negative) 62%, var(--lv-ink)); opacity: .85; }
.toast_t-error{ background: color-mix(in srgb, var(--lv-negative) 80%, var(--lv-ink)); color: var(--lv-white, #fff); border-color: color-mix(in srgb, var(--lv-negative) 80%, var(--lv-ink)); }
.toast_t-error .d{ color: var(--lv-white, #fff); opacity: .85; }
.toast_t-financial{ background: var(--lv-soft-pink); color: color-mix(in srgb, var(--lv-pink-dark) 82%, var(--lv-ink)); border-color: color-mix(in srgb, var(--lv-pink-dark) 82%, var(--lv-ink)); }
.toast_t-financial .d{ color: color-mix(in srgb, var(--lv-pink-dark) 82%, var(--lv-ink)); opacity: .85; font-variant-numeric: tabular-nums; }
@layer base{

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

.toast.hide{ opacity: 0; transform: translateY(8px); transition: all .25s; }

/* ---------- Пустые состояния ---------- */
.empty{ padding: 70px 16px; text-align: center; }
.empty .big-emoji{ font-size: 44px; }
.empty h3{ margin: 12px 0 0; font-size: 18px; font-weight: 800; }
.empty p{ margin: 6px auto 0; font-size: 14px; color: var(--lv-dim); max-width: 280px; line-height: 1.6; }
.empty .cta-btn{ margin-top: 20px; height: 44px; padding: 0 24px; font-size: 14px; }
.nf{ padding: 56px 16px; text-align: center; }
.nf .big-emoji{ font-size: 36px; }
.nf .t{ margin-top: 10px; font-weight: 700; }
.nf .link{ margin-top: 12px; display: inline-block; font-size: 14px; font-weight: 600; color: var(--lv-pink-dark); }

/* ---------- Мелочи ---------- */
.empty-cat{ padding: 44px 16px; text-align: center; }
.empty-cat .big-emoji{ font-size: 36px; }
.empty-cat .t{ margin-top: 8px; font-weight: 700; }
.empty-cat .d{ margin-top: 4px; font-size: 14px; color: var(--lv-dim); }

/* ============================================================
   Роли и дашборды: профиль, заявки, KPI, графики, дерево, чаты
   ============================================================ */

/* ---------- Кнопки-призраки, служебные ---------- */
@layer primitives{

/* ============================================================
   Роли и дашборды: профиль, заявки, KPI, графики, дерево, чаты
   ============================================================ */

/* ---------- Кнопки-призраки, служебные ---------- */
.ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 var(--lv-gutter); border-radius: var(--lv-r-pill); border: 1.5px solid var(--lv-line-strong); background: var(--lv-card); font-size: 13px; font-weight: 700; color: var(--lv-ink); transition: all .2s; flex-shrink: 0; }
}
.ghost-btn svg, .trash-btn svg{ width: var(--lv-icon-16); height: 15px; }.ghost-btn.sm, .cta-btn.sm{ height: 32px; padding: 0 12px; font-size: 12px; }
@layer primitives{

.btn-row { display: flex; gap: 10px; padding: 16px 16px 0; flex-wrap: wrap; }
}

.cta-btn.plain{ background: var(--lv-surface); color: var(--lv-ink); }

/* ---------- Общие карточки-списки и строки ---------- */
.list-card{ margin: 10px 16px 0; background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); box-shadow: var(--lv-shadow-soft); overflow: hidden; }
.row-item{ display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px; text-align: left; }.row-item + .row-item, .install-step + .install-step, .fin-row + .fin-row{ border-top: 1px solid var(--lv-line-2); }
.row-item.as-btn{ transition: background .15s; }
.row-item.as-btn:hover{ background: var(--lv-surface); }
.ri-emoji{ flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--lv-r-sm); display: flex; align-items: center; justify-content: center; font-size: 22px; }.ri-mid, .dash-title, .hb-mid{ flex: 1; min-width: 0; }
.ri-mid .nm{ font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ri-mid .sb{ margin-top: 2px; font-size: 12px; color: var(--lv-dim); display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }.ri-mid .sb svg, .delta svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); }
.ri-right{ text-align: right; flex-shrink: 0; }
.ri-right .v{ font-size: 13px; font-weight: 800; }
.ri-right .st-chip{ margin-top: 4px; }
@layer primitives{

.chev-btn { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--lv-r-pill); color: var(--lv-dim); }
}

.chev-btn svg, .row-item .chev{ width: var(--lv-icon-16); height: var(--lv-icon-16); color: var(--lv-dim); flex-shrink: 0; }
@layer primitives{

.trash-btn { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--lv-negative); background: var(--lv-negative-soft); }
}

/* ---------- Статусы точек ---------- */
@layer primitives{

/* ---------- Статусы точек ---------- */
.st-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--lv-r-pill); font-size: 11px; font-weight: 700; white-space: nowrap; }
}

.st-chip .lv-dot{ width: 5px; height: 5px; }
.st-off{ background: var(--lv-grey-soft); color: var(--lv-dim); }

/* ---------- Шапка дашборда, табы ---------- */
.dash-head{ display: flex; align-items: center; gap: 12px; padding: 16px 16px 0; }
.dash-ava{ width: 46px; height: 46px; border-radius: var(--lv-r-md); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.dash-title h1{ margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-title .d{ font-size: 12px; color: var(--lv-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-tabs button{ display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.tab-unread{ min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--lv-r-pill); background-image: linear-gradient(135deg, var(--lv-pink), var(--lv-pink-dark)); color: var(--lv-on-brand); font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.status-banner{ display: flex; align-items: center; gap: 10px; margin: 14px 16px 0; padding: 10px 12px; background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-r-md); }
.status-banner .sb{ font-size: 12px; color: var(--lv-dim); margin-left: auto; }
.dash-note{ margin: 10px 16px 0; padding: 10px 12px; border-radius: var(--lv-r-sm); font-size: 12px; line-height: 1.5; font-weight: 500; }
.dash-note.tone-dim{ background: var(--lv-grey-soft); color: var(--lv-dim); }

/* ---------- Юр. блок профиля (как в основном приложении LOVII) ---------- */
.prof-legal{ margin-top: 18px; padding: 16px 16px 2px; border-top: 1px solid var(--lv-hairline); text-align: center; }
.prof-legal nav{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.prof-legal a{ color: var(--lv-pink-dark); font-weight: 600; font-size: 13px; text-decoration: none; }
.prof-legal a:active{ opacity: .7; }
.prof-legal p{ margin: 0; color: var(--lv-dim); font-size: 12px; line-height: 1.55; }/* Логотип: вордмарк светлый в тёмной теме */ .logo .logo-dark-img, [data-theme="dark"] .logo .logo-light-img{ display: none; }
[data-theme="dark"] .logo .logo-dark-img{ display: block; }

/* ---------- Установка приложения (PWA) ---------- */
.install-step{ display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.install-step .n{ flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--lv-r-pill); display: flex; align-items: center; justify-content: center; background: var(--lv-soft-pink); color: var(--lv-pink-dark); font-size: 13px; font-weight: 800; }
.install-step .t{ font-size: 14px; line-height: 1.5; color: var(--lv-ink); font-weight: 500; padding-top: 2px; }
.install-step .t b{ font-weight: 800; }
.install-ico{ display: inline-block; vertical-align: -3px; margin: 0 2px; width: 16px; height: 16px; color: var(--lv-pink); }
.install-note{ margin-top: 10px; padding: 10px 12px; border-radius: var(--lv-r-sm); background: var(--lv-grey-soft); color: var(--lv-dim); font-size: 12px; line-height: 1.5; }

/* ---------- KPI ---------- */
.kpi-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 0; }
.kpi{padding: 12px 12px; min-width: 0;}
.kpi .l{ font-size: 11px; font-weight: 700; color: var(--lv-dim); text-transform: uppercase; letter-spacing: .04em; }
.kpi .v{ margin-top: 5px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .d{ margin-top: 5px; min-height: 22px; display: flex; align-items: center; gap: 8px; }
.kpi.accent{ background-image: linear-gradient(150deg, var(--lv-kpi-soft), var(--lv-card)); border-color: color-mix(in srgb, var(--lv-pink) 25%, transparent); }.kpi.accent .v, .delta-down, .fin-row.neg .v{ color: var(--lv-pink-dark); }
.delta{ display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; }.delta-up, .fin-row.ok .v{ color: var(--lv-tiffany-text); }
@layer primitives{

.spark { width: 76px; height: 24px; }
}

/* ---------- Графики ---------- */
.chart-card{ margin: 14px 16px 0; background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); box-shadow: var(--lv-shadow-soft); padding: 12px; }
.chart-card .cc-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chart-card .cc-head b{ font-size: 14px; font-weight: 800; }
.chart-card .cc-head .sub{ font-size: 11px; color: var(--lv-dim); font-weight: 600; }
.chart-card svg.chart{ width: 100%; height: auto; display: block; margin-top: 10px; }
.hbars{ display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.hbar-row{ display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.hb-em{ flex-shrink: 0; width: 26px; height: 26px; border-radius: 9px; background: var(--lv-grey-soft); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--lv-dim); }
.hb-top{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.hb-lbl{ font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-val{ font-size: 12px; font-weight: 800; flex-shrink: 0; }
.hbar-track{ display: block; height: 7px; border-radius: var(--lv-r-pill); background: var(--lv-surface); overflow: hidden; }
.hbar-fill{ display: block; height: 100%; border-radius: var(--lv-r-pill); }
.hbar-fill.tone-pink{ background-image: linear-gradient(90deg, var(--lv-pink), var(--lv-pink-dark)); }
.hbar-fill.tone-tiffany{ background-image: linear-gradient(90deg, var(--lv-tiffany), #078d89); }
.hbar-fill.tone-gold{ background-image: linear-gradient(90deg, var(--lv-gold), #b98d3e); }
.prof-ava{ flex-shrink: 0; width: 58px; height: 58px; border-radius: var(--lv-r-pill); background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.prof-name{ font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.prof-phone{ margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .65); font-weight: 600; }
.role-badge{ font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lv-pink-dark); background: var(--lv-soft-pink); border-radius: var(--lv-r-pill); padding: 2px 6px; }
.demo-tag{ font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lv-tiffany-text); background: var(--lv-soft-tiffany); border-radius: var(--lv-r-pill); padding: 2px 6px; }

/* ---------- Заявка ---------- */
.apply-head{ margin: 14px 16px 0; border-radius: 20px; padding: 16px; display: flex; align-items: center; gap: 12px; }
.ah-emoji{ flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--lv-r-lg); background: rgba(255, 255, 255, .65); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.ah-mid .kicker{ font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lv-dim); }
.ah-mid h1{ margin: 2px 0 0; font-size: 22px; font-weight: 800; }
@layer primitives{

.f-field { display: block; padding: 0 var(--lv-gutter); margin-top: 12px; }
}

.f-field .lb{ display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--lv-ink); }
.f-field input, .f-field textarea, .f-field select{ width: 100%; border: 1.5px solid var(--lv-line-strong); border-radius: var(--lv-r-md); padding: 12px 12px; font: inherit; font-size: 14px; background: var(--lv-card); color: var(--lv-ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.f-field input:focus, .f-field textarea:focus, .f-field select:focus{ border-color: var(--lv-pink); box-shadow: var(--lv-ring-field); }
.f-field textarea{ min-height: 84px; resize: vertical; }
.f-field select{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }

/* ---------- Дерево структуры ---------- */
.tree{margin: 10px 16px 0; padding: 6px 12px;}
.tree-row{ display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.tree-row.leaf{ padding: 6px 0; }
.t-emoji{ flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.tree-kids{ margin-left: 17px; padding-left: 12px; border-left: 2px dashed var(--lv-line); }
.tree-row .nm{ font-size: 13px; font-weight: 700; }
.tree-row .sb{ margin-top: 1px; font-size: 11px; color: var(--lv-dim); }
.tree-row .v{ font-size: 13px; font-weight: 800; }

/* ---------- Финансы (владелец/инвестор) ---------- */
.fin-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px; }
.fin-row .l{ font-size: 13px; font-weight: 600; color: var(--lv-ink); }
.fin-row .v{ font-size: 13px; font-weight: 800; white-space: nowrap; }
.fin-total{ margin: 10px 16px 0; padding: 12px 16px; border-radius: var(--lv-r-md); background-image: linear-gradient(135deg, var(--lv-pink), var(--lv-pink-dark)); color: var(--lv-on-brand); display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 800; box-shadow: var(--lv-shadow-toast); }
.roi-card{ margin: 14px 16px 0; border-radius: 20px; padding: 20px; color: var(--lv-on-brand); }
.roi-card .kicker{ font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.roi-card .big{ margin-top: 6px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.roi-card .big .g{ color: var(--lv-gold); }
.roi-card p{ margin: 6px 0 0; font-size: 13px; color: rgba(255, 255, 255, .7); line-height: 1.55; }
.roi-card .chips{ display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.chips-row{ display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 2px; }
.chips-row .tab-btn{ flex-shrink: 0; }
.chips-row .tab-btn.active{ pointer-events: none; }

/* ---------- Чаты ---------- */
.unread{ flex-shrink: 0; min-width: 19px; height: 19px; padding: 0 6px; border-radius: var(--lv-r-pill); background-image: linear-gradient(135deg, var(--lv-pink), var(--lv-pink-dark)); color: var(--lv-on-brand); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.chat-sub{ display: flex; align-items: center; gap: 6px; padding: 8px 16px 0; font-size: 12px; color: var(--lv-dim); font-weight: 600; }
.chat-body{ display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 86px; }
.msg{ max-width: 80%; padding: 10px 12px; border-radius: var(--lv-r-lg); font-size: 14px; line-height: 1.45; box-shadow: 0 1px 2px rgba(26, 26, 26, .05); }
.msg .ts{ display: block; margin-top: 3px; font-size: 10px; opacity: .55; font-weight: 600; }
.msg.them{ align-self: flex-start; background: var(--lv-card); border: 1px solid var(--lv-line-2); border-bottom-left-radius: 6px; }
.msg.me{ align-self: flex-end; background-image: linear-gradient(135deg, var(--lv-pink), var(--lv-pink-dark)); color: var(--lv-on-brand); border-bottom-right-radius: 6px; }
.msg.sys{ align-self: center; background: var(--lv-soft-gold); color: var(--lv-gold-text); font-size: 11px; font-weight: 700; border-radius: var(--lv-r-pill); padding: 6px 12px; max-width: 92%; text-align: center; }
.chat-input-bar{ position: sticky; bottom: 0; z-index: 30; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--lv-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--lv-line); }
.chat-input-bar input{ flex: 1; min-width: 0; height: 44px; border: 1.5px solid var(--lv-line-strong); border-radius: var(--lv-r-pill); padding: 0 var(--lv-gutter); font: inherit; font-size: 14px; outline: none; background: var(--lv-surface); }
.chat-input-bar input:focus{ border-color: var(--lv-pink); background: var(--lv-card); }
.send-btn{ flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--lv-r-pill); display: flex; align-items: center; justify-content: center; color: var(--lv-on-brand); }
.send-btn svg{ width: var(--lv-icon-20); height: var(--lv-icon-20); }

/* ---------- Избранное на карточке товара ---------- */
.pd-cover{ position: relative; }
.fav-btn{ position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: var(--lv-r-pill); background: rgba(255, 255, 255, .88); display: flex; align-items: center; justify-content: center; color: var(--lv-pink); box-shadow: var(--lv-shadow-float); transition: transform .15s; }
.fav-btn:active{ transform: scale(.9); }
.fav-btn svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }/* ============================================================ Адаптив: планшет и десктоп (база — мобильный макет выше) ============================================================ */ /* Контентные капсулы (на мобильных ширинах не работают — там экран уже): общий поток 1120px; линейные экраны (товар, поиск, корзина, заказы, профиль, заявка, чат) — 760px */ #view .lv-enter, .app-header-in, .subheader-in{ max-width: 1120px; margin-left: auto; margin-right: auto; }
#view .lv-narrow{ max-width: 760px; }
#view .chat-screen{ max-width: 760px; margin-left: auto; margin-right: auto; }
@layer primitives{

.search-bar-wrap .search-bar { max-width: 728px; margin: 0 auto; }
}

/* ============================================================
   КОНТЕНТНАЯ КАПСУЛА · одна ширина на весь продукт
   ------------------------------------------------------------
   Эталон — профиль: при окне ≥640px контейнер 924px, боковой гуттер 16px,
   ширина контента 892px. Общее правило ниже ограничивает КОРНЕВОЙ блок
   любого экрана этой капсулой: новый экран попадает под неё автоматически,
   перечислять классы вручную больше не нужно.
   Исключения:
     · главная (.home) — единственный широкий экран: шапка идёт по краям её контента;
     · полоса «назад» (.subheader) — фон тянется на всю ширину, по капсуле ограничен её слой;
     · узкие экраны (чат, заявка) — своя капсула 760px: max-width сужает, но не расширяет;
     · панели действий с position: fixed — ограничиваются отдельно, ниже.
   Ниже 640px экраны живут в ширине приложения.
   ============================================================ */
@media (min-width: 640px){
  #view > *:not(.subheader):not(.home) { max-width: var(--lv-content-max, 924px); margin-inline: auto; }
  /* внутренний слой шапки «назад» — по капсуле; на узких экранах — своя */
  .subheader-in { max-width: var(--lv-content-max, 924px); }
  #view:has(.lv-narrow) .subheader-in { max-width: var(--lv-container-narrow, 760px); }
  /* верхняя полоса приложения — по линии контента, а не по краям окна */
  .app-header-in { max-width: var(--lv-content-max, 924px); }
  .app:has(#view > .home) .app-header-in { max-width: none; }
  .app:has(#view .lv-narrow) .app-header-in { max-width: var(--lv-container-narrow, 760px); }
  /* нижние панели действий (fixed) — в той же капсуле, центрируются через margin */
  .product__action,
  .create-order__cta { max-width: var(--lv-content-max, 924px); margin-inline: auto; }
  /* полоса кабинета ролей: аватар и название — по линии тела кабинета */
  .cabinet__head { width: 100%; max-width: var(--lv-content-max, 924px); margin-inline: auto; }
}

@media (min-width: 640px){
  /* Планшет: приложение разворачивается на всю ширину, сетки растут */
  .app { max-width: 100%; box-shadow: none; }
  body { background: var(--lv-page); }
  .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-tab, .hero-body-in, .search-trigger { max-width: 640px; }
  .hero h1 { font-size: 28px; }
  .seg { max-width: 480px; }
  .loyalty { max-width: 720px; margin-left: auto; margin-right: auto; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

@media (min-width: 900px){
  /* Десктоп: нижняя навигация превращается в плавающую капсулу */
  .app-nav { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); border: 1px solid var(--lv-line); border-radius: var(--lv-r-pill); box-shadow: 0 12px 32px -12px rgba(26, 26, 26, .28); padding-bottom: 0; }
  .app-nav-in { grid-template-columns: repeat(5, auto); height: 60px; max-width: none; padding: 0 8px; }
  .nav-btn { padding: 0 var(--lv-gutter); border-radius: var(--lv-r-pill); }
  main#view { padding-bottom: 96px; }
}

@media (min-width: 1024px){
  .prod-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 640px){
  /* Верх главной: ярлычок района и поиск — в один ряд,
     инфо-блок раскрывается под ними на всю ширину.
     На мобиле порядок прежний: ярлычок → инфо → поиск. */
  .hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; column-gap: 12px; }
  .hero-tab { grid-area: 1 / 1; width: auto; max-width: none; }
  .search-trigger { grid-area: 1 / 2; max-width: none; margin-top: 0; }
  .hero-body { grid-area: 2 / 1 / 3 / 3; }
}

/* ---------- Расширенные демо-страницы представителя и амбасадора ---------- */
.rank-card, .code-card, .timeline-card, .mentor-card{
  margin: 14px 16px 0;
  border-radius: 18px;
  border: 1px solid var(--lv-line);
  box-shadow: var(--lv-shadow-soft);
}
.rank-card{ padding: 16px; background: var(--lv-card); }
.rank-card.tone-tiffany{ background: linear-gradient(150deg, var(--lv-soft-tiffany), var(--lv-card)); border-color: color-mix(in srgb, var(--lv-tiffany) 26%, transparent); }
.rank-card.tone-gold{ background: linear-gradient(150deg, var(--lv-soft-gold), var(--lv-card)); border-color: color-mix(in srgb, var(--lv-gold) 28%, transparent); }
.rank-top{ display: flex; align-items: center; gap: 12px; }
.rank-emoji{ width: 46px; height: 46px; border-radius: var(--lv-r-md); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.62); font-size: 22px; }
.rank-kicker{ font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lv-dim); }
.rank-title{ margin-top: 2px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
@layer primitives{

.progress, .mini-progress { height: 8px; border-radius: var(--lv-r-pill); background: var(--lv-surface); overflow: hidden; }
}

@layer primitives{

.progress { margin-top: 14px; }
}

.progress span, .mini-progress span{ display: block; height: 100%; border-radius: inherit; background-image: linear-gradient(90deg, var(--lv-tiffany), var(--lv-pink)); }
.rank-foot{ display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--lv-dim); font-size: 12px; font-weight: 600; }
.rank-foot b{ color: var(--lv-ink); font-weight: 800; text-align: right; }
.code-card{ padding: 16px; }

.code-card .kicker, .mentor-card .kicker{ font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.code-card .code{ margin-top: 6px; font-size: 28px; line-height: 1; font-weight: 900; letter-spacing: .06em; }
.code-card p{ margin: 8px 0 0; font-size: 13px; line-height: 1.5; font-weight: 600; }
.timeline-card{ padding: 4px 12px; background: var(--lv-card); }
.tl-item{ position: relative; padding: 12px 0 12px 24px; border-left: 2px dashed var(--lv-line); }
.tl-item::before{ content: ''; position: absolute; left: -6px; top: 17px; width: 10px; height: 10px; border-radius: var(--lv-r-pill); background: var(--lv-line); box-shadow: 0 0 0 4px var(--lv-card); }
.tl-item.done::before{ background: var(--lv-tiffany); }
.tl-item.active::before{ background: var(--lv-pink); animation: lv-pulse-dot 1.4s ease-in-out infinite; }
.tl-item:last-child{ border-left-color: transparent; }
.tl-item b{ display: block; font-size: 13px; }
.tl-item span{ display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--lv-dim); }
.mentor-card{ padding: 20px; color: var(--lv-on-brand); }
.mentor-card .big{ margin-top: 6px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.mentor-card p{ margin: 6px 0 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.55; }
@layer primitives{

.mini-progress { margin-top: 8px; height: 6px; }
}

@media (max-width: 380px){
  .dash-tabs { overflow-x: auto; justify-content: flex-start; }
  .dash-tabs button { flex: 0 0 auto; min-width: 74px; padding: 0 10px; }
  .rank-foot { flex-direction: column; }
  .rank-foot b { text-align: left; }
}

/* ---------- QR-сценарий подключения МСП ---------- */
.connect-hero{ margin: 14px 16px 0; border-radius: var(--lv-r-xl); padding: 16px; color: var(--lv-on-brand); display: grid; grid-template-columns: minmax(0, 1fr) 126px; gap: 16px; align-items: center; overflow: hidden; }
.connect-copy .kicker, .script-card .kicker, .pay-card .kicker, .status-flow-card .kicker{ font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.connect-copy h2{ margin: 5px 0 0; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; }
.connect-copy p{ margin: 7px 0 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.72); }
.connect-copy .chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.qr-card{ width: 126px; padding: 10px; border-radius: 18px; background: rgba(255,255,255,.94); color: var(--lv-ink-deep); box-shadow: 0 16px 38px -18px rgba(0,0,0,.42); text-align: center; }
.qr-card > span{ display: block; margin-top: 7px; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.qr-grid{ display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; aspect-ratio: 1; padding: 4px; border-radius: var(--lv-r-sm); background: var(--lv-white); }
.qr-grid span{ border-radius: 2px; background: transparent; }
.qr-grid span.on{ background: var(--lv-ink-deep); }
.script-card, .pay-card, .status-flow-card{ margin: 14px 16px 0; padding: 16px; border-radius: 18px; background: var(--lv-card); border: 1px solid var(--lv-line); box-shadow: var(--lv-shadow-soft); }
.script-card ol{ margin: 10px 0 0; padding-left: 20px; }
.script-card li{ margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--lv-dim); }
.script-card li b{ color: var(--lv-ink); }
.pay-card h2, .status-flow-card h2{ margin: 6px 0 12px; font-size: 22px; line-height: 1.22; letter-spacing: -.02em; }
.pay-card p{ margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--lv-dim); }
.pay-card .cta-btn{ margin-top: 14px; }
.pay-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--lv-line-2); }
.pay-row span{ font-size: 12px; color: var(--lv-dim); font-weight: 700; }
.pay-row b{ font-size: 14px; font-weight: 900; letter-spacing: .04em; }
@media (max-width: 430px){
  .connect-hero { grid-template-columns: 1fr; }
  .qr-card { width: 148px; justify-self: center; }
}

/* ---------- UX-полировка QR/MСП сценария: stepper, очередь, trust cues ---------- */
.msp-mobile-head{ margin: 14px 16px 0; border-radius: var(--lv-r-xl); padding: 20px; color: var(--lv-on-brand); display: flex; gap: 12px; align-items: flex-start; }
.msp-mobile-head .mh-emoji{ flex-shrink: 0; width: 50px; height: 50px; border-radius: var(--lv-r-lg); background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.msp-mobile-head .kicker{ font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.msp-mobile-head h1{ margin: 3px 0 0; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; }
.msp-mobile-head p{ margin: 7px 0 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.72); }
.field-help{ margin: 6px 16px 0; font-size: 12px; line-height: 1.45; color: var(--lv-dim); }
.qr-link-row{ margin: 10px 16px 0; display: flex; align-items: center; gap: 8px; }
.qr-link-row code{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 10px; border-radius: var(--lv-r-sm); background: var(--lv-surface); color: var(--lv-dim); font-size: 11px; }
.trust-cues{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 16px 0; }
.trust-cues span{ display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 8px 10px; border-radius: var(--lv-r-sm); background: var(--lv-surface); color: var(--lv-ink); font-size: 12px; font-weight: 700; }
.trust-cues svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); color: var(--lv-tiffany); flex-shrink: 0; }
.stepper{ margin: 14px 16px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.step{ position: relative; min-width: 0; padding: 8px 6px; border-radius: var(--lv-r-md); background: var(--lv-surface); border: 1px solid var(--lv-line); text-align: center; color: var(--lv-dim); }
.step span{ display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--lv-r-pill); background: var(--lv-card); border: 1px solid var(--lv-line); font-size: 11px; font-weight: 900; }
.step b{ display: block; margin-top: 5px; font-size: 10px; line-height: 1.2; font-weight: 800; }
.step.done{ background: var(--lv-soft-tiffany); border-color: color-mix(in srgb, var(--lv-tiffany) 24%, transparent); color: var(--lv-tiffany-text); }
.step.done span{ background-image: linear-gradient(135deg, var(--lv-tiffany), #078d89); color: var(--lv-on-brand); border-color: transparent; }
.step.current{ box-shadow: 0 0 0 2px rgba(246,74,138,.16); }
.approval-card, .empty-state-card, .checklist-card{ margin: 10px 16px 0; padding: 12px; border-radius: var(--lv-r-lg); background: var(--lv-card); border: 1px solid var(--lv-line); box-shadow: var(--lv-shadow-soft); }
.empty-state-card{ text-align: center; padding: 26px 16px; }
.empty-state-card .big-emoji{ font-size: 36px; }
.empty-state-card h3{ margin: 8px 0 0; font-size: 18px; font-weight: 800; }
.empty-state-card p{ margin: 6px auto 0; max-width: 310px; font-size: 13px; color: var(--lv-dim); line-height: 1.55; }
.empty-state-card .cta-btn{ margin-top: 14px; }
.approval-head{ display: flex; align-items: center; gap: 12px; }
.review-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.review-grid div{ min-width: 0; padding: 10px; border-radius: var(--lv-r-sm); background: var(--lv-card); border: 1px solid var(--lv-line); box-shadow: var(--lv-shadow-soft); }
.review-grid span{ display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lv-dim); }
.review-grid b{ display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.approval-actions{ display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rep-cabinet .approval-card{ padding: 14px 16px 16px; }
.rep-cabinet .approval-head{ gap: 12px; }
.rep-cabinet .review-grid{ margin-top: 14px; gap: 8px; }
/* Короткие реквизиты — в две колонки; длинные (адрес, контакт) — на всю ширину. */
.rep-cabinet .review-grid > div:nth-child(3), .rep-cabinet .review-grid > div:nth-child(4){ grid-column: 1 / -1; }
@media (max-width: 430px){ .rep-cabinet .review-grid{ grid-template-columns: 1fr 1fr; } }
.rep-cabinet .review-grid div{ padding: 12px; }
.rep-cabinet .review-grid b{ margin-top: 4px; }
.status-flow-card p{ margin: 8px 0 0; font-size: 13px; color: var(--lv-dim); line-height: 1.55; }
.checklist-card{ padding: 4px 12px; }
.cl-row{ position: relative; padding: 12px 0 12px 24px; border-left: 2px dashed var(--lv-line); }
.cl-row:last-child{ border-left-color: transparent; }
.cl-row::before{ content: ''; position: absolute; left: -6px; top: 17px; width: 10px; height: 10px; border-radius: var(--lv-r-pill); background: var(--lv-line); box-shadow: 0 0 0 4px var(--lv-card); }
.cl-row.done::before{ background: var(--lv-tiffany); }
.cl-row.active::before{ background: var(--lv-pink); animation: lv-pulse-dot 1.4s ease-in-out infinite; }
.cl-row b{ display: block; font-size: 13px; }
.cl-row span{ display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--lv-dim); }
@media (max-width: 430px){
  .trust-cues, .review-grid { grid-template-columns: 1fr; }
  .stepper { display: flex; overflow-x: auto; padding-bottom: 2px; }
  .step { flex: 0 0 106px; }
  .qr-link-row { align-items: stretch; flex-direction: column; }
}

/* ---------- Следующий шаг (контекстуальная карточка) ---------- */
.next-step-card{ display: flex; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 12px; background: var(--lv-card); border: 1px solid var(--lv-line); border-left: 3px solid var(--lv-tiffany); border-radius: var(--lv-r-lg); box-shadow: var(--lv-shadow-soft); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.next-step-card:active{ transform: scale(.98); box-shadow: 0 1px 6px rgba(10, 186, 181, .18); }
.ns-icon{ flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--lv-r-sm); background: var(--lv-soft-tiffany); display: flex; align-items: center; justify-content: center; font-size: 22px; }.ns-body, .ps-body{ flex: 1; min-width: 0; }
.ns-title{ font-size: 14px; font-weight: 800; color: var(--lv-ink); line-height: 1.35; }
.ns-desc{ margin-top: 3px; font-size: 12px; color: var(--lv-dim); line-height: 1.4; }
.ns-arrow{ flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--lv-dim); }.ns-arrow svg, .qa-icon svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }
.next-step-card.gold{ border-left-color: var(--lv-gold); }
.next-step-card.gold .ns-icon{ background: var(--lv-soft-gold); }
.next-step-card.gold:active{ box-shadow: 0 1px 6px rgba(212, 168, 84, .18); }

/* ---------- Быстрые действия (2×2 сетка) ---------- */
.quick-actions-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 20px; }.quick-action-card, /* ---------- Training tab: tool cards ---------- */ .tool-card{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); box-shadow: var(--lv-shadow-soft); text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .2s; }
.quick-action-card:active{ transform: scale(.97); box-shadow: 0 1px 6px rgba(26, 26, 26, .1); border-color: var(--lv-pink); }
.qa-icon{ width: 34px; height: 34px; border-radius: 10px; background: var(--lv-surface); display: flex; align-items: center; justify-content: center; color: var(--lv-pink); }
.qa-title{ font-size: 13px; font-weight: 800; color: var(--lv-ink); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.qa-badge{ min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--lv-r-pill); background-image: linear-gradient(135deg, var(--lv-pink), var(--lv-pink-dark)); color: var(--lv-white); font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }.qa-desc, .tc-desc{ font-size: 12px; color: var(--lv-dim); line-height: 1.35; }

/* ---------- Training tab: progress summary ---------- */
.progress-summary-card{ display: flex; align-items: center; gap: 16px; margin: 14px 16px 0; padding: 16px; background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: 18px; box-shadow: var(--lv-shadow-soft); }
.ps-ring{ position: relative; flex-shrink: 0; width: 56px; height: 56px; }
.progress-ring-svg{ width: 56px; height: 56px; }
.ps-pct{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; color: var(--lv-ink); }
.ps-title{ font-size: 14px; font-weight: 800; color: var(--lv-ink); }
.ps-sub{ margin-top: 2px; font-size: 12px; color: var(--lv-dim); line-height: 1.35; }

/* ---------- Training tab: lesson meta row ---------- */
.lesson-meta{ display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.lesson-meta .mini-progress{ flex: 1; margin-top: 0; height: 5px; }
.lesson-dur{ flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--lv-dim); white-space: nowrap; }
.lesson-pct{ flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--lv-ink); min-width: 28px; text-align: right; }

/* ---------- Training tab: status badges ---------- */
.lesson-status{ flex-shrink: 0; padding: 4px 10px; border-radius: var(--lv-r-pill); font-size: 11px; font-weight: 800; white-space: nowrap; line-height: 1; }

.lesson-status.pending{ background: var(--lv-surface); color: var(--lv-dim); }
.tool-card:active{ transform: scale(.97); box-shadow: 0 1px 6px rgba(26,26,26,.1); border-color: var(--lv-pink); }
.tc-icon{ width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.tc-title{ font-size: 13px; font-weight: 800; color: var(--lv-ink); }

/* ============================================================
   LOVII PAY — профиль лояльности (редизайн 2026-09)
   ------------------------------------------------------------
   Канон цветов/теней — только var(--lv-*). Белые rgba-оверлеи —
   только НА ink-градиенте (прецедент: .glass-chip, .prof-ava).
   ⚠ Класс 3D-карты — .paycard (без дефиса): .pay-card занят
   карточкой шага «Платёж и возврат» в онбординге МСП.
   Секции: хедер · 3D-карта (flip+tilt) · счёт · история ·
   уровни PAY→PASS→VIP · привилегии · избранные МСП.
   ============================================================ */

/* ---------- 1. Хедер участника ---------- */
.pay-head{ display: flex; align-items: center; gap: 12px; margin: 16px 16px 0; }
.pay-head .prof-name{ font-size: 18px; }
.pay-badge{ margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: var(--lv-r-pill); background: var(--lv-soft-gold); color: var(--lv-gold-text); font-size: 11px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.pay-badge svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); }

/* ---------- 2. Карта LOVII PAY ---------- */
.pay-stage{ margin: 14px 16px 0; }
.pay-tilt{ perspective: 1100px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease; }
.paycard{ position: relative; display: block; width: 100%; margin: 0; aspect-ratio: 1.586 / 1; border: 0; padding: 0; cursor: pointer; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.75,.25,1); text-align: left; border-radius: var(--lv-r-xl); box-shadow: 0 18px 44px -18px rgba(26, 26, 26, .5); }
.paycard.flipped{ transform: rotateY(180deg); }
.paycard:active{ transform: scale(.985); }
.paycard.flipped:active{ transform: rotateY(180deg) scale(.985); }
.pay-face{ position: absolute; inset: 0; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--lv-r-xl); background-image: var(--lv-gradient-ink); overflow: hidden; color: var(--lv-white); padding: 16px 20px; }
/* золотой блик на лицевой стороне */
.pay-sheen{ position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 88% -8%, rgba(212, 168, 84, .38) 0%, rgba(212, 168, 84, .1) 34%, transparent 62%), radial-gradient(90% 70% at -6% 108%, rgba(246, 74, 138, .28) 0%, transparent 55%); }
/* премиальные блики: пятно света следит за курсором (только pointer:fine),
   координаты --gx/--gy в % ставит initPayCardFx (js/club.js) */
.pay-glare{ position: absolute; inset: 0; pointer-events: none; background: radial-gradient(300px 300px at var(--gx, 70%) var(--gy, 15%), rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .07) 40%, transparent 65%); opacity: 0; transition: opacity .25s ease; }
.pay-tilt:hover .pay-glare{ opacity: 1; }
/* живой свип-луч (канон владельца 2026-09-12 — эффект прототипа lv-card-shine):
   при hover/tap через карту за ~1.15s пробегает диагональный луч света;
   transition:none в покое — при уходе курсора луч мгновенно возвращается,
   каждое наведение = свежий пробег. Тонировка под скин — в блоках скинов */
.pay-sweep{ position: absolute; inset: -60% -20%; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .18) 48%, rgba(255, 255, 255, .06) 52%, transparent 60%); transform: translateX(-120%); transition: none; will-change: transform; }
.paycard:hover .pay-sweep, .paycard:active .pay-sweep{ transform: translateX(120%); transition: transform 1.15s cubic-bezier(.25, .6, .3, 1); }
@media (prefers-reduced-motion: reduce){ .pay-sweep { display: none; } }
@media (hover: hover){
  .pay-tilt:hover .paycard { box-shadow: 0 24px 52px -18px rgba(26, 26, 26, .58); }
}

/* ---- Скины карт v2 (продуктовая доработка 2026-09-12): счёт и номер одни —
   меняется только оформление. Каждый статус читается в ленте с одного взгляда:
   PAY — светлое серебро (единственная светлая, база) · PASS — брендовый розовый
   (представитель, шёлк) · VIP — чёрное золото (гильошировка + рамка) ·
   BUSINESS — тиффани-графит (техническая сетка точки). Узор — слои
   background-image на .pay-face, свет — .pay-sheen/.pay-glare/.pay-sweep,
   статус-марки — .pay-mark. Канон владельца 2026-09-12 в силе. ---- */

/* LOVII PAY — «серебро»: всем при регистрации. Единственная светлая карта
   программы — физическая белая металлическая с брашированной текстурой */
.paycard.skin-pay .pay-face{
  color: var(--lv-ink-deep);
  background-image:
    repeating-linear-gradient(115deg, rgba(26, 26, 26, .026) 0 1px, transparent 1px 7px),
    linear-gradient(160deg, rgba(26, 26, 26, .08) 0%, transparent 30%, rgba(26, 26, 26, .16) 100%),
    linear-gradient(150deg, var(--lv-white) 0%, #f5f5f7 52%, #e7e7ed 100%);
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, .1), inset 0 -26px 48px -34px rgba(26, 26, 26, .3);
}
.paycard.skin-pay .pay-brand{ background: linear-gradient(90deg, #43434b 0%, #87878f 55%, #5a5a64 100%); -webkit-background-clip: text; background-clip: text; }
.paycard.skin-pay .pay-chip{ background: linear-gradient(135deg, #eef0f4, #c8ccd6 55%, #9aa0ac); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.paycard.skin-pay .pay-chip::before{ border-color: rgba(26, 26, 26, .28); }
.paycard.skin-pay .pay-num{ color: #212126; text-shadow: 0 1px 0 rgba(255, 255, 255, .85); }.paycard.skin-pay .pay-bot .lbl, .paycard.skin-pay .pay-back-bot{ color: rgba(26, 26, 26, .52); }
.paycard.skin-pay .pay-bot .val{ color: #1f1f24; }
.paycard.skin-pay .pay-bal .val{ color: #8a6a25; }
.paycard.skin-pay .pay-sheen{ background: radial-gradient(120% 90% at 88% -8%, rgba(212, 168, 84, .14) 0%, rgba(212, 168, 84, .04) 34%, transparent 60%), radial-gradient(90% 70% at -6% 108%, rgba(26, 26, 26, .07) 0%, transparent 55%); }
.paycard.skin-pay .pay-glare{ background: radial-gradient(300px 300px at var(--gx, 70%) var(--gy, 15%), rgba(212, 168, 84, .22) 0%, rgba(212, 168, 84, .05) 40%, transparent 65%); }
.paycard.skin-pay .pay-sweep{ background: linear-gradient(115deg, transparent 40%, rgba(26, 26, 26, .07) 45%, rgba(255, 255, 255, .92) 49%, rgba(255, 255, 255, .92) 51%, rgba(26, 26, 26, .07) 55%, transparent 60%); }
/* оборот светлой карты — графитовые подписи */
.paycard.skin-pay .pay-cvv .lbl{ color: rgba(26, 26, 26, .5); }
.paycard.skin-pay .pay-note{ color: rgba(26, 26, 26, .72); }
.paycard.skin-pay .pay-qr{ box-shadow: inset 0 0 0 1px rgba(26, 26, 26, .1); }
/* LOVII PASS — «бренд»: по подписке Лови; статус представителя LOVII +
   вывод 0% от 3 000 ₽. Полноценный розовый градиент бренда + шёлк —
   карта, которую хочется показать в сторис */
.paycard.skin-pass .pay-face{
  background-image:
    radial-gradient(130% 110% at 86% -12%, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, rgba(74, 7, 40, 0) 42%, rgba(74, 7, 40, .45) 100%),
    var(--lv-gradient-brand);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), inset 0 0 44px rgba(74, 7, 40, .3);
}
.paycard.skin-pass .pay-brand{ background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .72) 60%, rgba(255, 215, 230, .85) 100%); -webkit-background-clip: text; background-clip: text; }
.paycard.skin-pass .pay-chip{ background: linear-gradient(135deg, #ffe9f3, #f9c2da 55%, #f09fc4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.paycard.skin-pass .pay-chip::before{ border-color: rgba(157, 32, 86, .4); }
.paycard.skin-pass .pay-num{ text-shadow: 0 1px 3px rgba(90, 10, 50, .5); }
.paycard.skin-pass .pay-bot .lbl{ color: rgba(255, 255, 255, .78); }.paycard.skin-pass .pay-bal .val, .paycard.skin-vip .pay-bal .val{ color: #f3d9a4; }
.paycard.skin-pass .pay-sheen{ background: radial-gradient(120% 90% at 88% -8%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .06) 34%, transparent 60%), radial-gradient(90% 70% at -6% 108%, rgba(123, 17, 66, .42) 0%, transparent 58%); }
.paycard.skin-pass .pay-glare{ background: radial-gradient(300px 300px at var(--gx, 70%) var(--gy, 15%), rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 40%, transparent 65%); }
.paycard.skin-pass .pay-sweep{ background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .42) 48%, rgba(255, 214, 230, .14) 52%, transparent 60%); }
.paycard.skin-pass .pay-mark{ color: rgba(255, 255, 255, .95); }
/* LOVII VIP — «чёрное золото»: оборот от 300 000 ₽/мес. Глубже ink,
   золотая гильошировка кольцами с двух углов, рамка-паспарту, кромка/номер/чип золотые */
.paycard.skin-vip .pay-face{
  background-image:
    radial-gradient(120% 90% at 88% -8%, rgba(212, 168, 84, .32) 0%, rgba(212, 168, 84, .1) 34%, transparent 62%),
    repeating-radial-gradient(circle at 112% -18%, transparent 0 10px, rgba(212, 168, 84, .06) 10px 11px),
    repeating-radial-gradient(circle at -12% 118%, transparent 0 14px, rgba(212, 168, 84, .05) 14px 15px),
    linear-gradient(135deg, rgba(212, 168, 84, .3) 0%, rgba(212, 168, 84, .1) 45%, rgba(0, 0, 0, .55) 100%),
    var(--lv-gradient-ink);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 84, .6), inset 0 0 44px rgba(212, 168, 84, .14);
}
.paycard.skin-vip .pay-face::after{ content: ''; position: absolute; inset: 9px; border: 1px solid rgba(212, 168, 84, .38); border-radius: 15px; pointer-events: none; }
.paycard.skin-vip .pay-num{ color: rgba(243, 217, 164, 1); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.paycard.skin-vip .pay-bot .lbl{ color: rgba(243, 217, 164, .62); }
.paycard.skin-vip .pay-bot .val{ color: var(--lv-white); }
.paycard.skin-vip .pay-sheen{ background: radial-gradient(120% 90% at 88% -8%, rgba(243, 217, 164, .5) 0%, rgba(212, 168, 84, .16) 34%, transparent 62%); }
.paycard.skin-vip .pay-glare{ background: radial-gradient(300px 300px at var(--gx, 70%) var(--gy, 15%), rgba(255, 232, 180, .34) 0%, rgba(255, 232, 180, .08) 40%, transparent 65%); }
.paycard.skin-vip .pay-sweep{ background: linear-gradient(115deg, transparent 42%, rgba(255, 232, 180, .38) 48%, rgba(212, 168, 84, .14) 52%, transparent 60%); }
.paycard.skin-vip .pay-mark{ color: #f3d9a4; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
/* LOVII BUSINESS — «точка»: по умолчанию всем МСП. Тиффани-графит +
   техническая сетка (рабочая карта счёта точки), оборот/мес на карточке */
.paycard.skin-biz .pay-face{
  background-image:
    radial-gradient(120% 90% at 88% -8%, rgba(10, 186, 181, .26) 0%, rgba(10, 186, 181, .08) 40%, transparent 62%),
    repeating-linear-gradient(0deg, rgba(10, 186, 181, .05) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(90deg, rgba(10, 186, 181, .05) 0 1px, transparent 1px 13px),
    linear-gradient(135deg, rgba(10, 186, 181, .24) 0%, rgba(10, 186, 181, .09) 48%, rgba(0, 0, 0, .44) 100%),
    var(--lv-gradient-ink);
  box-shadow: inset 0 0 0 1px rgba(10, 186, 181, .42), inset 0 0 44px rgba(10, 186, 181, .1);
}
.paycard.skin-biz .pay-brand{ background: linear-gradient(90deg, rgba(214, 255, 249, .95) 0%, var(--lv-tiffany) 55%, var(--lv-tiffany) 100%); -webkit-background-clip: text; background-clip: text; font-size: 14px; }
.paycard.skin-biz .pay-chip{ background: linear-gradient(135deg, rgba(214, 255, 249, .9), var(--lv-tiffany) 60%, rgba(7, 125, 120, 1)); }
.paycard.skin-biz .pay-num{ color: #ecfffd; }
.paycard.skin-biz .pay-bot .lbl{ color: rgba(230, 255, 252, .62); }.paycard.skin-biz .pay-bal .val, .paycard.skin-biz .pay-mark{ color: #9fe8e4; }
.paycard.skin-biz .pay-sheen{ background: radial-gradient(120% 90% at 88% -8%, rgba(10, 186, 181, .3) 0%, rgba(10, 186, 181, .08) 34%, transparent 62%), radial-gradient(90% 70% at -6% 108%, rgba(255, 255, 255, .12) 0%, transparent 55%); }
.paycard.skin-biz .pay-glare{ background: radial-gradient(300px 300px at var(--gx, 70%) var(--gy, 15%), rgba(214, 255, 249, .32) 0%, rgba(214, 255, 249, .07) 40%, transparent 65%); }
.paycard.skin-biz .pay-sweep{ background: linear-gradient(115deg, transparent 42%, rgba(230, 255, 252, .34) 48%, rgba(10, 186, 181, .14) 52%, transparent 60%); }
.pay-top{ position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pay-brand{ font-size: 18px; font-weight: 800; letter-spacing: .14em; background: linear-gradient(90deg, #f3d9a4 0%, var(--lv-gold) 55%, #b98d3e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pay-chip{ position: relative; width: 40px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #f3d9a4, var(--lv-gold) 60%, #b98d3e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.pay-chip::before{ content: ''; position: absolute; inset: 6px 8px; border: 1px solid rgba(26, 26, 26, .35); border-radius: 4px; }
/* статус-марка на карте (сердце PASS / корона VIP / домик BUSINESS; PAY — без марки) */
.pay-mark{ position: relative; margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--lv-r-pill); }
.pay-mark svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }
.pay-num{ position: relative; margin-top: auto; margin-bottom: 14px; font-size: clamp(17px, 5.6vw, 21px); font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--lv-white); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); white-space: nowrap; }
/* номер масштабируется от ШИРИНЫ КАРТЫ, а не вьюпорта: в узкой колонке
   ≥640px (карта ~250–330px) vw-кламп обрезал номер — cqw чинит (fallback выше) */
@supports (font-size: 1cqw){
  .pay-stage { container-type: inline-size; }
  .pay-num { font-size: clamp(12px, 5.8cqw, 21px); }
}
.pay-bot{ position: relative; display: flex; align-items: flex-end; gap: 12px; }
.pay-bot .lbl{ display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.pay-bot .val{ display: block; margin-top: 2px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--lv-white); }.pay-holder, .tx-mid{ min-width: 0; }
.pay-holder .val{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-bal{ margin-left: auto; text-align: right; }
.pay-bal .val{ font-size: 16px; font-weight: 800; color: var(--lv-gold); }
/* оборот карты */
.pay-back{ transform: rotateY(180deg); padding: 0; }
.pay-mag{ display: block; height: 40px; margin-top: 16px; background: rgba(0, 0, 0, .5); }
.pay-back-mid{ display: flex; align-items: center; gap: 12px; padding: 12px 20px 0; }
.pay-qr{ flex-shrink: 0; width: 84px; height: 84px; padding: 6px; border-radius: var(--lv-r-sm); background: var(--lv-white); color: var(--lv-ink-deep); }
.pay-qr svg{ display: block; width: 100%; height: 100%; }
.pay-back-info{ min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pay-cvv .lbl{ display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.pay-cvv .val{ margin-top: 2px; display: inline-block; padding: 2px 10px; border-radius: 6px; background: rgba(255, 255, 255, .92); color: var(--lv-ink-deep); font-size: 12px; font-weight: 700; letter-spacing: .2em; }
.pay-note{ font-size: 11px; line-height: 1.45; color: rgba(255, 255, 255, .75); }
.pay-back-bot{ margin-top: auto; padding: 0 20px 12px; font-size: 10px; font-weight: 600; letter-spacing: .03em; color: rgba(255, 255, 255, .55); }
/* подсказки под картой */
.pay-hints{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.pay-hint{ display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--lv-dim); }
.pay-hint svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); }
.pay-hint.as-btn{ color: var(--lv-pink); }
.pay-hint.as-btn:active{ opacity: .7; }/* ---------- 3. Счёт кэшбека ---------- */ .acct-card, /* ---------- 5. Статус LOVII PAY ---------- */ .tier-card{ margin: 10px 16px 0; padding: 16px; background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); box-shadow: var(--lv-shadow-soft); }
.acct-balance{ font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.acct-balance .unit{ margin-left: 4px; font-size: 18px; font-weight: 700; color: var(--lv-pink); }
.acct-lbl{ margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--lv-dim); }
.acct-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.as-b{ padding: 10px 8px; border-radius: var(--lv-r-sm); background: var(--lv-surface); text-align: center; }
.as-b .v{ display: block; font-size: 14px; font-weight: 800; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.as-b .l{ display: block; margin-top: 2px; font-size: 10px; font-weight: 600; color: var(--lv-dim); }
.acct-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.acct-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 12px; border-radius: var(--lv-r-pill); font-size: 13px; font-weight: 700; transition: transform .15s; }
.acct-btn:active{ transform: scale(.97); }
.acct-btn svg{ width: var(--lv-icon-16); height: 15px; }
.acct-btn.brand{ background-image: var(--lv-gradient-brand); color: var(--lv-on-brand); }
.acct-btn.ghost{ border: 1px solid var(--lv-line-strong); color: var(--lv-ink); background: var(--lv-card); }

/* ---------- 4. История операций ---------- */
.tx-tabs{ display: flex; gap: 6px; padding: 0 var(--lv-gutter); margin: 10px 0 2px; overflow-x: auto; }
.tx-tabs .tab-btn{ flex-shrink: 0; padding: 6px 12px; border-radius: var(--lv-r-pill); background: var(--lv-surface); font-size: 12px; font-weight: 700; color: var(--lv-dim); transition: background .15s, color .15s; }
.tx-list{ padding: 2px 12px; }
.tx-day{ padding: 12px 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lv-dim); }
.tx-day:first-child{ padding-top: 10px; }
.tx-row{ display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.tx-row + .tx-row{ border-top: 1px solid var(--lv-line-2); }
.tx-row:has(+ .tx-day){ border-top: 0; }
.tx-ico{ flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--lv-r-sm); display: flex; align-items: center; justify-content: center; }.tx-ico svg, .priv-card .pc-ico svg, .msp-fav svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }
.tx-name{ font-size: 13px; font-weight: 700; color: var(--lv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-meta{ margin-top: 1px; font-size: 11px; color: var(--lv-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-sum{ flex-shrink: 0; font-size: 14px; font-weight: 800; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.tx-sum.plus{ color: var(--lv-tiffany-text); }
.tier-row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tier-name{ display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--lv-ink); }
.tier-name svg{ width: var(--lv-icon-16); height: 15px; color: var(--lv-gold); }
.tier-cond{ padding: 2px 10px; border-radius: var(--lv-r-pill); background: var(--lv-soft-gold); color: var(--lv-gold-text); font-size: 11px; font-weight: 800; }
.tier-bar{ height: 6px; margin-top: 12px; border-radius: var(--lv-r-pill); background: var(--lv-surface); overflow: hidden; }
.tier-bar span{ display: block; height: 100%; border-radius: var(--lv-r-pill); background-image: var(--lv-gradient-gold); transition: width .4s ease; }
.tier-next{ margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--lv-dim); }
.tier-next b{ color: var(--lv-ink); }
.tier-perks{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tp{ display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--lv-r-pill); background: var(--lv-surface); font-size: 11px; font-weight: 600; color: var(--lv-ink); }
.tp svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); color: var(--lv-tiffany-text); }

/* ---------- 6. Витрина привилегий ---------- */
.priv-scroll{ padding: 4px 16px 6px; }
.priv-card{ flex-shrink: 0; width: 168px; padding: 12px; border-radius: var(--lv-r-lg); border: 1px solid var(--lv-line); background: var(--lv-card); box-shadow: var(--lv-shadow-soft); display: flex; flex-direction: column; gap: 6px; }
.priv-card .pc-ico{ width: 34px; height: 34px; border-radius: var(--lv-r-sm); display: flex; align-items: center; justify-content: center; }
.pc-title{ font-size: 13px; font-weight: 800; line-height: 1.3; color: var(--lv-ink); }
.pc-sub{ font-size: 11px; line-height: 1.4; color: var(--lv-dim); }

/* ---------- 7. Избранные МСП ---------- */
.msp-fav{ flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--lv-r-pill); display: flex; align-items: center; justify-content: center; background: var(--lv-soft-pink); color: var(--lv-pink); transition: transform .15s; }
.msp-fav:active{ transform: scale(.9); }
/* Полировка: светлая окантовка карты (сепарация на тёмном фоне) + ритм секций */
.pay-face{ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.pay-screen .section-head{ margin-top: 22px; }

/* ---------- 8. Адаптив: планшет/десктоп (≥640px) ----------
   Двухколоночная композиция «как в веб-банке»:
   слева карта + счёт (липкая колонка), справа история + статус.
   На мобильном (<640px) колонки стекаются в прежнем порядке:
   карта → счёт → история → статус. Привилегии — сеткой. */
.pay-cols{ display: block; }
@media (min-width: 640px){
  .pay-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 0 22px; padding: 0 var(--lv-gutter); }
  .pay-col-a, .pay-col-b { min-width: 0; }
  /* липкая левая колонка: карта остаётся на экране при скролле истории
     (только на достаточно высоких окнах — иначе липкая ловушка) */
  @media (min-height: 660px) {
    .pay-col-a { position: sticky; top: 68px; }
  }
  /* сбоку колонок 16px уже не нужны — паддинг несёт сетка;
     карточки колонок выравниваем по кромкам колонки (без мобильных margin) */
  .pay-cols .pay-stage { margin: 14px 0 0; }
  .pay-cols .section-head { padding: 0; }
  .pay-cols .acct-card, .pay-cols .tier-card, .pay-cols .tx-list { margin-left: 0; margin-right: 0; }
  /* первый заголовок правой колонки — по верхней кромке карты левой */
  .pay-cols .pay-col-b > .section-head:first-child { margin-top: 14px; }
  .pay-cols .tx-tabs { padding: 0; gap: 4px; }
  /* карточка выровнена по кромкам колонки, НО внутренний отстрочник контента
     сохраняем (как на мобильном 14px) — иначе иконки операций липнут к рамке */
  .pay-cols .tx-list { padding: 2px 12px; }
  /* табы в узкой колонке: равные, но в одну строку — без обрезки «Списания» */
  .pay-cols .tx-tabs .tab-btn { flex: 1; white-space: nowrap; padding: 6px 8px; font-size: 12px; }
  /* подсказки в узкой колонке: компактнее; каждая — одной строкой,
     переносятся целиком (без лесенки внутри подписи) */
  .pay-cols .pay-hints { flex-wrap: wrap; row-gap: 4px; }
  .pay-cols .pay-hint { font-size: 11px; gap: 4px; white-space: nowrap; }
  .pay-cols .pay-hint svg { width: var(--lv-icon-12); height: var(--lv-icon-12); }
  /* привилегии: сетка вместо горизонтальной ленты */
  .pay-screen .priv-scroll { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
  .pay-screen .priv-card { width: auto; }
}
@media (min-width: 1024px){
  .pay-cols { gap: 0 28px; }
}

/* ============================================================
   9. Профиль SCR-PROFILE-v1 (сборка 38): карусель кошелька,
   мини-превью карт, настройки (switch-row/seg), pin-pad/lock-screen.
   Компоненты описаны в каноне lovii-design v1.15 (docs/12).
   ============================================================ */

/* ---------- Карусель кошелька: 4 слайда + цветные мини-превью ---------- */
/* Вертикальный запас (канон ДС 1.16.0, docs/10 §2.3): overflow-x:auto клиппит и по вертикали
   (visible во второй оси → auto), а перспектива при флипе выносит углы карты до ~18px за плоский
   бокс; мобильная карта — самая большая (390 → 386×243, замер на 90°+tilt-max: до 41px).
   padding-block: 46px расширяет clip-box (он = padding-box), margin-block: -42px возвращает
   прежний ритм (заголовок и мини-превью не сдвигаются).
   Горизонталь (фикс «карта липнет к краям», сборка 41): padding-inline 16px — карта живёт
   в общем контент-блоке экрана (как хедер и секции, 358px на 390), НЕ full-bleed. */
.pay-carousel{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 46px 16px;
  margin: -42px 0;
  scrollbar-width: none;
}
.pay-carousel::-webkit-scrollbar{ display: none; }
.pay-slide{ flex: 0 0 100%; min-width: 0; scroll-snap-align: center; }
.pay-slide .pay-stage{ margin: 0; }

/* мини-превью карт (mini-card): цвет — тон скина, активная — кольцо бренда */
.pay-minis{ display: flex; gap: 10px; margin: 12px 16px 0; }
.mini-card{
  position: relative;
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  border-radius: var(--lv-r-sm);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
  transition: transform .15s, box-shadow .15s;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.mini-card:active{ transform: scale(.95); }
.mini-card .mc-chip{ width: 12px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(26, 26, 26, .25); flex-shrink: 0; }
.mini-card .mc-tag{ font-size: 10px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* тона скинов (упрощённые градиенты карт — канон 2026-09-12) */
.mini-card.skin-pay{ background-image: linear-gradient(150deg, var(--lv-white) 0%, #f5f5f7 52%, #e7e7ed 100%); box-shadow: inset 0 0 0 1px rgba(26, 26, 26, .16); color: #43434b; }
.mini-card.skin-pay .mc-chip{ background: linear-gradient(135deg, #eef0f4, #c8ccd6 55%, #9aa0ac); }
.mini-card.skin-pass{ background-image: var(--lv-gradient-brand); color: var(--lv-white); }
.mini-card.skin-vip{ background-image: var(--lv-gradient-ink); box-shadow: inset 0 0 0 1px rgba(212, 168, 84, .6); color: #f3d9a4; }
.mini-card.skin-vip .mc-chip{ background: linear-gradient(135deg, #f3d9a4, #b98d3e); }
.mini-card.skin-biz{ background-image: var(--lv-gradient-ink); box-shadow: inset 0 0 0 1px rgba(10, 186, 181, .42); color: #9fe8e4; }
.mini-card.skin-biz .mc-chip{ background: linear-gradient(135deg, rgba(214, 255, 249, .9), rgba(7, 125, 120, 1)); }
.mini-card.active{ box-shadow: 0 0 0 2px var(--lv-card), 0 0 0 4px var(--lv-pink); }
.mini-card:focus-visible{ outline: 2px solid var(--lv-pink); outline-offset: 3px; }
/* карусель в левой колонке ≥640px: колонка уже даёт 16px по бокам (padding: 0 var(--lv-gutter)) —
   горизонтальный запас карусели гасим, вертикальный остаётся (docs/10 §2.3) */
@media (min-width: 640px){
  .pay-cols .pay-carousel { margin: -42px 0; padding-inline: 0; }
  .pay-cols .pay-minis { margin-inline: 0; }
}

/* ---------- Настройки: группы, switch-row, seg ---------- */
.set-sub{ margin: 14px 16px 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lv-dim); }
.pay-cols .set-sub{ margin: 14px 0 6px; }
.switch-row{ width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.switch-row:disabled{ cursor: default; opacity: .55; }
.switch-row .chev{ flex-shrink: 0; width: 20px; height: 20px; color: var(--lv-dim); }
.switch-row .chev svg{ width: var(--lv-icon-20); height: var(--lv-icon-20); }
.sr-ico{ flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--lv-r-sm); display: flex; align-items: center; justify-content: center; }
.sr-ico svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }

/* свитч (component: switch-row) */
@layer primitives{

/* свитч (component: switch-row) */
.lv-switch { position: relative; flex-shrink: 0; width: 44px; height: 26px; border-radius: var(--lv-r-pill); background: var(--lv-surface); box-shadow: inset 0 0 0 1px var(--lv-line); transition: background .2s, box-shadow .2s; }
}

.lv-switch::after{ content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--lv-r-pill); background: var(--lv-white); box-shadow: 0 1px 3px rgba(26, 26, 26, .3); transition: transform .2s; }
@layer primitives{

.lv-switch.on { background-image: var(--lv-gradient-brand); box-shadow: none; }
}

@layer primitives{

.lv-switch.on::after { transform: translateX(18px); }
}

@layer primitives{

.lv-switch.disabled { opacity: .4; pointer-events: none; }
}
/* сегмент темы (component: seg) */ .seg-row, .pay-cols .seg-row{ padding: 0 12px 12px; }
@layer primitives{

.seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--lv-r-pill); background: var(--lv-surface); }
}

.seg button{ flex: 1; border: 0; font-family: inherit; border-radius: var(--lv-r-pill); padding: 6px 4px; font-size: 11px; font-weight: 700; color: var(--lv-dim); background: transparent; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.seg button.active{ background: var(--lv-soft-tiffany); color: var(--lv-tiffany-text); box-shadow: inset 0 0 0 1px var(--lv-tiffany-text); }

/* ---------- PIN-пэд и экран блокировки (component: pin-pad / lock-screen) ---------- */
.lock-screen{ position: fixed; inset: 0; z-index: 90; background: var(--lv-bg); display: flex; align-items: center; justify-content: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; }
.lock-screen[hidden]{ display: none; }
.lock-in{ display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 320px; }
.lock-logo img{ display: none; height: 30px; width: auto; }[data-theme="dark"] .lock-logo img.i-dark, [data-theme="light"] .lock-logo img.i-light{ display: block; }
.lock-name{ font-size: 13px; font-weight: 700; color: var(--lv-dim); }
.lock-title{ margin: 0; font-size: 18px; font-weight: 800; color: var(--lv-ink); }
.lock-sub{ font-size: 11px; line-height: 1.45; color: var(--lv-dim); text-align: center; }
.pin-dots{ display: flex; gap: 12px; margin: 4px 0; }
.pin-dot{ width: 12px; height: 12px; border-radius: var(--lv-r-pill); border: 1.5px solid var(--lv-dim); transition: background .15s, border-color .15s; }
.pin-dot.on{ background: var(--lv-pink); border-color: var(--lv-pink); }
.pin-dots.err{ animation: lv-pin-shake .45s ease; }
@layer base{

@keyframes lv-pin-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
}

.pin-pad{ display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center; margin-top: 8px; }
.pin-key{ height: 56px; border: 0; border-radius: var(--lv-r-pill); background: var(--lv-card); box-shadow: inset 0 0 0 1px var(--lv-line); font-family: inherit; font-size: 22px; font-weight: 700; color: var(--lv-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s, background .15s; }
.pin-key:active{ transform: scale(.93); background: var(--lv-surface); }
.pin-key.aux{ background: none; box-shadow: none; color: var(--lv-dim); }
.pin-key.aux svg{ width: var(--lv-icon-24); height: var(--lv-icon-24); }
.pin-key.aux[hidden]{ display: none; }
.pin-cancel{ margin-top: 6px; border: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--lv-pink); cursor: pointer; padding: 10px 16px; }
/* подтверждение выхода (logout) */
.lock-confirm{ display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 320px; padding: 24px; border-radius: var(--lv-r-xl); background: var(--lv-card); box-shadow: 0 18px 60px rgba(26, 26, 26, .25); }
.lock-confirm h2{ margin: 0; font-size: 18px; font-weight: 800; color: var(--lv-ink); }
.lock-confirm p{ margin: 0; font-size: 13px; line-height: 1.5; color: var(--lv-dim); text-align: center; }
.lock-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 6px; }
/* компакт-режим lock-screen: складные/квадратные экраны — обложки флипов (360×374, 384×388),
   flex-половина книжки (841×390), ландшафт телефонов. Канон ДС 1.15.1 (docs/04 «Брейкпоинты»,
   docs/12 §4): перехватчик обязан влезать целиком, без скролла; сход обычного режима — 660px,
   как у sticky-колонок профиля (@media min-height: 660px выше). Только токены var(--lv-*). */
@media (max-height: 659px){
  .lock-screen { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .lock-in { gap: 8px; }
  .lock-logo img { height: 24px; }
  .lock-name { font-size: 12px; }
  .lock-title { font-size: 16px; }
  .lock-sub { display: none; }
  .pin-dots { gap: 10px; margin: 0; }
  .pin-dot { width: 12px; height: 12px; }
  .pin-pad { grid-template-columns: repeat(3, 60px); gap: 8px; margin-top: 0; }
  .pin-key { height: 46px; font-size: 18px; }
  .pin-key.aux svg { width: var(--lv-icon-20); height: var(--lv-icon-20); }
  .pin-cancel { margin-top: 0; padding: 6px 16px; }
  .lock-confirm { padding: 16px; gap: 8px; }
  .lock-confirm h2 { font-size: 16px; }
  .lock-confirm p { font-size: 12px; }
}

/* ==========================================================================
   §10. Кабинеты ролей — редизайн 2026-09-14 (js/cabinets.js)
   Канон: один акцент pink, роль-цвет только в role-pill, статусы soft-парами,
   деньги tabular-nums, действия — только bottom-sheet.
   ========================================================================== */

/* Табы кабинетов: 6 вкладок на 390px — капсула с горизонтальным скроллом */
.seg.dash-tabs{ overflow-x: auto; scrollbar-width: none; }
.seg.dash-tabs::-webkit-scrollbar{ display: none; }
.seg.dash-tabs button{ flex: 0 0 auto; padding: 0 12px; white-space: nowrap; }

/* Шиты: длинный контент скроллится внутри, не выпадая за нижнюю кромку */
.sheet{ overflow: hidden; }
.sheet-body{ flex: 1 1 auto; min-height: 0; }

/* Иконки внутри канон-кнопок: фикс-размер, иначе svg растягивается по контексту */
.cta-btn svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); flex-shrink: 0; }

/* Роль-пилюля в шапке кабинета */
@layer primitives{

/* Роль-пилюля в шапке кабинета */
.role-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--lv-r-pill); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
}

.role-pill .lv-dot{ width: 5px; height: 5px; }

.dash-title .rp-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Деньги и коды — tabular-nums */
.tnum{ font-variant-numeric: tabular-nums; }

/* KPI-карточка-кнопка (связка обзор ↔ вкладка) */
button.kpi.as-btn{ border: 0; font-family: inherit; width: 100%; text-align: left; cursor: pointer; }
button.kpi.as-btn:hover .v{ color: var(--lv-pink-dark); }

/* Карточка подписки представителя (гейт SZ-042) */
.sub-card{ display: flex; align-items: center; gap: 12px; margin: 14px 16px 0; padding: 12px 16px; border-radius: var(--lv-r-lg); background: var(--lv-card); border: 1px solid var(--lv-line); box-shadow: var(--lv-shadow-soft); }
.sub-card .sc-ico{ width: 40px; height: 40px; border-radius: var(--lv-r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--lv-soft-tiffany); color: var(--lv-tiffany-text); }
.sub-card .sc-ico svg{ width: var(--lv-icon-20); height: var(--lv-icon-20); }
.sub-card .sc-mid{ flex: 1; min-width: 0; }
.sub-card .sc-t{ font-size: 14px; font-weight: 700; color: var(--lv-ink); }
.sub-card .sc-d{ font-size: 12px; color: var(--lv-dim); margin-top: 2px; line-height: 1.45; }

/* Контекст-свитчер юрлица/филиала (претендент в канон ДС) */
.ctx-bar{ margin: 12px 16px 0; }
.ctx-bar .pill-btn{ width: 100%; height: 40px; justify-content: flex-start; }
.ctx-bar .pill-btn .lbl{ max-width: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }

/* Лист заказа: позиции, итог, действия */
.ord-items{ display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.ord-item{ display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lv-ink); }
.ord-item .q{ color: var(--lv-dim); font-size: 13px; }
.ord-item .s{ margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet-note{ font-size: 13px; line-height: 1.55; color: var(--lv-dim); margin: 8px 0 0; }
.sheet-actions{ display: flex; gap: 10px; padding: 12px 0 2px; }
.sheet-actions .cta-btn{ flex: 1; }

/* Группа юрлица в свитчере */
.grp-label{ margin: 14px 4px 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lv-dim); }
.sheet-body .district-row + .district-row{ margin-top: 8px; }

/* Причина возврата/отмены */
.reason-field textarea{ min-height: 84px; resize: vertical; }

/* Демо-метка в футере кабинетов */
.demo-tag{ font-size: 10px; }

/* ============================================================
   ЗЕРКАЛО СТЕЙДЖА · ЭКРАН «ПРОФИЛЬ»
   Порт стилей ProfileModule.vue + ProfileCollapse + WalletHistoryList +
   ProfileCabinets + ProfileFooter + AppSwitch/AppBadge из lovii-app
   (origin/staging 938fe42). Классы и значения — 1:1; scss-миксы
   развёрнуты в px (body-m 13/400/1.55, body-s 12, caption-1 11/600).
   ============================================================ */

/* Семантические токены стейджа (src/scss/tokens.scss) — алиасы палитры ДС */
@layer tokens{

/* ============================================================
   ЗЕРКАЛО СТЕЙДЖА · ЭКРАН «ПРОФИЛЬ»
   Порт стилей ProfileModule.vue + ProfileCollapse + WalletHistoryList +
   ProfileCabinets + ProfileFooter + AppSwitch/AppBadge из lovii-app
   (origin/staging 938fe42). Классы и значения — 1:1; scss-миксы
   развёрнуты в px (body-m 13/400/1.55, body-s 12, caption-1 11/600).
   ============================================================ */

/* Семантические токены стейджа (src/scss/tokens.scss) — алиасы палитры ДС */
:root,
[data-theme="light"] {
  --background-normal-surface: var(--lv-card);
  --background-normal-secondary: var(--lv-surface);
  --background-normal-tertiary: var(--lv-surface);
  --background-other-soft-neutral: rgba(168, 170, 173, 0.1);
  --background-other-soft-press: var(--lv-grey-soft);
  --content-normal-primary: var(--lv-ink);
  --content-normal-secondary: var(--lv-dim);
  --content-normal-tertiary: var(--lv-dim);
  --content-normal-on-inverse: var(--lv-bg);
  --content-normal-on-soft-accent: var(--lv-pink-dark);
  --lv-navbar-height: 64px; /* SZ-062: реальный таббар (было fallback 56px) */
  --lv-navbar-offset: calc(var(--lv-navbar-height, 56px) + env(safe-area-inset-bottom, 0px));
  --lv-block-gap: 16px;
}
}

@layer tokens{

[data-theme="dark"] {
  --background-other-soft-neutral: rgba(210, 211, 214, 0.12);
}
}

/* ---------- Каркас экрана ---------- */
.profile{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  gap: 16px;
  min-height: calc(100dvh - 56px);
  padding: 0 var(--lv-gutter) calc(var(--lv-navbar-offset) + 16px);
  max-width: 640px;
  margin-inline: auto;
  width: 100%;
}
@media (min-width: 640px){
  .profile { max-width: 924px; }
}

.profile__wrapper{
  margin: var(--lv-block-gap) 0 0;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--lv-block-gap);
}

/* Единый список блоков: DOM-порядок = логический; ≥640px — две колонки
   CSS multi-column, высота балансируется браузером (break-inside: avoid). */
.profile__blocks{ width: 100%; }
.profile__blocks > *{ break-inside: avoid; margin: 0; }
.profile__blocks > .profile__cards,
.profile__blocks > .profile__nav,
.profile__blocks > .collapse{margin: 0 0 var(--lv-block-gap);}
.profile__blocks > *:last-child{ margin-bottom: 0; }
@media (min-width: 640px){
  .profile__blocks { columns: 2; column-gap: var(--lv-block-gap); }
}

/* ---------- Хедер участника ---------- */
.profile__member{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--lv-line);
  border-radius: 18px;
  background: var(--lv-card);
}
.profile__ava{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--lv-soft-pink);
  background-size: cover;
  background-position: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--lv-pink-dark, #d6336c);
}
.profile__member-mid{ min-width: 0; flex: 1; }
.profile__member-name{
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--lv-ink);
  overflow-wrap: anywhere;
}
.profile__member-phone{ margin: 2px 0 0; font-size: 13px; color: var(--lv-dim); }
.profile__member-edit{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--lv-r-sm);
  background: var(--background-other-soft-neutral);
  color: var(--lv-dim);
  cursor: pointer;
}
.profile__member-edit svg{ width: var(--lv-icon-20); height: var(--lv-icon-20); }
.profile__member-edit:active{ background: var(--lv-grey-soft); }

/* ---------- Карты и счета ---------- */
.profile__cards{ width: 100%; }
.profile__carousel{
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.profile__carousel::-webkit-scrollbar{ display: none; }
.profile__slide{ flex-shrink: 0; width: 100%; padding: 0 2px; scroll-snap-align: center; }
.profile__card-hints{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.profile__hint-ico{
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--lv-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lv-surface);
  color: var(--lv-dim);
}.profile__hint-ico svg, .profile__hint-btn svg, .profile__nav-ico svg, .collapse__chev svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }
.profile__hint-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-r-pill);
  background: var(--lv-card);
  color: var(--lv-dim);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}.profile__hint-btn:active, .profile__nav > section > a:active, .profile__nav > section > .profile__settings-row:active{ background: var(--background-other-soft-neutral); }

/* ---------- Навигационные строки ---------- */
.profile__nav{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.profile__nav > section{width: 100%; padding: 8px 16px; display: grid; grid-template-columns: 1fr; box-sizing: border-box;}
.profile__nav > section > a,
.profile__nav > section > .profile__soon-row,
.profile__nav > section > .profile__settings-row{
  text-align: left;
  min-height: 44px;
  padding: 12px 8px;
  margin: 0 -8px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  border-radius: 8px;
  color: var(--lv-ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  text-decoration: none;
  transition: background 0.2s ease-out;
}
.profile__nav > section > a{ cursor: pointer; }
.profile__nav > section > .profile__soon-row{ color: var(--lv-dim); cursor: default; }
.profile__settings-row{
  border: 0;
  background: none;
  font-family: inherit;
  width: 100%;
  cursor: pointer;
}
.profile__nav-ico{
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--lv-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile__nav-stack{ display: grid; grid-template-columns: 1fr; gap: 2px; min-width: 0; }
.profile__nav-subtitle{ color: var(--lv-dim); font-size: 12px; font-weight: 400; line-height: 1.5; }
.profile__nav > section > .profile__switch-row{
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  min-height: 44px;
  padding: 12px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  color: var(--lv-ink);
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- Карточка-раскрытие (ProfileCollapse) ---------- */
.collapse{
  display: block;
  background: var(--lv-card);
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-r-lg);
  box-shadow: var(--lv-shadow-soft);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.collapse_open{ box-shadow: var(--lv-shadow-lift); }
.collapse__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 12px;
  text-align: left;
  cursor: pointer;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}
.collapse__head:active{ background: var(--lv-surface); }
.collapse__text{ display: flex; flex-flow: column; gap: 2px; min-width: 0; }
.collapse__title{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--lv-ink);
}
.collapse__sub{ font-size: 12px; font-weight: 600; color: var(--lv-dim); }
.collapse__chev{
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--lv-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lv-surface);
  color: var(--lv-dim);
  transition: transform 0.28s ease, background 0.15s ease, color 0.15s ease;
}
.collapse_open .collapse__chev{ transform: rotate(90deg); }
.collapse__body{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.collapse__body > *{ overflow: hidden; min-height: 0; }
.collapse_open .collapse__body{ grid-template-rows: 1fr; }
.collapse__inner{ padding: 2px 12px 12px; }
.collapse_open .collapse__inner{ border-top: 1px solid var(--lv-line-2); padding-top: 12px; }
@media (prefers-reduced-motion: reduce){
  .collapse__body { transition: none; }
}

/* Подпись вложенного раздела */
.block-cap{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--lv-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}
.block-cap__sub{ flex: none; color: var(--lv-dim); font-size: 11px; font-weight: 400; }

/* Ссылка-пилюля «подробнее» */
.ops-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--lv-r-pill);
  border: 1px solid var(--lv-line-strong);
  background: var(--lv-card);
  color: var(--lv-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
}
.ops-link svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); color: var(--lv-dim); }
.ops-link:active{ background: var(--background-other-soft-neutral); }/* ---------- Счёт LOVII PAY ---------- */ .acct, /* ---------- Статус LOVII PAY ---------- */ .tier, /* ---------- История операций (WalletHistoryList) ---------- */ .history{ display: block; }
.acct__main{ padding-bottom: 12px; }
.acct__balance{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lv-ink);
  font-variant-numeric: tabular-nums;
}
.acct__unit{ margin-left: 4px; font-size: 18px; font-weight: 700; color: var(--lv-dim); }
.acct__lbl{ margin-top: 2px; color: var(--lv-dim); font-size: 12px; font-weight: 400; line-height: 1.5; }
.acct__stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--lv-line-2);
  border-bottom: 1px solid var(--lv-line-2);
}
.acct__stat{ display: flex; flex-flow: column; gap: 2px; min-width: 0; }
.acct__v{ font-size: 14px; font-weight: 800; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.acct__l{ color: var(--lv-dim); font-size: 11px; line-height: 1.35; }
.acct__history{ padding: 12px 0 0; }
.acct__actions{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 12px; }
.acct__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--lv-r-pill);
  border: 1px solid var(--lv-line-strong);
  background: var(--lv-card);
  color: var(--lv-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}.acct__btn svg, .priv__ico svg, .cabinets__ico svg, .history__ico svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }
.acct__btn:active{ transform: scale(0.97); }
.acct__btn_brand{ border: 0; background-image: var(--lv-gradient-brand); color: var(--lv-on-brand); }
.tier__levels{ display: flex; flex-wrap: wrap; gap: 6px; }
.tier__level{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--lv-r-pill);
  font-size: 11px;
  font-weight: 800;
  background: var(--background-other-soft-neutral);
  color: var(--lv-dim);
}
.tier__level svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); }
.tier__level_cur{ background-image: var(--lv-gradient-brand); color: var(--lv-on-brand); }
.tier__row{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px; }
.tier__name{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--lv-ink);
}
.tier__name svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); color: var(--lv-gold-text); }
.tier__cond{ color: var(--lv-dim); font-size: 12px; font-weight: 400; line-height: 1.5; }
.tier__bar{
  margin-top: 10px;
  height: 8px;
  border-radius: var(--lv-r-pill);
  background: var(--background-other-soft-neutral);
  overflow: hidden;
}
.tier__fill{
  display: block;
  height: 100%;
  border-radius: var(--lv-r-pill);
  background-image: var(--lv-gradient-brand);
  transition: width 0.3s ease;
}
.tier__next{ margin: 10px 0 0; color: var(--lv-dim); font-size: 12px; font-weight: 400; line-height: 1.5; }
.tier__next b{ color: var(--lv-ink); font-weight: 800; }
.tier__perks{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tier__perk{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--lv-r-pill);
  background: var(--lv-surface);
  color: var(--lv-dim);
  font-size: 11px;
  font-weight: 600;
}
.tier__perk svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); color: var(--lv-tiffany-text); }
.tier__privs{ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lv-line-2); }

/* Привилегии статуса */
.priv{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.priv__card{
  display: flex;
  flex-flow: column;
  gap: 4px;
  padding: 12px;
  border-radius: var(--lv-r-md);
  border: 1px solid var(--lv-line);
  background: var(--lv-card);
}
.priv__ico{
  width: 34px;
  height: 34px;
  border-radius: var(--lv-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.priv__title{ margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--lv-ink); }
.priv__sub{ color: var(--lv-dim); font-size: 12px; line-height: 1.4; }

/* ---------- Избранные МСП ---------- */
.fav-hint{ margin: 0; color: var(--lv-dim); font-size: 12px; font-weight: 400; line-height: 1.5; }
.fav-hint .fav-hint__heart{ width: 14px; height: 14px; display: inline-block; vertical-align: -2px; color: inherit; }
.fav-list{ display: grid; grid-template-columns: 1fr; gap: 4px; width: 100%; margin: 0; padding: 0; list-style: none; }
.fav-list__row{ display: flex; align-items: center; gap: 8px; }
.fav-list__link{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 4px 0;
  text-decoration: none;
}
.fav-list__logo{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--lv-surface);
  font-size: 18px;
}
.fav-list__name{
  flex: 1;
  min-width: 0;
  color: var(--lv-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.55;
}
.fav-heart{
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--lv-r-pill);
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lv-dim);
  cursor: pointer;
}
.fav-heart svg{ width: var(--lv-icon-20); height: var(--lv-icon-20); }
.fav-heart.active{ color: var(--lv-pink); }
.fav-heart.active svg{ fill: currentColor; }

/* ---------- Кабинеты ролей (ProfileCabinets) ---------- */
.cabinets{ margin: 0 -14px -14px; }
.cabinets__list{
  border-radius: 0 0 var(--lv-r-lg) var(--lv-r-lg);
  background: var(--lv-card);
  overflow: hidden;
}
.cabinets__row{
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  min-height: 44px;
  color: var(--lv-ink);
  text-decoration: none;
  border-top: 1px solid var(--lv-line-2);
}
.cabinets__row:first-child{ border-top: 0; }
.cabinets__ico{
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--lv-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cabinets__mid{ min-width: 0; }
.cabinets__name{ display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }.cabinets__name > span:first-child, .legal-card__row > span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabinets__tag{
  flex: none;
  padding: 2px 8px;
  border-radius: var(--lv-r-pill);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.cabinets__note{ margin-top: 2px; color: var(--lv-dim); font-size: 12px; line-height: 1.4; }
.cabinets__action{
  flex: none;
  padding: 8px 12px;
  border-radius: var(--lv-r-pill);
  background: var(--lv-soft-pink);
  font-size: 12px;
  font-weight: 700;
  color: var(--lv-pink-dark);
}
.history__day{
  padding: 10px 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lv-dim);
}
.history__row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--lv-line-2);
}
.history__ico{
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--lv-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.history__mid{ min-width: 0; flex: 1; }
.history__name{ font-size: 14px; font-weight: 700; color: var(--lv-ink); overflow-wrap: anywhere; }
.history__meta{ margin-top: 2px; font-size: 12px; color: var(--lv-dim); overflow-wrap: anywhere; }
.history__sum{
  flex: none;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--lv-ink);
}
.history__sum_plus{ color: var(--lv-tiffany-text); }
.history__empty{ padding: 6px 0; font-size: 13px; color: var(--lv-dim); }

/* ---------- Юридический блок (ProfileFooter) ---------- */
.profile-footer{ width: 100%; }
.legal-card{
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-r-lg);
  background: var(--lv-card);
  box-shadow: var(--lv-shadow-soft);
  overflow: hidden;
}
.legal-card__cap{
  padding: 12px 16px 6px;
  color: var(--lv-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.legal-card__cap ~ .legal-card__cap{ border-top: 1px solid var(--lv-line-2); }
.legal-card__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border-top: 1px solid var(--lv-line-2);
  text-align: left;
  color: var(--lv-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  box-sizing: border-box;
}
.legal-card__row > svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); flex: none; color: var(--lv-dim); }
.legal-card__row:active{ background: var(--lv-surface); }
.profile-footer__note{
  margin: 12px 0 0;
  text-align: center;
  color: var(--lv-dim);
  font-size: 12px;
  line-height: 1.55;
}

/* ---------- AppSwitch / AppBadge (стейдж) ---------- */
@layer primitives{

/* ---------- AppSwitch / AppBadge (стейдж) ---------- */
.app-switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border: 0;
  border-radius: var(--lv-r-pill);
  background: var(--lv-grey-soft);
  transition: background 0.2s ease-out;
  cursor: pointer;
  padding: 0;
}
}

@layer primitives{

.app-switch.on { background: var(--lv-tiffany); }
}

.app-switch:disabled{ opacity: 0.5; }
@layer primitives{

.app-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--lv-r-pill);
  background: var(--lv-on-brand);
  transition: transform 0.2s ease-out;
}
}

@layer primitives{

.app-switch.on .app-switch__knob { transform: translateX(18px); }
}

@layer primitives{

.app-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lv-r-pill);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
}

.app-badge_s{ gap: 4px; height: 24px; padding: 0 6px; font-size: 12px; line-height: 1.5; }
.app-badge_tertiary{ color: var(--lv-ink); background: var(--lv-grey-soft); }

/* ============================================================
   ЗЕРКАЛО СТЕЙДЖА · ЭКРАН «СЧЁТ И ОПЕРАЦИИ» (#/wallet)
   Порт ProfileWallet.vue + PassSubscription.vue + AppSegmentControl.vue +
   LedgerTxRow.vue из lovii-app (origin/staging 938fe42).
   ============================================================ */
@layer tokens{

/* ============================================================
   ЗЕРКАЛО СТЕЙДЖА · ЭКРАН «СЧЁТ И ОПЕРАЦИИ» (#/wallet)
   Порт ProfileWallet.vue + PassSubscription.vue + AppSegmentControl.vue +
   LedgerTxRow.vue из lovii-app (origin/staging 938fe42).
   ============================================================ */
:root,
[data-theme="light"] {
  --border-normal-subtle: var(--lv-line-2);
  --background-normal-page: var(--lv-bg);
}
}

@layer tokens{

[data-theme="dark"] {
}
}

.wallet{
  display: flex;
  flex-flow: column;
  gap: 16px;
  max-width: 560px;
  margin-inline: auto;
  padding: 12px 16px calc(var(--lv-navbar-offset) + 16px);
}
@media (min-width: 640px){
  .wallet { max-width: 924px; }
}

/* Двухколоночная композиция канона (.pay-cols) */
.wallet__cols{ display: flex; flex-flow: column; gap: 16px; }
.wallet__col-a,
.wallet__col-b{ display: flex; flex-flow: column; gap: 16px; min-width: 0; }
@media (min-width: 640px){
  .wallet__cols {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
    column-gap: 20px;
  }
  .wallet__col-a {
    position: sticky;
    top: calc(var(--lv-header-h, 56px) + 56px);
    align-self: start;
  }
  .wallet__carousel { margin: 0; padding: 4px 0 8px; }
  .wallet__slide { padding: 0; }
}
@media (min-width: 1024px){
  .wallet__cols { column-gap: 28px; }
}

/* Мультикарта-карусель: full-bleed */
.wallet__carousel{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 4px 0 8px;
}
.wallet__carousel::-webkit-scrollbar{ display: none; }
.wallet__slide{
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: 0 var(--lv-gutter);
}
.wallet__dots{ display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
.wallet__dot{
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: var(--lv-r-pill);
  background: var(--lv-line-strong);
  transition: background 0.2s ease, width 0.2s ease;
  cursor: pointer;
}
.wallet__dot_active{ width: 20px; background: var(--lv-gold-text); }

/* Хедер участника */
.wallet__head{ display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.wallet__ava{
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--lv-r-pill);
  background-color: var(--lv-soft-pink);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lv-pink-dark);
  font-size: 18px;
  font-weight: 800;
}.wallet__head-mid, .tx-mid{ min-width: 0; }
.wallet__name{ margin: 0; color: var(--lv-ink); overflow-wrap: break-word; font-size: 16px; font-weight: 800; }
.wallet__phone{ margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--lv-dim); }
.wallet__badge{
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--lv-r-pill);
  background: var(--lv-soft-gold);
  color: var(--lv-gold-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}.wallet__badge svg, .pass__state svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); }

/* Заголовки секций */
.wallet__sec-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wallet__sec-title{ margin: 0; font-size: 16px; font-weight: 800; color: var(--lv-ink); }
.wallet__sec-sub{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-dim);
}

/* Подсказки под картой */
.wallet__hints{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: -6px;
  flex-wrap: wrap;
  row-gap: 4px;
}
.wallet__hint{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--lv-dim);
}
.wallet__hint svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); flex-shrink: 0; }
.wallet__hint_btn{
  padding: 4px 10px;
  border: 0;
  border-radius: var(--lv-r-pill);
  background: none;
  color: var(--lv-pink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.wallet__hint_btn:active{ opacity: 0.7; }

/* Сводка счёта */
.wallet__acct{ display: flex; flex-flow: column; gap: 10px; }
.wallet__acct-card{
  padding: 16px;
  background: var(--lv-card);
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-r-lg);
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.06);
}
.wallet__acct-balance{
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lv-ink);
  font-variant-numeric: tabular-nums;
}
.wallet__acct-unit{ margin-left: 4px; font-size: 18px; font-weight: 700; color: var(--lv-pink); }
.wallet__acct-label{ margin: 3px 0 0; font-size: 12px; font-weight: 600; color: var(--lv-dim); }
.wallet__acct-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.wallet__stat{padding: 10px 6px; border-radius: var(--lv-r-sm); text-align: center;}
.wallet__stat-v{ display: block; font-size: 14px; font-weight: 800; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.wallet__stat-l{ display: block; margin-top: 2px; font-size: 10px; font-weight: 600; color: var(--lv-dim); }

/* Лента операций */
.wallet__tabs{ display: grid; margin: 10px 0 2px; }
.wallet__tabs .seg{ width: 100%; }
.wallet__list{ padding: 2px 12px; border-radius: var(--lv-r-lg); background-color: var(--background-other-soft-neutral); }
.wallet__day{
  margin: 0;
  padding: 12px 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lv-dim);
}
.wallet__empty{
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  border-radius: var(--lv-r-lg);
  background-color: var(--background-other-soft-neutral);
}
.wallet__empty > p{ margin: 0; text-align: center; color: var(--lv-dim); font-size: 13px; line-height: 1.55; }
.wallet__empty-link{ color: var(--lv-pink); font-size: 13px; font-weight: 600; }
.wallet__note{ margin: 0; color: var(--lv-dim); font-size: 11px; font-weight: 400; line-height: 1.45; }

/* Сегмент-контур кошелька использует общий компонент .seg (см. настройки) */

/* Подписка LOVII PASS (PassSubscription) */
.pass{
  display: flex;
  flex-flow: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-r-lg);
  background:
    radial-gradient(130% 100% at 100% 0%, var(--lv-mist-pink) 0%, transparent 55%), var(--lv-card);
}
.pass__head{ display: flex; align-items: center; gap: 8px; }
.pass__brand{ margin: 0; font-size: 14px; font-weight: 800; letter-spacing: 0.12em; color: var(--lv-pink-dark); }
.pass__state{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 10px;
  border-radius: var(--lv-r-pill);
  background: var(--lv-soft-tiffany);
  color: var(--lv-tiffany-text);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pass__line{ margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--lv-ink); }
.pass__meta{ margin: 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--lv-dim); }

/* Проводки рублёвого ledger (LedgerTxRow) */
.tx-row{ display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.tx-row + .tx-row{ border-top: 1px solid var(--lv-line-2); }
.tx-ico{
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--lv-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tx-ico svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }

.tx-name{ font-size: 13px; font-weight: 700; color: var(--lv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-meta{ margin-top: 1px; font-size: 11px; color: var(--lv-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-sum{ flex-shrink: 0; font-size: 14px; font-weight: 800; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.tx-sum.plus{ color: var(--lv-tiffany-text); }

/* ============================================================
   ЗЕРКАЛО СТЕЙДЖА · ВИТРИНА: ГЛАВНАЯ + «ПОИСК»
   Порт HomeModule.vue (HomeHero/HomePopular/HomeBanner/HomeNearbyPlaces/
   NearbyStore) и StoresCatalog.vue (CatalogStore/AppChip) из lovii-app
   (origin/staging 1fc7a27). Картинки → эмодзи-плитки (.sf-emoji).
   ============================================================ */
@layer tokens{

/* ============================================================
   ЗЕРКАЛО СТЕЙДЖА · ВИТРИНА: ГЛАВНАЯ + «ПОИСК»
   Порт HomeModule.vue (HomeHero/HomePopular/HomeBanner/HomeNearbyPlaces/
   NearbyStore) и StoresCatalog.vue (CatalogStore/AppChip) из lovii-app
   (origin/staging 1fc7a27). Картинки → эмодзи-плитки (.sf-emoji).
   ============================================================ */
:root,
[data-theme="light"] {
  --background-normal-soft-accent: var(--lv-soft-pink);
  --feedback-info-solid: var(--lv-info);
  --feedback-positive-solid: var(--lv-tiffany);
  --feedback-negative-solid: var(--lv-negative);
}
}

/* ---------- Каркас главной (HomeModule) ---------- */
.home{ padding: 0 0 64px; }
@media (min-width: 900px){
  .home { padding: 0 0 96px; }
}
.home-top{ padding: 0 0 16px; }
.home-top__banner{ margin: 16px 0 0; width: 100%; padding: 0 var(--lv-gutter); }

/* ---------- Герой (HomeHero) ---------- */
.home-hero{
  padding: 12px 16px 4px;
  background: linear-gradient(180deg, var(--lv-hero-top) 0%, var(--lv-card) 100%);
  transition: padding 0.3s ease;
}
.home-hero__tab{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--lv-r-md);
  background: var(--lv-card);
  border: 1px solid var(--lv-line-2);
  box-shadow: var(--lv-shadow-soft);
  color: var(--lv-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}
.home-hero__tab-ico{ display: flex; flex-shrink: 0; width: 16px; height: 16px; color: var(--lv-pink); }
.home-hero__tab-ico svg{ width: 100%; height: 100%; }
.home-hero__tab-lbl{
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.home-hero__tab-chev{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--lv-r-pill);
  background: var(--lv-soft-pink);
  color: var(--lv-pink);
  transition: transform 0.3s ease;
}
.home-hero__tab-chev svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }
.home-hero:not(.collapsed) .home-hero__tab-chev{ transform: rotate(180deg); }
.home-hero__body{ display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.32s ease; }
.home-hero__body-in{ min-height: 0; overflow: hidden; }
.home-hero__body-in h1{
  margin: 12px 0 0;
  color: var(--lv-ink);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
}
@media (min-width: 640px){
  .home-hero__body-in h1 { font-size: 28px; }
}
.home-hero__body-in h1 .accent{ color: var(--lv-pink); }
.home-hero__body-in .lead{
  margin: 6px 0 0;
  color: var(--lv-dim);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}
.home-hero__body-in .lead b{ color: var(--lv-ink); font-weight: 600; }
.home-hero.collapsed{ padding-bottom: 4px; }
.home-hero.collapsed .home-hero__body{ grid-template-rows: 0fr; }
.home-hero__stats{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.home-hero__search{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 var(--lv-gutter);
  margin-top: 16px;
  border: 0;
  border-radius: var(--lv-r-pill);
  background: var(--lv-surface);
  color: var(--lv-dim);
  text-align: left;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  cursor: pointer;
  transition: background 0.2s ease-out;
  box-sizing: border-box;
}
.home-hero__search > .ico{ width: 16px; height: 16px; flex-shrink: 0; }.home-hero__search > .ico svg, .stat-pill .ico svg{ width: 100%; height: 100%; }
@layer primitives{

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--lv-r-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
}

.stat-pill .ico{ width: 16px; height: 16px; display: inline-flex; }

/* ---------- Популярные заведения (HomePopular) ---------- */
.home-popular{
  width: 100%;
  margin: 16px 0 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.home-popular > h3{ margin: 0; color: var(--lv-ink); font-size: 16px; font-weight: 800; line-height: 1.35; }
.home-popular__list{
  width: 100%;
  overflow: auto;
  margin: 16px 0 0;
  padding: 0 var(--lv-gutter) 0 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  scrollbar-width: none;
}
.home-popular__list::-webkit-scrollbar{ display: none; }
.home-popular__list > a{
  width: 100px;
  flex-shrink: 0;
  text-decoration: none;
}
.home-popular__list > a:last-of-type{
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  text-align: center;
  gap: 4px;
  border-radius: var(--lv-r-lg);
  background: var(--lv-card);
  color: var(--lv-dim);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}
.home-popular__list > a:last-of-type > .icon,
.home-popular__list > a:last-of-type > svg{ width: var(--lv-icon-32); height: var(--lv-icon-32); }
.popular-store{ padding: 0; overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 8px; box-sizing: border-box; }
.popular-store > span{
  width: 100%; aspect-ratio: 1 / 1; height: auto;
  
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popular-store > h5{padding: 8px 10px 12px; 
  margin: 0;
  color: var(--lv-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

/* Чип типов мерчантов (AppChip) */
@layer primitives{

/* Чип типов мерчантов (AppChip) */
.app-chip {
  flex-shrink: 0;
  text-align: center;
  border-radius: 100px;
  border: 1px solid var(--lv-line-2);
  padding: 6px 12px;
  background: none;
  color: var(--lv-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  transition: all 0.3s ease-out;
  cursor: pointer;
}
}

.app-chip.active{
  border-color: var(--lv-accent, var(--lv-pink));
  background: var(--lv-accent-soft, var(--lv-soft-pink));
  color: var(--lv-accent-text, var(--lv-pink-dark));
}

/* ---------- Баннер «Реклама» (HomeBanner) ---------- */
.home-banner{
  position: relative; overflow: hidden; border-radius: var(--lv-r-lg);
  width: 320px; margin-inline: auto;
}
@media (max-width: 374px){
  .home-banner { width: calc(100% - 32px); }
}
.home-banner__track{ display: flex; transition: transform 0.5s ease-out; }
.home-banner__slide{ min-width: 100%; flex-shrink: 0; position: relative; }
.promo-banner{
  width: 320px; height: 140px; box-sizing: border-box;
  display: flex; flex-flow: column; align-items: flex-start; justify-content: center;
  gap: 4px; padding: 0 20px; color: var(--lv-white); text-decoration: none;
}
.promo-banner__title{ font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.promo-banner__sub{ font-size: 13px; opacity: 0.85; line-height: 1.35; }
.promo-banner__cta{
  margin-top: 6px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; opacity: 0.9;
}
.promo-banner__cta svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); }
.home-banner__ad{
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  font-size: 10px;
  line-height: 13px;
  font-weight: 400;
}
.home-banner__ad > svg{ flex-shrink: 0; width: var(--lv-icon-12); height: 10px; color: rgba(255, 255, 255, 0.7); }
.home-banner__dots{
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.home-banner__dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease-out;
}
.home-banner__dot.active{ width: 16px; border-radius: 3px; background: var(--lv-white); }

/* ---------- Возле вас (HomeNearbyPlaces + NearbyStore) ---------- */
.nearby-stores{ margin: 24px 0 0; padding: 0 var(--lv-gutter); }
.nearby-stores > h3{ margin: 0; color: var(--lv-ink); font-size: 16px; font-weight: 800; line-height: 1.35; }
.nearby-stores__list{
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (width < 540px){
  .nearby-stores__list { grid-template-columns: 1fr; }
}
.nearby-store{ display: flex; flex-flow: column; justify-content: flex-start; align-items: flex-start; padding: 10px; width: 100%; overflow: hidden; text-decoration: none; box-sizing: border-box; }
.nearby-store__products{
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: auto;
  gap: 12px;
  height: 133px;
  scrollbar-width: none;
}.nearby-store__products::-webkit-scrollbar, .store-categories__list::-webkit-scrollbar{ display: none; }
.nearby-store__products > span{
  flex-shrink: 0;
  aspect-ratio: 1;
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center; }
.nearby-store__info{
  width: 100%;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: start;
  gap: 12px;
}
.nearby-store__info > span{
  border-radius: 10px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  }
.nearby-store__description{
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.nearby-store__description > h4{
  margin: 0;
  color: var(--lv-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5; }
.nearby-store__description > p{ margin: 0; font-size: 11px; font-weight: 600; line-height: 1.45; }
.nearby-store__description > p.open{ color: var(--lv-info); }.nearby-store__description > p.close, .catalog-store__status.is-closed{ color: var(--lv-negative); }
.nearby-store__description > span{ color: var(--lv-pink); font-size: 11px; line-height: 1.45; font-weight: 600; }

/* Эмодзи-плитка вместо фото (демо без фотостока) */
.sf-emoji{ font-style: normal; font-size: 36px; line-height: 1; }
.sf-emoji-lg{ font-size: 28px; }

/* ---------- «Поиск»: каталог точек (StoresCatalog) ---------- */
.stores{
  min-height: calc(100dvh - 56px);
  padding: 0 0 calc(var(--lv-navbar-offset) + 8px);
}
.stores__header{
  margin: 16px 0 0;
  padding: 0 var(--lv-gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}
@layer primitives{

.sf-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-r-sm);
  background: var(--lv-card);
  color: var(--lv-dim);
}
}

.sf-search svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); flex-shrink: 0; }
.sf-search input{
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--lv-ink);
  outline: none;
}.sf-search input::placeholder, .catalog-store__sep{ color: var(--lv-dim); }
.sf-filter-btn{
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-r-sm);
  background: var(--lv-card);
  color: var(--lv-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.stores__list{
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.stores__noresult{ margin: 0; padding: 16px 0; color: var(--lv-dim); font-size: 13px; line-height: 1.55; }

/* Карточка точки каталога (CatalogStore) */
.catalog-store__status{ font-size: 12px; font-weight: 600; line-height: 1.5; }
.catalog-store__status.is-open{ color: var(--lv-tiffany); }

/* ============================================================
   ЗЕРКАЛО СТЕЙДЖА · СТРАНИЦА МАГАЗИНА И ТОВАРА
   Порт StoreModule.vue (StoreCard/StoreProducts/StoreCategories) и
   StoreProduct.vue (ProductPreview) из lovii-app (origin/staging 1fc7a27).
   ============================================================ */
.place{
  min-height: calc(100dvh - 104px);
  padding: 0 0 calc(var(--lv-navbar-offset) + 8px);
}

/* Шапка точки (StoreCard) */
.stat-pill.pink, .status-pink,
.code-card.tone-pink,
.tx-tabs .tab-btn.active, .tx-ico.buy, .priv-card.t-pink .pc-ico,
.sr-ico.t-pink,
.st-new, .role-pill.t-pink,
.profile__nav-ico.t-pink, .collapse__head:hover .collapse__chev, .collapse_open .collapse__chev,
.priv__card_pink .priv__ico, .cabinets__ico.t-pink, .history__ico.t-pink,
.stat-pill.pink,

/* Тизер точки (SZ-035) */
.place__teaser{margin: 16px 0 0; padding: 16px; display: flex; align-items: center; gap: 12px;}
.place__teaser p{ margin: 0; color: var(--lv-dim); font-size: 13px; line-height: 1.55; }
.app-badge_brand{ color: var(--lv-on-brand, var(--lv-white)); background-image: var(--lv-gradient-brand); }

/* Поиск в заведении */
.place-search{ padding: 0 var(--lv-gutter); margin: 18px 0 0; }
.place-search .sf-search{ height: 40px; border-radius: 10px; }

/* Категории товаров (StoreCategories) */
.store-categories{ padding: 0 var(--lv-gutter); margin: 16px 0 0; display: flex; flex-flow: column; justify-content: flex-start; align-items: flex-start; }
.store-categories__list{
  width: 100%;
  margin: 16px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  overflow: auto;
  text-align: center;
  scrollbar-width: none;
}
.store-categories__list > button{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 86px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--lv-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.store-categories__list > button > span{
  width: 86px;
  height: 86px;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-emoji-sm{ font-size: 36px; }
.sf-cat-check{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lv-pink);
  color: var(--lv-on-brand, var(--lv-white));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sf-cat-check svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }
.place-catalog__list{
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (width < 768px){
  .place-catalog__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (width < 540px){
  .place-catalog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Карточка позиции (ProductPreview) */
.product-preview{overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; text-decoration: none;}
.product-preview > span{
  width: 100%;
  aspect-ratio: 1 / 1; height: auto; overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-preview__info{
  padding: 10px 8px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto auto auto;
}
.product-preview__info > h4{
  margin: 0;
  color: var(--lv-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(2 * 1.35em);
}
.product-preview__info > span{ margin: 3px 0 0; color: var(--lv-dim); font-size: 11px; font-weight: 400; line-height: 1.4; }
.product-preview__info > p{
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  color: var(--lv-ink);
  margin-top: auto;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.product-preview__info > p > del{ color: var(--lv-dim); font-size: 12px; font-weight: 500; text-decoration: line-through; }
.product-preview__info > button{
  width: 100%;
  margin: 16px 0 0;
  border: 0;
  border-radius: 10px;
  background: var(--lv-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--lv-gutter);
  height: 36px;
  color: var(--lv-on-brand, var(--lv-white));
  cursor: pointer;
}.product-preview__info > button > svg, .product-preview__counter > button > svg, .sf-back svg{ width: var(--lv-icon-20); height: var(--lv-icon-20); }
.product-preview__counter{
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  width: 100%;
  margin: 16px 0 0;
  border-radius: 10px;
  background: var(--lv-pink);
  height: 36px;
}
.product-preview__counter > span{ text-align: center; color: var(--lv-on-brand, var(--lv-white)); font-size: 13px; font-weight: 600; }
.product-preview__counter > button{
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lv-on-brand, var(--lv-white));
  cursor: pointer;
}

/* ---------- Экран товара (StoreProduct) ---------- */
.product{ padding: 0 0 136px; }
.product__image{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 380px;
  background-color: var(--lv-grey-soft);
  position: relative;
}
.sf-emoji-xl{ font-size: 120px; font-style: normal; }
.sf-back{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--lv-r-sm);
  background: var(--lv-card);
  box-shadow: var(--lv-shadow-soft);
  color: var(--lv-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.product__info{ margin: 40px 0 0; padding: 0 var(--lv-gutter); }.product__info > h3, .more-products > h4{ margin: 0; color: var(--lv-ink); font-size: 16px; font-weight: 800; line-height: 1.35; }
.product__description{ width: 100%; margin: 24px 0 0; padding: 0 var(--lv-gutter); }
.product__description > button{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border: 0;
  border-bottom: 1px solid var(--lv-dim);
  background: none;
  color: var(--lv-dim);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.product__description > button > svg{ width: var(--lv-icon-24); height: var(--lv-icon-24); transition: all 0.3s ease-out; }
.product__description > button.active > svg{ transform: rotate(-90deg); }
.product__description > article{ padding: 12px 4px; color: var(--lv-ink); font-size: 13px; line-height: 1.55; }
.more-products{ margin: 24px 0 0; padding: 0 var(--lv-gutter); }
.more-products__list{
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (width < 768px){
  .more-products__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (width < 540px){
  .more-products__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.product__action{
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--lv-navbar-height, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  z-index: 2;
}.product__action::before, .create-order__cta::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lv-glass, rgba(255, 255, 255, 0.85)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--lv-line-2); }
.product__action > button{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--lv-r-sm);
  background: var(--lv-pink);
  box-shadow: 0 4px 20px 0 rgba(13, 17, 27, 0.08);
  color: var(--lv-on-brand, var(--lv-white));
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}.product__action > button > svg, .product__counter > button > svg, .cabinet__bar-ico svg, .role-next__icon svg{ width: var(--lv-icon-20); height: var(--lv-icon-20); }
.product__counter{
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  width: 100%;
  border-radius: var(--lv-r-sm);
  background: var(--lv-pink-dark);
  height: 44px;
}
.product__counter > span{ text-align: center; color: var(--lv-on-brand, var(--lv-white)); font-size: 14px; font-weight: 700; }.product__counter > button{ width: 100%; height: 100%; border: 0; background: none; display: flex; align-items: center; justify-content: center; color: var(--lv-pink-dark); cursor: pointer; transition: opacity .15s; }

/* Инфо-лист точки (StoreInfoSheet) */
.sf-info-rows{ display: grid; grid-template-columns: 1fr; gap: 2px; }
.sf-info-rows > div{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--lv-line-2);
  font-size: 13px;
}
.sf-info-rows > div:first-child{ border-top: 0; }
.sf-info-rows > div > span{ color: var(--lv-dim); }
.sf-info-rows > div > b{ color: var(--lv-ink); font-weight: 600; text-align: right; }

/* ---------- ЗЕРКАЛО: скин OPERATOR (номинальный счёт, SZ-043) ----------
   Порт .skin-nominal из PayCard.vue@staging: серебро без золота, тонкая
   диагональная штриховка — техническая карта единого счёта платформы. */
.paycard.skin-nominal .pay-face{
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 52%, rgba(0, 0, 0, 0.3) 100%),
    var(--lv-gradient-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.paycard.skin-nominal .pay-brand{
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.45) 55%, rgba(255, 255, 255, 0.25) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 14px;
}
.paycard.skin-nominal .pay-chip{
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0.18));
}
.paycard.skin-nominal .pay-sheen{
  background: radial-gradient(120% 90% at 88% -8%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 34%, transparent 62%);
}
.paycard.skin-nominal .pay-glare{
  background: radial-gradient(300px 300px at var(--gx, 70%) var(--gy, 15%), rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 65%);
}
.paycard.skin-nominal .pay-sweep{
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0.05) 52%, transparent 60%);
}

/* Кнопка «Оформить подписку» в блоке статуса (SZ-056) */
.tier__cta{
  width: 100%;
  margin-top: 12px;
  height: 44px;
  border: 0;
  border-radius: var(--lv-r-pill);
  background: var(--lv-pink);
  color: var(--lv-on-brand, var(--lv-white));
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.tier__cta:hover{ background: var(--lv-pink-dark); }
.tier__cta-note{
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--lv-dim);
}

/* ---------- Экран «Настройки» (вкладка навигации) ---------- */
.settings-page{
  min-height: calc(100dvh - 56px);
  padding: 0 0 calc(var(--lv-navbar-offset) + 16px);
}

/* ---------- Настройки: масштаб текста и анимации (перенос из app) ---------- */
/* Масштаб: множитель на контент экрана (в app — по-текстово через --font-scale) */
@layer base{

/* ---------- Настройки: масштаб текста и анимации (перенос из app) ---------- */
/* Масштаб: множитель на контент экрана (в app — по-текстово через --font-scale) */
#view { zoom: var(--font-scale, 1); }
}

/* Анимации: гейт SZ-030 — «off» гасит движение, «system» решает media-query */
@layer base{

/* Анимации: гейт SZ-030 — «off» гасит движение, «system» решает media-query */
html[data-motion='off'] *,
html[data-motion='off'] *::before,
html[data-motion='off'] *::after {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}
}

/* Подсказка-примечание в карточке настроек */
.set-hint{ margin: 4px 0 2px; padding: 0 var(--lv-gutter) 10px; color: var(--lv-dim); font-size: 12px; line-height: 1.45; }

/* ============================================================
   ЗЕРКАЛО СТЕЙДЖА · КОРЗИНА, ЧЕКАУТ, ЗАКАЗЫ
   Порт CartModule (CartInfo/CartProduct/CartEmpty), CreateOrder,
   OrdersModule (OrderPreview) из lovii-app (origin/staging 1fc7a27).
   ============================================================ */
.cart{ min-height: calc(100dvh - 104px); padding: 0 var(--lv-gutter) calc(var(--lv-navbar-offset) + 8px); }

/* Вкладки магазинов (CartModule > cart__shops) */
.cart__shops{ display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 16px 0 0; }.cart__shops::-webkit-scrollbar, /* ============================================================ ЗЕРКАЛО СТЕЙДЖА · КАБИНЕТ МСП (CabinetLayout + роли, v1) ============================================================ */ /* Режим кабинета: фирменный хедер остаётся над кабинетом (как в CabinetLayout@staging — AppHeader sticky над всеми экранами), свои разделы кабинета живут в его нижнем баре, витринная навигация скрыта */ body.cabinet-mode .app-nav{ display: none; }
.cart__shops > button{
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  border: 1px solid var(--lv-line-2); border-radius: var(--lv-r-pill);
  background: var(--lv-card); color: var(--lv-ink);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cart__shops > button.active{ border-color: var(--lv-tiffany); background: var(--lv-soft-tiffany); color: var(--lv-tiffany-text); }
.cart__shops > button > span:first-child{
  width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
}

/* Состав корзины (CartInfo) */
.cart-info{ margin: 24px 0 0; display: grid; gap: 12px; }

/* SZ-062 · карточка списка товаров в корзине: внутренние отступы */
.cart-info__products{ padding: 0; }
.cart-info__products{ gap: 0; }
.cart-info__products, .orders__list{ margin: 16px 0 0; display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Позиция корзины (CartProduct) */
/* Строка товара: плитка 64 · название и сумма позиции сверху · счётчик и цена за штуку снизу.
   Обе пары выровнены по общим колонкам, разделитель внутренний — начинается от текстовой колонки,
   поэтому плиточная колонка читается как непрерывная рейка. */
/* Тон «финансы»: в тёмной теме розовые чернила светлеют, иначе розовый на розовом даёт ~2.5:1 */
:root{ --lv-pink-ink: var(--lv-pink-dark); }
:root[data-theme="dark"]{ --lv-pink-ink: color-mix(in srgb, var(--lv-pink) 45%, var(--lv-white)); }

/* Корзина и заказ: деньги живут в текстовой колонке, счётчик — один и по центру справа */

.cart-list .ri-mid .sb .row-amount, .cart-info__products .ri-mid .sb .row-amount{ font-size: 14px; margin-right: 4px; }
/* Строка корзины собрана из системного ряда .row-item; своя только правая рейка «сумма + счётчик» */
.row-amount{ font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lv-ink); white-space: nowrap; }
.qty button svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }

/* Сводка (cart-summary) */
.cart-summary{margin: 16px 0 0; padding: 16px; background-color: var(--lv-card);}
.cart-summary > ul{ margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 8px; }
.cart-summary > ul > li{ display: flex; align-items: center; justify-content: space-between; color: var(--lv-ink); font-size: 13px; line-height: 1.55; }
.cart-summary > p{ margin: 16px 0 0; display: flex; align-items: center; justify-content: space-between; color: var(--lv-ink); font-size: 16px; font-weight: 800; line-height: 1.35; }
.cart-summary .acct__btn{ width: 100%; margin-top: 16px; }
.cart-summary .sum-total .v{ font-variant-numeric: tabular-nums; }
.cart-summary__min-order{
  margin: 16px 0 0; padding: 12px; border-radius: var(--lv-r-sm);
  background-color: var(--lv-soft-pink); color: var(--lv-ink);
  font-size: 13px; line-height: 1.55;
}
.cart-summary > .acct__btn{ margin: 24px 0 0; width: 100%; box-sizing: border-box; }
.acct__btn.is-disabled{ opacity: 0.5; pointer-events: auto; }

/* Пустая корзина (CartEmpty) */
.cart-empty{margin: 24px 0 0; padding: 40px 16px; display: flex; flex-flow: column; align-items: center; gap: 20px;}
.cart-empty__content{ display: flex; flex-flow: column; align-items: center; gap: 8px; text-align: center; }
.cart-empty__content > span{
  width: 56px; height: 56px; border-radius: var(--lv-r-lg); background: var(--lv-soft-pink); color: var(--lv-pink-dark);
  display: inline-flex; align-items: center; justify-content: center;
}.cart-empty__content > span > svg, .cabinet__ava svg{ width: var(--lv-icon-24); height: var(--lv-icon-24); }
.cart-empty__content > h4{ margin: 0; color: var(--lv-ink); font-size: 16px; font-weight: 800; }
.cart-empty__content > p{ margin: 0; color: var(--lv-dim); font-size: 13px; line-height: 1.55; }
.cart-empty__action{ display: grid; gap: 8px; width: 100%; padding: 0; margin: 4px 0 0; }
.cart-empty__action .acct__btn{ width: 100%; }

/* Экран успеха после создания заказа (раньше переиспользовал состояние «пустая корзина») */
.order-success-page{ padding: 0 var(--lv-gutter) calc(var(--lv-navbar-offset) + 16px); }
.order-success{ margin: 24px 0 0; padding: 24px 16px 20px; display: flex; flex-flow: column; align-items: center; gap: 10px; text-align: center; }
.order-success__ico{ width: 56px; height: 56px; border-radius: var(--lv-r-lg); background: var(--lv-soft-tiffany); color: var(--lv-tiffany-text); display: inline-flex; align-items: center; justify-content: center; }
.order-success__ico svg{ width: var(--lv-icon-24); height: var(--lv-icon-24); }
.order-success > h4{ margin: 4px 0 0; color: var(--lv-ink); font-size: 18px; font-weight: 800; }
.order-success > p{ margin: 0; color: var(--lv-dim); font-size: 13px; line-height: 1.55; max-width: 34ch; }
.order-success__actions{ margin: 16px 0 0; display: grid; gap: 8px; width: 100%; }
.order-success__actions .acct__btn{ width: 100%; }
.order-receipt__rows .sum-row{ font-size: 13px; }

/* Оформление заказа (CreateOrder) */
.create-order{ display: flex; flex-flow: column; gap: 16px; padding: 0 var(--lv-gutter) calc(var(--lv-navbar-offset) + 116px); }.create-order-delivery, .create-order-recipient, .create-order-payment{ margin: 16px 0 0; display: flex; flex-flow: column; gap: 10px; }
.create-order-delivery__address, .create-order-delivery__merchant{
  display: flex; align-items: center; gap: 10px; padding: 12px 12px; border-radius: var(--lv-r-sm);
  border: 1px solid var(--lv-line-strong); background: var(--lv-card);
  color: var(--lv-ink); font-size: 13px; font-weight: 600; text-align: left;
}
.create-order-delivery__address{ justify-content: space-between; cursor: pointer; }
.create-order-delivery__address-empty{ color: var(--lv-dim); font-weight: 400; }.create-order-delivery__address > svg, .role-next__arrow svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); color: var(--lv-dim); }.create-order-delivery__merchant > span, .order-preview__products > span{ width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.create-order-delivery__merchant > p{ margin: 0; }
.create-order__cta{
  position: fixed; left: 0; right: 0; bottom: var(--lv-navbar-offset, 64px); z-index: 2;
  display: grid; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--lv-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--lv-line);
}
@media (min-width: 900px){ /* десктоп: панель встаёт над плавающей пилюлей навигации (низ 20 + высота 60 + зазор) */
  .create-order__cta { bottom: 94px; }
  .create-order { padding-bottom: 214px; }
}
.create-order__total{ display: flex; align-items: baseline; justify-content: space-between; color: var(--lv-ink); font-size: 13px; }
.create-order__total > p{ margin: 0; color: var(--lv-dim); font-weight: 600; }
.create-order__total > span{ font-variant-numeric: tabular-nums; }
.create-order__total > span{ font-size: 16px; font-weight: 800; }

/* История заказов (OrdersModule + OrderPreview) */
.orders{ padding: 0 var(--lv-gutter) calc(var(--lv-navbar-offset) + 8px); min-height: calc(100dvh - 104px); }
.order-preview{width: 100%; padding: 12px 16px; text-decoration: none; box-sizing: border-box; transition: background 0.2s ease-out;}
.order-preview:active{ background: var(--background-other-soft-neutral); }
.order-preview__header{ display: grid; grid-template-columns: 56px 1fr; gap: 12px; }
.order-preview__logo{ width: 56px; height: 56px; border-radius: 8px; padding: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.order-preview__info{ display: grid; grid-template-columns: 1fr; gap: 4px; min-width: 0; }
.order-preview__info > h5{
  margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; row-gap: 4px; color: var(--lv-ink); font-size: 14px; font-weight: 700; line-height: 1.4;
}.order-preview__info > p, .order-preview__address > p{ margin: 0; color: var(--lv-dim); font-size: 12px; line-height: 1.5; }
.order-preview__address{ display: flex; flex-flow: column; align-items: flex-start; gap: 4px; }
.order-preview__footer{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; }
.order-preview__products{ display: flex; gap: 6px; }
.sf-emoji-xs{ font-size: 18px; }
.order-preview__footer > p{ margin: 0 0 0 auto; color: var(--lv-ink); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.order-preview__footer .chev{ flex: 0 0 auto; }
.order-preview__info > p b{ color: var(--lv-ink); font-weight: 700; }
.order-detail__meta{ margin: 12px 0 0; color: var(--lv-dim); font-size: 12px; line-height: 1.5; }

/* Дополнительные тона бейджей (AppBadge) */
.app-badge_xs{ gap: 2px; height: 16px; padding: 0 4px; font-size: 11px; font-weight: 400; }
.app-badge_brand{ color: var(--lv-on-brand, var(--lv-white)); background-image: var(--lv-gradient-brand); }
body.cabinet-mode #view{ padding-bottom: 0; }

.msp-cabinet{ min-height: 100dvh; display: flex; flex-flow: column; }

/* Ролевой хедер (канон .dash-head) */
.cabinet__head{
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 12px; margin-top: 12px;
}
.cabinet__ava{
  flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--lv-r-lg);
  background: var(--lv-soft-tiffany); color: var(--lv-tiffany-text);
  display: flex; align-items: center; justify-content: center;
}
.cabinet__titles{ min-width: 0; flex: 1; }
.cabinet__title{ margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--lv-ink); }
.cabinet__note{ margin: 2px 0 0; color: var(--lv-dim); font-size: 12px; line-height: 1.5; }

.cabinet__body{ flex: 1; width: 100%; padding: 0 var(--lv-gutter) calc(var(--lv-navbar-offset) + 16px); max-width: 924px; margin-inline: auto; }

/* Нижний бар разделов (Material 3 Navigation bar, родственник NavBar) */
.cabinet__bar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  border-top: 1px solid var(--lv-line);
  background: var(--lv-glass, rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.cabinet__bar-in{
  max-width: 480px; margin: 0 auto; height: var(--lv-navbar-height, 56px);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.cabinet__bar-link{
  border: 0; background: none; display: flex; flex-flow: column; align-items: center;
  justify-content: center; gap: 2px; color: var(--lv-dim); cursor: pointer;
  position: relative; padding: 0;
}
.cabinet__bar-ind{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; border-radius: 0 0 3px 3px; background: transparent; }
.cabinet__bar-link--active{ color: var(--lv-pink-dark); }
.cabinet__bar-link--active .cabinet__bar-ind{ background: var(--lv-pink); }
.cabinet__bar-label{ font-size: 10px; font-weight: 600; line-height: 1.2; }

/* KPI (role-kpi) */
.msp-overview__kpi{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 4px 0 0; }
.role-kpi{padding: 12px; display: flex; flex-flow: column; gap: 2px;}
.role-kpi__label{ color: var(--lv-dim); font-size: 11px; font-weight: 600; }
.role-kpi__value{ color: var(--lv-ink); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.role-kpi__sub{ color: var(--lv-dim); font-size: 11px; line-height: 1.35; }
.role-kpi_accent{ background: var(--lv-gradient-brand); }
.role-kpi_accent .role-kpi__label,
.role-kpi_accent .role-kpi__sub{ color: var(--lv-on-brand, var(--lv-white)); opacity: 0.8; }
.role-kpi_accent .role-kpi__value{ color: var(--lv-on-brand, var(--lv-white)); }

/* Карточки и заголовки разделов (role-card / role-section-head) */
.role-card{margin: 12px 0 0; padding: 16px 0 0; overflow: hidden;}
.role-section-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 var(--lv-gutter); }
.role-section-head h2{ margin: 0; color: var(--lv-ink); font-size: 14px; font-weight: 800; line-height: 1.35; }
.role-section-head__sub{ color: var(--lv-dim); font-size: 12px; font-weight: 600; }
.role-link{ border: 0; background: none; padding: 0; color: var(--lv-pink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }

/* Чек-лист запуска (MspStarter) */
.msp-starter__progress{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 16px 0; }
.msp-starter__progress-label{ color: var(--lv-dim); font-size: 12px; font-weight: 600; }
.msp-starter__meter{ flex: 1; max-width: 140px; height: 8px; border-radius: var(--lv-r-pill); background: var(--background-other-soft-neutral); overflow: hidden; display: block; }
.msp-starter__meter-fill{ display: block; height: 100%; border-radius: var(--lv-r-pill); background-image: var(--lv-gradient-brand); }
.msp-starter__steps{ margin: 12px 0 0; padding: 0 var(--lv-gutter) 16px; list-style: none; display: grid; gap: 8px; }
.msp-starter__step{ display: flex; align-items: center; gap: 10px; color: var(--lv-dim); font-size: 13px; }
.msp-starter__step b{ font-weight: 700; color: var(--lv-ink); }
.msp-starter__step-check{
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--lv-line-strong); display: inline-flex; align-items: center; justify-content: center;
  color: var(--lv-on-brand, var(--lv-white));
}
.msp-starter__step-check svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); }
.msp-starter__step[data-done='true'] .msp-starter__step-check{ background: var(--lv-tiffany); border-color: var(--lv-tiffany); }
.msp-starter__step[data-done='true']{ color: var(--lv-ink); }/* Заказы точки */ .msp-orders__list, /* Товары точки */ .msp-products__list{ padding: 12px 16px 16px; display: grid; gap: 10px; }
.msp-order-row{ display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--lv-r-sm); border: 1px solid var(--lv-line); }
.role-tag{ flex: none; padding: 2px 10px; border-radius: var(--lv-r-pill); background: var(--lv-soft-tiffany); color: var(--lv-tiffany-text); font-size: 11px; font-weight: 800; white-space: nowrap; }
.msp-product-row{ display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; }
.msp-team__list{ padding: 12px 0 0; }

.rep-cabinet .cabinet__bar-link--active{ color: var(--lv-gold-text); }
.rep-cabinet .cabinet__bar-link--active .cabinet__bar-ind{ background: var(--lv-gold); }
.amb-cabinet .cabinet__bar-link--active{ color: var(--lv-tiffany-text); }
.amb-cabinet .cabinet__bar-link--active .cabinet__bar-ind{ background: var(--lv-tiffany); }

/* Карточка «следующий шаг» (role-next) */
.role-next{display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 12px 0 0; padding: 12px 16px; text-decoration: none; cursor: default;}
.role-next__icon{ width: 40px; height: 40px; border-radius: var(--lv-r-sm); background: var(--lv-soft-gold); color: var(--lv-gold-text); display: inline-flex; align-items: center; justify-content: center; }
.role-next__body{ display: flex; flex-flow: column; gap: 2px; min-width: 0; }
.role-next__title{ color: var(--lv-ink); font-size: 14px; font-weight: 700; line-height: 1.4; }
.role-next__desc{ color: var(--lv-dim); font-size: 12px; line-height: 1.45; }

/* ---------- Кабинеты: единый ритм ширины и двухколоночная система ----------
   Все блоки вкладок — cabinet-screen: ширина 100%, одинаковый вертикальный
   шаг 12px; ≥640px блоки раскладываются в две колонки (как профиль),
   KPI-полоса идёт поверх колонок на всю ширину в 4 карточки. */
.cabinet-screen > *{ width: 100%; box-sizing: border-box; margin: 0 0 12px; }
.cabinet-screen > *:last-child{ margin-bottom: 0; }
.cabinet-screen > .role-card,
.cabinet-screen > .msp-overview__kpi{ margin: 0 0 12px; }
/* Две колонки — только там, где им есть место (фолд ≥900): на 640–899
   колонки по ~300px ломали заголовки и делали блоки «уже чем ниже» */
/* KPI в 4 ряда только в одноколонке ≥640; в двухколонке — 2×2 в своей
   колонке, чтобы все блоки кабинета были одной ширины (замечание
   владельца: «запуск точки уже, чем блок над ней») */
@media (min-width: 640px) and (max-width: 899.9px){
  .msp-overview__kpi { grid-template-columns: repeat(4, 1fr); }
  .msp-overview__kpi > .role-kpi__value { font-size: 22px; }
}
@media (min-width: 900px){
  .cabinet-screen { columns: 2; column-gap: 16px; }
  .cabinet-screen > * { break-inside: avoid; }
}

/* ---------- МСП: счёт верификации и настройки точки ---------- */
.role-empty__icon{
  width: 52px; height: 52px; border-radius: var(--lv-r-lg); margin-bottom: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.role-empty__icon svg{ width: var(--lv-icon-24); height: var(--lv-icon-24); }
.role-empty__title{ font-size: 14px; font-weight: 800; color: var(--lv-ink); }
.role-empty__text{ margin: 6px 0 0; color: var(--lv-dim); font-size: 13px; line-height: 1.55; }
.role-field__label{ display: block; margin: 10px 0 4px; color: var(--lv-dim); font-size: 11px; font-weight: 600; }
.msp-payment__amount{ font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--lv-ink); }
.msp-payment__code{
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px;
  border: 1px dashed var(--lv-line-strong); border-radius: var(--lv-r-sm); background: var(--lv-surface);
  color: var(--lv-ink); font: inherit; font-size: 14px; font-weight: 800;
  letter-spacing: 0.06em; cursor: pointer;
}
.msp-payment__code svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }
.role-pulse{
  flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--lv-tiffany); animation: role-pulse 1.4s ease-in-out infinite;
}
@layer base{

@keyframes role-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
}

.msp-days{ display: flex; flex-wrap: wrap; gap: 6px; }
.msp-time{ display: inline-flex; align-items: center; gap: 6px; }
.msp-time input{
  border: 1px solid var(--lv-line-2); border-radius: 8px; background: var(--lv-card);
  color: var(--lv-ink); font: inherit; font-size: 13px; padding: 6px 8px;
}

/* ============================================================
   ЗЕРКАЛО СТЕЙДЖА · АДРЕСА И РЕДАКТИРОВАНИЕ ПРОФИЛЯ
   Порт ProfileAddresses (AddressItem/AddressesEmpty), AddressForm,
   ProfileEditForm из lovii-app (origin/staging 1fc7a27).
   ============================================================ */
.addresses{ padding: 0 var(--lv-gutter) calc(var(--lv-navbar-offset) + 8px); }
.addresses__head{ display: flex; align-items: center; justify-content: space-between; margin: 16px 0 0; padding: 0; }.addresses__head h4, .home-promos > h3{ margin: 0; color: var(--lv-ink); font-size: 16px; font-weight: 800; line-height: 1.35; }
.addresses__list{ margin: 16px 0 0; display: grid; grid-template-columns: 1fr; gap: 8px; }

.address-item{display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 12px 16px; box-sizing: border-box;}
.address-item.active{ border-color: var(--lv-tiffany); }
.address-item__info{ min-width: 0; cursor: pointer; }
.address-item__info h6{ margin: 0 0 2px; color: var(--lv-ink); font-size: 13px; font-weight: 800; }
.address-item__info > p{ margin: 0; color: var(--lv-ink); font-size: 14px; font-weight: 600; line-height: 1.45; }.address-item__extra, .partner-row__state{ color: var(--lv-dim); font-size: 12px; }
.address-item__current{ margin-top: 4px; color: var(--lv-tiffany-text); font-size: 11px; font-weight: 700; }
.address-item__edit{
  width: 40px; height: 40px; border: 0; border-radius: var(--lv-r-sm); background: var(--background-other-soft-neutral);
  color: var(--lv-dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.address-item__edit svg{ width: var(--lv-icon-16); height: var(--lv-icon-16); }/* Форма адреса (AddressForm) */ .address-form, /* Редактирование профиля (ProfileEditForm) */ .profile-edit{ padding: 0 var(--lv-gutter) calc(var(--lv-navbar-offset) + 16px); display: grid; gap: 12px; }
.acc-map{
  position: relative; height: 180px; border-radius: var(--lv-r-lg); overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, var(--lv-line-2) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--lv-line-2) 39px 40px),
    var(--background-other-soft-neutral);
  display: flex; align-items: center; justify-content: center;
}
.acc-map__pin{ width: 44px; height: 44px; border-radius: 50%; background: var(--lv-pink); color: var(--lv-on-brand, var(--lv-white)); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }.acc-map__pin svg{ width: var(--lv-icon-20); height: var(--lv-icon-20); }
.acc-fields{ display: grid; grid-template-columns: 1fr; gap: 10px; }
@layer primitives{

.acc-field { display: grid; gap: 4px; color: var(--lv-dim); font-size: 11px; font-weight: 600; }
}

.acc-field input{
  height: 44px; border: 1px solid var(--lv-line-strong); border-radius: var(--lv-r-sm);
  background: var(--lv-card); color: var(--lv-ink);
  font: inherit; font-size: 14px; padding: 0 12px; box-sizing: border-box;
}.acc-field input:focus, .auth-code-input:focus{ outline: none; border-color: var(--lv-pink); }
.acc-two{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acc-del{
  width: 100%; margin-top: 8px; height: 44px; border: 0; border-radius: var(--lv-r-pill);
  background: none; color: var(--lv-pink-dark); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.acc-kicker{ margin: 4px 0 0; color: var(--lv-dim); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.acc-card{ padding: 16px; display: grid; gap: 10px; }/* ---------- ЗЕРКАЛО СТЕЙДЖА · АВТОРИЗАЦИЯ (AuthModule) ---------- */ body.cabinet-mode-auth .app-header, .home-promos__list::-webkit-scrollbar{ display: none; }
.auth-screen{ min-height: 100dvh; padding: 12px 16px 32px; }
.auth-head{ display: flex; margin: 8px 0 8px; max-width: 420px; margin-inline: auto; }
.auth-logo{ display: flex; justify-content: center; margin: 4px 0 0; max-width: 420px; margin-inline: auto; }
.auth-logo img{ display: none; height: 30px; width: auto; }
[data-theme="dark"] .auth-logo img.i-dark, [data-theme="light"] .auth-logo img.i-light{ display: block; }
.auth-step{ display: grid; gap: 12px; margin: 4vh auto 0; max-width: 420px; }
.auth-step .list-card{ margin: 0; }
.auth-step .sr-ico img{ width: 20px; height: 20px; display: block; }
.auth-step h3{ margin: 0; color: var(--lv-ink); font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.auth-note{ margin: 0; color: var(--lv-dim); font-size: 12px; line-height: 1.5; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.auth-note a{ color: var(--lv-pink); }
.auth-note svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); flex-shrink: 0; }
.auth-phone-line{ margin: 0; color: var(--lv-dim); font-size: 13px; line-height: 1.5; }
.acc-field input.auth-code-input{ width: min(184px, 100%); margin-inline: auto; height: 56px; text-align: center; letter-spacing: 0.45em; text-indent: 0.45em; font: inherit; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--lv-ink); border: 1px solid var(--lv-line-strong); border-radius: var(--lv-r-md); background: var(--lv-surface); }

/* ---------- МСП: переключатель юрлица и расписание точки ---------- */
.cabinet__partner{
  display: inline-flex; align-items: center; gap: 4px; margin: 3px 0 0;
  padding: 0; border: 0; background: none;
  color: var(--lv-dim); font: inherit; font-size: 12px; line-height: 1.5;
  cursor: pointer; text-align: left;
}
.cabinet__partner svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); color: var(--lv-dim); }
.partner-row{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border: 0; border-top: 1px solid var(--lv-line-2);
  background: none; color: var(--lv-ink); font: inherit; text-align: left; cursor: pointer;
}.partner-row:first-child, .msp-od__item:first-child{ border-top: 0; }
.partner-row.active{ color: var(--lv-pink-dark); font-weight: 700; }
.partner-row__name{ display: flex; flex-flow: column; gap: 0px; }
.partner-row__name small{ color: var(--lv-dim); font-size: 11px; font-weight: 400; }.msp-sched, .msp-od__flow, .msp-od__items{ display: grid; gap: 6px; }
.msp-sched__row{
  display: grid; grid-template-columns: 34px 1fr 1fr auto; gap: 8px; align-items: center;
  padding: 8px; border-radius: 10px; background: var(--lv-surface);
}
.msp-sched__day{ font-size: 12px; font-weight: 700; color: var(--lv-ink); text-transform: uppercase; }
/* ---------- Акции рядом (карточки акций точек, канон прежней демки) ---------- */
.home-promos{ width: 100%; margin: 16px 0 0; padding: 0 0 0 16px; }
.home-promos__list{
  width: 100%; overflow: auto; margin: 12px 0 0; padding: 0 var(--lv-gutter) 4px 0;
  display: flex; align-items: stretch; justify-content: flex-start; gap: 12px;
  scrollbar-width: none;
}
.promo-card{
  flex-shrink: 0; width: 240px; min-height: 148px; padding: 12px;
  border-radius: var(--lv-r-lg); display: flex; flex-flow: column; gap: 4px;
  text-decoration: none; box-sizing: border-box; position: relative; overflow: hidden;
}
.promo-card__badge{
  align-self: flex-start; padding: 2px 8px; border-radius: var(--lv-r-pill);
  background: rgba(255, 255, 255, 0.20); color: var(--lv-white);
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.promo-card__title{ margin-top: 6px; color: var(--lv-white); font-size: 14px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.promo-card__sub{ color: rgba(255, 255, 255, 0.94); font-size: 12px; line-height: 1.4; }
.promo-card__foot{
  margin-top: auto; padding-top: 10px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700;
}.promo-card__dl, .owner-cabinet .cabinet__bar-link--active{ color: var(--lv-gold-text); }
.promo-card__store{ color: rgba(255, 255, 255, 0.88); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- МСП: детальный заказ (статусная машина,MspOrderDetail) ---------- */
.msp-order-row.is-link{ cursor: pointer; transition: background 0.15s; }
.msp-order-row.is-link:hover{ background: var(--lv-surface); }
.msp-od__meta{ margin: 8px 0 0; color: var(--lv-dim); font-size: 12px; line-height: 1.5; }
.msp-od__step{ display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--lv-dim); }
.msp-od__dot{
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--lv-line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lv-on-brand, var(--lv-white));
}
.msp-od__dot svg{ width: var(--lv-icon-12); height: var(--lv-icon-12); }.msp-od__step.done, .order-receipt__rows dt{ color: var(--lv-dim); }
.msp-od__step.done .msp-od__dot{ background: var(--lv-tiffany); border-color: var(--lv-tiffany); }
.msp-od__step.cur{ color: var(--lv-ink); font-weight: 700; }
.msp-od__step.cur .msp-od__dot{ background: var(--lv-pink); border-color: var(--lv-pink); }
.msp-od__item{ display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--lv-ink); padding: 6px 0; border-top: 1px solid var(--lv-line-2); }
.msp-od__item b{ flex: none; font-weight: 700; }
.msp-od__total{
  display: flex; justify-content: space-between; margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--lv-line-2); color: var(--lv-ink);
  font-size: 14px; font-weight: 800;
}

/* ---------- Квитанция заказа (SZ-017, OrderReceipt) ---------- */
.order-receipt{margin: 16px 0 0; padding: 16px; box-sizing: border-box;}
.order-receipt__total{ display: flex; align-items: baseline; justify-content: space-between; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--lv-line-2); }
.order-receipt__total .l{ font-size: 14px; font-weight: 700; color: var(--lv-ink); }
.order-receipt__total .v{ font-size: 16px; font-weight: 800; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.order-receipt__head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid var(--lv-line-2);
}
.order-receipt__head h5{ margin: 0; font-size: 14px; font-weight: 800; color: var(--lv-ink); }
.order-receipt__head p{ margin: 0; color: var(--lv-dim); font-size: 13px; font-weight: 600; }
.order-receipt__rows{ margin: 0; display: grid; gap: 8px; }
.order-receipt__rows > div{ display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.order-receipt__rows dd{ margin: 0; color: var(--lv-ink); font-weight: 600; text-align: right; }
.order-receipt__rows > div > div:first-child, .order-receipt__rows dt{ white-space: nowrap; }
.order-receipt__disc{ margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--lv-line-2); color: var(--lv-dim); font-size: 11px; line-height: 1.5; }

/* Контур счёта: сегмент на всю ширину колонки (как фильтры в ленте) */
.wallet__contour .seg{ width: 100%; }

.stat-pill.gold,
.st-mod, .st-wait, .dash-note.tone-gold,
.code-card.tone-gold,
.lesson-status.active,
.tx-ico.out, .priv-card.t-gold .pc-ico,
.sr-ico.t-gold,
.role-pill.t-gold,
.profile__nav-ico.t-gold,
.priv__card_gold .priv__ico, .cabinets__ico.t-gold, .history__ico.t-gold,
.tx-ico.out,
.rep-cabinet .cabinet__ava,
.owner-cabinet .cabinet__ava{
  background:var(--lv-soft-gold);color:var(--lv-gold-text)
}
.stat-pill.tiffany, .info-pill.tiffany, .status-tiffany,
.st-active, .dash-note.tone-tiffany,
.code-card.tone-tiffany,
.lesson-status.done,
.tx-ico.in, .priv-card.t-tiffany .pc-ico,
.sr-ico.t-tiffany,
.role-pill.t-tiffany,
.profile__nav-ico.t-tiffany,
.tier__level_done, .priv__card_tiffany .priv__ico, .cabinets__ico.t-tiffany, .cabinets__tag_ready, .history__ico.t-tiffany,
.tx-ico.in,
.stat-pill.tiffany,
.amb-cabinet .cabinet__ava,
.investor-cabinet .cabinet__ava{
  background:var(--lv-soft-tiffany);color:var(--lv-tiffany-text)
}
.owner-cabinet .cabinet__bar-link--active .cabinet__bar-ind{ background: var(--lv-gold); }
.investor-cabinet .cabinet__bar-link--active{ color: var(--lv-tiffany-text); }
.investor-cabinet .cabinet__bar-link--active .cabinet__bar-ind{ background: var(--lv-tiffany); }

/* Столбчатый график (CSS-бары) */
.roles-bars{ display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 120px; margin-top: 12px; }
.roles-bars__col{
  flex: 1; height: 100%; display: flex; flex-flow: column; justify-content: flex-end;
  align-items: center; gap: 4px; min-width: 0;
}
.roles-bars__col i{ display: block; width: 70%; max-width: 34px; border-radius: 6px 6px 2px 2px; }
.roles-bars__col span{ font-size: 10px; color: var(--lv-dim); white-space: nowrap; }

/* Настройки точки: строка расписания не растягивает экран на телефонах
   (нативные time-инпуты широкие — разрешаем колонкам сжиматься) */
.msp-sched__row{ grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; }
.msp-sched__row .msp-time{ justify-content: center; min-width: 0; }
.msp-sched__row .msp-time input{ width: 100%; min-width: 0; padding: 4px 2px; font-size: 11px; text-align: center; }
.msp-sched__row .app-switch{ transform: scale(0.88); }

/* Шапка на узких экранах (≤360): логотип и пилюля адреса сжимаются */
@media (max-width: 360px){
  .app-header-in { gap: 8px; padding: 0 10px; }
  .app-header .logo-img { width: 118px; }
  .pill-btn .lbl { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Супер-узкие (≤340): логотип короче, адрес — иконкой */
@media (max-width: 340px){
  .app-header .logo-img { width: 92px; }
  .pill-btn .lbl { display: none; }
}

/* ---------- Периоды владельца/инвестора (лента чипов) ---------- */
.roles-periods{
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 12px; padding: 2px 0;
}
.roles-periods::-webkit-scrollbar{ display: none; }
.roles-periods .app-chip{ flex-shrink: 0; }

/* Оформление заказа: это отдельный шаг, а не продолжение корзины — нижнее меню здесь скрываем */
body:has(#view .create-order) .app-nav{ display: none; }
/* Контента может быть меньше экрана: панель не «висит» в пустоте, а липнет к низу контента */
body:has(#view .create-order) .create-order{ padding-bottom: 16px; min-height: calc(100dvh - 114px); }
body:has(#view .create-order) .create-order__cta{
  position: sticky; bottom: 0; margin-top: auto;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* Фото позиции внутри плитки: заполняет плитку, сохраняя её размер и радиус */
.thumb-img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }

/* Акция: фотография заведения как фон + затемнение, чтобы текст читался */
.promo-card{ isolation: isolate; }
.promo-card__photo{ position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; }
.promo-card__photo::after{ content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,14,18,.30) 0%, rgba(22,14,18,.66) 45%, rgba(22,14,18,.88) 100%); }
.promo-card > *:not(.promo-card__photo){ position: relative; z-index: 1; }

/* Плашка адреса в шапке: шеврон показываем — он означает «сменить район».
   Общее правило .pill-btn .chev{display:none} остаётся для остальных пилюль. */
.app-header .pill-btn .chev{ display: inline-flex; }

/* Оформление заказа: состав заказа в складыше — строки ровно как в корзине (фото держит край) */
.create-order .collapse .collapse__inner{ padding: 0; }
.create-order .collapse .collapse__body > div{ padding: 0; }
/* ===== Ряд с медиа-колонкой (канон: .row-item--media) =====
   Один системный вариант на все экраны, где строка начинается с фото:
   товар в корзине и в заказе, заведение в корзине и в списках.
   Фото — левая колонка в высоту строки, вплотную к трём сторонам; текст по центру. */
.row-item--media{ padding: 0 12px 0 0; gap: 0; align-items: center; }
.row-item--media > .ri-emoji,
.row-item--media > .sr-ico{ flex: 0 0 92px; width: 92px; min-height: 92px; align-self: stretch; border-radius: var(--lv-r-sm); overflow: hidden; }
.row-item--media > .ri-mid{ padding: 12px 0 12px 12px; }
.row-item--media.row-item--sm > .ri-emoji,
.row-item--media.row-item--sm > .sr-ico{ flex-basis: 76px; width: 76px; min-height: 76px; }
/* Системная строка: текст не должен наследовать вид ссылки.
   Строка часто целиком является ссылкой — цвет и подчёркивание задаём явно. */
.row-item{ color: var(--lv-ink); }
.row-item a{ color: inherit; text-decoration: none; }
.row-item .nm{ color: var(--lv-ink); }
.row-item .sb{ color: var(--lv-dim); }
.row-item .sb a{ color: inherit; }
/* Подпись строки: если места мало — пара «· цена / шт» уходит на вторую строку ЦЕЛИКОМ
   (перенос разрешён перед ней, но запрещён внутри неё). */
.ri-mid .sb{ align-items: baseline; }
.ri-mid .sb > span:not(.row-amount){ white-space: nowrap; }
/* Страница точки: блоки держат общий боковой отступ страницы (16px),
   как и остальные секции (.place-search, .store-categories). */
.place-catalog{ margin: 24px 0 0; padding: 0 var(--lv-gutter); }
.place-card{ margin: 14px 0 0; padding: 0 var(--lv-gutter); }
.place__teaser{ margin: 16px 0; padding: 16px; }
/* Кнопки шапки точки (избранное и «о заведении») — правый слот системного ряда */
.place-card__tools{ display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.place-card__tools > button{
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 0; border-radius: var(--lv-r-sm);
  background: var(--lv-surface, var(--lv-line)); color: var(--lv-dim);
}
.place-card__tools > button > svg{ width: var(--lv-icon-20); height: var(--lv-icon-20); }
.place-card__tools .fav-pill{ width: auto; height: auto; background: transparent; }
/* Список заведений: тот же боковой отступ страницы, что и на других экранах (16px) */
.stores__catalog{ padding: 0 var(--lv-gutter); }
/* Большое фото товара: как и все изображения витрины — на отступе страницы и со скруглением */
.product__image{ margin: 0 16px; border-radius: var(--lv-r-lg); overflow: hidden; }

/* ============================================================
   ОБЩИЕ ПАРАМЕТРЫ СТРАНИЦ (единый источник, вместо повторов по экранам)
   ------------------------------------------------------------
   --lv-gutter        отступ контента от края экрана
   --lv-section-gap   вертикальный ритм между блоками
   --lv-img-radius    скругление изображений (как у всех фото в системе)
   Поля и чипы ниже приведены к одному размерному ряду — см. блоки FIELD и CHIP.
   ============================================================ */
:root{
  --lv-gutter: 16px;
  --lv-section-gap: 16px;
  --lv-img-radius: var(--lv-r-sm);
}

/* ---- CHIP: один размерный ряд для чипов, статусов и бейджей ----
   Было 10 высот и 4 радиуса на одинаковых по смыслу элементах.
   Стало три ступени: 24 / 20 / 16 px. Тона и цвета у каждого свои, геометрия общая. */
.stat-pill, .pay-badge, .wallet__badge, .st-chip, .app-badge, .status-pill, .info-pill, .role-pill{
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 9px; border-radius: var(--lv-r-pill);
  font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
}

/* ---- FIELD: одна анатомия поля ввода ----
   44 px, радиус 12, рамка line-strong, фон карточки. Было три разных набора. */
.acc-field textarea, .msp-signup textarea{ height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; }
.acc-field input:focus, .acc-field textarea:focus, .msp-signup input:focus{ outline: none; border-color: var(--lv-pink); }

/* Картинки системы: единое скругление */
.thumb-img{ border-radius: inherit; }
/* Те же ступени для мест, где правила были переопределены своими значениями */
.home-hero__stats .stat-pill{ height: 24px; padding: 0 9px; font-size: 11px; }
.f-field input, .f-field textarea{
  height: 44px; padding: 0 12px; border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-r-sm); background: var(--lv-card); color: var(--lv-ink);
  font: inherit; font-size: 14px; box-sizing: border-box;
}
.f-field input:focus, .f-field textarea:focus{ outline: none; border-color: var(--lv-pink); }
/* Подпись строки в корзине: перенос работает (flex + wrap), а не вылезает под счётчик.
   Пара «сумма» / «· цена / шт» переносится целиком, внутри пары разрыва нет. */
.cart-info__products .ri-mid .sb{ gap: 4px; margin-top: 2px; }
.cart-info__products .ri-mid .sb .row-amount{ font-size: 14px; }
/* Корзина: товары идут отдельными карточками, а не одним блоком с разделителями */
.cart-info__products{ padding: 0; gap: 10px; background: none; border: 0; box-shadow: none; }
.cart-info__products > .row-item + .row-item{ border-top: 0; }
/* Все плитки с фотографиями берут скругление из общего параметра системы */
.product-preview > span,
.popular-store > span,
.nearby-store__info > span,
.nearby-store__products > span,
.catalog-store .ri-emoji,
.place-card > span,
.cart-info__store > span{ border-radius: var(--lv-img-radius); }

/* ---- Перевод баллов (#/transfer) — зеркало ProfileTransfer.vue
   (SZ-076 · «Переводы 2.0», решение владельца 24.09). Только токены. ---- */
.wallet__transfer{ display:inline-flex; align-items:center; gap:6px; margin:10px 16px 0; padding:10px 16px; border:0; border-radius:var(--lv-r-pill); background:var(--lv-pink); color:var(--lv-surface); font-size:13px; font-weight:600; cursor:pointer; }
.wallet__transfer svg{ width:15px; height:15px; flex-shrink:0; }
.wallet__transfer:active{ opacity:.85; }

.transfer__balance{ display:flex; align-items:center; gap:12px; margin:12px 16px 0; padding:14px 16px; background:var(--lv-card); border:1px solid var(--lv-line); border-radius:var(--lv-r-lg); box-shadow:var(--lv-shadow-soft); }
.transfer__bal-ico{ display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border-radius:var(--lv-r-md); background:var(--lv-soft-pink); color:var(--lv-pink-dark); }
.transfer__bal-ico svg{ width:19px; height:19px; }
.transfer__balance-label{ margin:0; font-size:12px; font-weight:600; color:var(--lv-dim); }
.transfer__balance-value{ margin:2px 0 0; font-size:20px; font-weight:800; color:var(--lv-ink); font-variant-numeric:tabular-nums; }

.transfer__form{ display:block; margin-top:16px; }
.transfer__form > .seg{ margin:0 16px 12px; }
.transfer__found{ display:flex; align-items:center; gap:6px; margin:8px 16px 0; font-size:12.5px; font-weight:600; color:var(--lv-tiffany-text); }
.transfer__found svg{ width:14px; height:14px; flex-shrink:0; }
.transfer__rules{ margin:10px 16px 0; font-size:12.5px; line-height:1.45; color:var(--lv-dim); }
.transfer__guidance{ margin:6px 16px 0; font-size:12px; line-height:1.45; color:var(--lv-gold-text); }
.transfer__quote{ margin:12px 16px 0; padding:12px 14px; background:var(--lv-surface); border:1px solid var(--lv-line); border-radius:var(--lv-r-md); font-size:13px; color:var(--lv-ink); }
.transfer__quote p{ margin:0; }
.transfer__quote-muted{ color:var(--lv-dim); }
.transfer__cta{ padding:14px 16px 0; }
.transfer__cta .cta-btn[disabled]{ opacity:.45; pointer-events:none; }

/* ---- Упрощённый перевод: авто-расчёт, экран успеха, тихие ссылки «себе»
   (решение владельца 25.09: одно поле + сумма + авто-математика). Только токены. ---- */
.transfer__calc-line{ margin:0; font-size:13px; color:var(--lv-dim); }
.transfer__calc-line + .transfer__calc-line{ margin-top:4px; }
.transfer__calc-total{ margin:8px 0 0; padding-top:8px; border-top:1px solid var(--lv-line); font-size:13.5px; color:var(--lv-ink); }

.transfer__self{ margin-top:14px; text-align:center; }
.transfer__self .link-btn{ font-size:12.5px; }

.transfer__done{ display:flex; flex-direction:column; align-items:center; text-align:center; margin:32px 16px 0; padding:28px 20px; background:var(--lv-card); border:1px solid var(--lv-line); border-radius:var(--lv-r-lg); box-shadow:var(--lv-shadow-soft); }
.transfer__done-ico{ display:grid; place-items:center; width:56px; height:56px; border-radius:var(--lv-r-pill); background:var(--lv-soft-tiffany); color:var(--lv-tiffany-text); }
.transfer__done-ico svg{ width:28px; height:28px; }
.transfer__done-title{ margin:14px 0 0; font-size:18px; font-weight:800; color:var(--lv-ink); }
.transfer__done-text{ margin:6px 0 0; font-size:13.5px; line-height:1.45; color:var(--lv-dim); max-width:34ch; }
.transfer__done-sum{ margin:10px 0 0; font-size:14px; font-weight:700; color:var(--lv-tiffany-text); }

.transfer__home{ display:block; width:100%; margin-top:8px; height:44px; }

/* Тёмная тема: тосты негатива/ошибки/финансов — тёмный фон и светлый текст (норма AA). */
[data-theme="dark"] .toast_t-negative{ background: color-mix(in srgb, var(--lv-negative) 30%, var(--lv-bg)); color: color-mix(in srgb, var(--lv-negative) 40%, var(--lv-ink)); border-color: color-mix(in srgb, var(--lv-negative) 40%, var(--lv-ink)); }
[data-theme="dark"] .toast_t-negative .d{ color: color-mix(in srgb, var(--lv-negative) 40%, var(--lv-ink)); opacity: .85; }
[data-theme="dark"] .toast_t-error{ background: color-mix(in srgb, var(--lv-negative) 70%, var(--lv-ink)); color: var(--lv-bg); border-color: color-mix(in srgb, var(--lv-negative) 70%, var(--lv-ink)); }
[data-theme="dark"] .toast_t-error .d{ color: var(--lv-bg); opacity: .85; }
[data-theme="dark"] .toast_t-financial{ color: color-mix(in srgb, var(--lv-pink) 55%, var(--lv-white)); border-color: color-mix(in srgb, var(--lv-pink) 55%, var(--lv-white)); }
[data-theme="dark"] .toast_t-financial .d{ color: color-mix(in srgb, var(--lv-pink) 55%, var(--lv-white)); opacity: .85; }