/* SellerAI Mini App — premium dark, mobile-first.
   Визуальный язык: глубокий сине-чёрный фон, карточки с мягким объёмом,
   Score-пилюли, крупная типографика, плотная сетка. */

:root {
  /* Фон почти чёрный с синим подтоном */
  --bg: #050608;
  --bg-2: #0a0d14;
  --surface: #11151e;
  --surface-2: #161b26;
  --surface-3: #1d2330;

  --border: #1c2230;
  --border-soft: #151a24;
  --border-strong: #283040;

  --text: #ffffff;
  --text-2: #c7cedb;
  --text-dim: #8a93a5;
  --text-muted: #5d6675;

  --accent: #2f7cf6;
  --accent-2: #1e5fd0;
  --accent-soft: #6ba3ff;
  --accent-glow: rgba(47, 124, 246, .35);

  --green: #2ecc71;
  --green-bg: rgba(46, 204, 113, .14);
  --amber: #f5a623;
  --amber-bg: rgba(245, 166, 35, .14);
  --red: #ff4d4f;
  --red-bg: rgba(255, 77, 79, .12);
  --gold: #ffcc33;

  --r-xl: 22px;
  --r-lg: 18px;
  --r: 14px;
  --r-sm: 11px;

  --pad: 16px;
  --gap: 10px;
  --tabbar-h: 66px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --sh-sm: 0 2px 10px rgba(0, 0, 0, .4);
  --sh: 0 10px 30px rgba(0, 0, 0, .5);
  --sh-accent: 0 8px 24px rgba(47, 124, 246, .38);

  --ease: cubic-bezier(.22, .8, .32, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.45;
  letter-spacing: -0.015em;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

/* Синее свечение сверху — как на макете */
body::before {
  content: ""; position: fixed; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 160%; height: 400px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%,
              rgba(47, 124, 246, .13) 0%, transparent 65%);
}

button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

/* ---------- Заставка ---------- */
/* Композиция повторяет референс: свечение → знак → эллипс и круг
   с точками → название. Живёт вне #root, поэтому render() её не
   стирает и возможен перекрёстный переход. */
.boot {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--safe-top) 24px calc(var(--safe-bottom) + 24px);
  background: radial-gradient(ellipse at 50% 44%, #0b1322 0%, #05080e 58%, #02040a 100%);
  overflow: hidden;
}

/* ===== Свечение (0 → 1.1с) ===== */
.boot-glow {
  position: absolute; top: 44%; left: 50%;
  width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(70, 142, 255, .40) 0%,
              rgba(47, 124, 246, .14) 32%,
              transparent 64%);
  opacity: 0;
  animation: glowIn 1.15s var(--ease) forwards,
             glowBreath 4.6s ease-in-out 1.9s infinite;
}
@keyframes glowIn {
  0%   { opacity: 0; transform: scale(.45); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes glowBreath {
  0%, 100% { opacity: .8;  transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.07); }
}

/* ===== Сцена ===== */
.boot-stage {
  position: relative; width: 240px; height: 240px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 30px;
}

/* ===== Внешняя орбита: наклонённый эллипс (1.0 → 1.9с) ===== */
.boot-ellipse {
  position: absolute;
  width: 238px; height: 112px;
  border-radius: 50%;
  border: 1px solid rgba(130, 176, 255, .32);
  box-shadow: 0 0 26px rgba(47, 124, 246, .22);
  opacity: 0;
  animation: ellipseIn .95s var(--ease) 1s forwards,
             ellipseSpin 22s linear 1.9s infinite;
}
@keyframes ellipseIn {
  0%   { opacity: 0; transform: rotate(-20deg) scale(.55); }
  70%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(-20deg) scale(1); }
}
/* Вращаем вокруг своей наклонённой оси */
@keyframes ellipseSpin {
  from { transform: rotate(-20deg) scale(1); }
  to   { transform: rotate(340deg) scale(1); }
}

/* ===== Внутренняя орбита: круг (1.1 → 2.0с) ===== */
.boot-ring {
  position: absolute;
  width: 176px; height: 176px;
  border-radius: 50%;
  border: 1px solid rgba(140, 184, 255, .5);
  box-shadow: 0 0 30px rgba(47, 124, 246, .35),
              inset 0 0 26px rgba(47, 124, 246, .18);
  opacity: 0;
  animation: ringIn .9s var(--ease) 1.1s forwards,
             ringSpin 15s linear 2s infinite;
}
@keyframes ringIn {
  0%   { opacity: 0; transform: scale(.6) rotate(-40deg); }
  70%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* ===== Точки на орбитах (1.3 → 1.7с) ===== */
.boot-dot {
  position: absolute; border-radius: 50%;
  background: #eef4ff;
  opacity: 0;
  animation: dotIn .55s ease forwards;
}
/* На эллипсе — мельче и мягче */
.boot-ellipse .boot-dot {
  width: 5px; height: 5px;
  box-shadow: 0 0 9px 3px rgba(130, 176, 255, .8);
}
.boot-dot.e1 { top: -2.5px;    left: 50%; margin-left: -2.5px; animation-delay: 1.5s; }
.boot-dot.e2 { bottom: -2.5px; left: 50%; margin-left: -2.5px; animation-delay: 1.6s; }

/* На круге — ярче, с двойным ореолом */
.boot-ring .boot-dot {
  width: 7px; height: 7px; top: -3.5px; left: 50%; margin-left: -3.5px;
  box-shadow: 0 0 12px 4px rgba(140, 184, 255, .9),
              0 0 26px 8px rgba(47, 124, 246, .5);
  transform-origin: 3.5px 91.5px;
}
.boot-dot.r1 { transform: rotate(0deg);   animation-delay: 1.3s; }
.boot-dot.r2 { transform: rotate(125deg); animation-delay: 1.4s; }
.boot-dot.r3 { transform: rotate(245deg); animation-delay: 1.5s; }
@keyframes dotIn { to { opacity: 1; } }

/* ===== Знак (0.3 → 1.5с) ===== */
.boot-mark {
  position: relative; width: 104px; height: 104px;
  filter: drop-shadow(0 14px 42px rgba(47, 124, 246, .5));
  animation: markBreath 4.6s ease-in-out 2.1s infinite;
}
/* PNG: рамка знака занимает ~60% кадра, поэтому картинка крупнее
   контейнера — визуальный размер рамки остаётся прежним (~104px).
   Вход — тот же plateIn с той же задержкой. */
.boot-glyph {
  position: absolute; top: 50%; left: 50%;
  width: 212px; height: 212px; margin: -106px 0 0 -106px;
  display: block; opacity: 0; transform-origin: 50% 50%;
  animation: plateIn .8s var(--ease) .55s forwards;
}

@keyframes plateIn {
  0%   { opacity: 0; transform: scale(.78); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes markBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* ===== Название (1.75 → 2.45с) ===== */
.boot-name {
  font-size: 34px; font-weight: 700; letter-spacing: -0.035em;
  color: #fff; margin-bottom: 9px;
  opacity: 0;
  animation: riseIn .7s var(--ease) 1.75s forwards;
}
.boot-name span {
  color: #4d92ff;
  text-shadow: 0 0 20px rgba(47, 124, 246, .7);
}
.boot-tagline {
  font-size: 10px; letter-spacing: .38em; text-transform: uppercase;
  color: rgba(150, 180, 220, .72);
  opacity: 0;
  animation: riseIn .7s var(--ease) 1.92s forwards;
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ===== Полоса и журнал (2.1с) ===== */
.boot-progress {
  position: relative; width: 156px; height: 2px;
  border-radius: 999px; overflow: hidden;
  background: rgba(130, 176, 255, .12);
  margin-top: 32px; opacity: 0;
  animation: riseIn .5s var(--ease) 2.1s forwards;
}
.boot-progress span {
  position: absolute; inset: 0; width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #6fa8ff, transparent);
  animation: progressSlide 1.5s ease-in-out infinite;
}
@keyframes progressSlide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(350%); }
}
.boot-text {
  color: var(--text-muted); font-size: 11.5px;
  margin-top: 16px; min-height: 16px; opacity: 0;
  animation: riseIn .5s var(--ease) 2.2s forwards;
}

/* ===== Уход: вспышка и растворение поверх готового Home ===== */
.boot.leaving { animation: bootOut .56s var(--ease) forwards; pointer-events: none; }
.boot.leaving .boot-glow { animation: glowFlare .56s var(--ease) forwards; }
.boot.leaving .boot-stage,
.boot.leaving .boot-name,
.boot.leaving .boot-tagline,
.boot.leaving .boot-progress,
.boot.leaving .boot-text {
  animation: partDissolve .46s var(--ease) forwards;
}
.boot.leaving .boot-name { animation-delay: .05s; }
.boot.leaving .boot-tagline,
.boot.leaving .boot-progress,
.boot.leaving .boot-text { animation-delay: .03s; }

@keyframes bootOut {
  0%   { opacity: 1; }
  58%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes glowFlare {
  0%   { opacity: .82; transform: scale(1); }
  32%  { opacity: 1;   transform: scale(1.22); }
  100% { opacity: 0;   transform: scale(1.7); }
}
@keyframes partDissolve {
  0%   { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.14); filter: blur(8px); }
}

/* Приложение проявляется под заставкой */
.app-enter { animation: appIn .55s var(--ease) forwards; }
@keyframes appIn {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Меньше движения — показываем сразу собранный кадр */
@media (prefers-reduced-motion: reduce) {
  .boot-glow, .boot-ellipse, .boot-ring, .boot-dot, .boot-mark,
  .boot-name, .boot-tagline, .boot-progress, .boot-text {
    animation: none !important;
    opacity: 1 !important;
  }
  .boot-ellipse { transform: rotate(-20deg); }
  .boot-glyph { opacity: 1; animation: none; }
  .boot-progress span { animation: none; width: 100%; opacity: .5; }
  .boot.leaving { animation: bootOut .18s linear forwards; }
  .boot.leaving .boot-glow, .boot.leaving .boot-stage { animation: none; }
  .app-enter { animation: none; }
}

/* ---------- Каркас ---------- */
.app {
  position: relative; z-index: 1; min-height: 100vh;
  padding-top: var(--safe-top);
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 14px);
}
.screen { padding: 8px var(--pad) 0; animation: enter .22s var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Шапка приложения ---------- */
.appbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 14px;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; box-shadow: var(--sh-accent);
}
.brand-name { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
.appbar-actions { display: flex; gap: 8px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; color: var(--text-2);
  transition: transform .12s var(--ease);
}
.icon-btn:active { transform: scale(.92); }

/* Тег тарифа рядом с логотипом */
.plan-tag {
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.plan-tag.free { background: var(--surface-3); color: var(--text-dim); }
.plan-tag.pro {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; box-shadow: 0 2px 10px var(--accent-glow);
}
.plan-tag.ultra {
  background: linear-gradient(135deg, #d9a406, #a8790a);
  color: #fff;
}

/* ---------- Приветствие ---------- */
.greet { font-size: 25px; font-weight: 700; letter-spacing: -0.035em; margin: 2px 0 4px; }
.greet-sub { color: var(--text-dim); font-size: 13.5px; margin-bottom: 20px; }

/* ---------- Заголовки экранов и секций ---------- */
.screen-title { font-size: 25px; font-weight: 700; letter-spacing: -0.035em; margin: 4px 0 4px; }
.screen-sub { color: var(--text-dim); font-size: 13.5px; margin-bottom: 18px; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 24px 0 12px;
}
.section-title {
  font-size: 18px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--text); margin: 24px 0 12px; text-transform: none;
}
.section-head .section-title { margin: 0; }
.section-link {
  font-size: 13px; color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; gap: 3px;
}

/* ---------- Карточки ---------- */
.card {
  background: linear-gradient(165deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 15px; margin-bottom: var(--gap);
  box-shadow: var(--sh-sm);
}
.card-row { display: flex; align-items: center; gap: 12px; }
.card-icon { font-size: 24px; flex-shrink: 0; line-height: 1; }
.card-body { flex: 1; min-width: 0; }
.card-title { font-weight: 650; font-size: 15px; margin-bottom: 3px; letter-spacing: -0.015em; }
.card-text { color: var(--text-dim); font-size: 13px; line-height: 1.45; }

.card.accent {
  border-color: rgba(47, 124, 246, .3);
  background: linear-gradient(165deg, #14203a 0%, var(--surface) 100%);
}
.card.warn {
  border-color: rgba(245, 166, 35, .28);
  background: linear-gradient(165deg, #241c0c 0%, var(--surface) 100%);
}

/* Крупная карточка-герой (например, сводка) */
.hero {
  border-radius: var(--r-xl); padding: 18px;
  background: linear-gradient(140deg, #16233d 0%, #0d1320 100%);
  border: 1px solid rgba(47, 124, 246, .22);
  box-shadow: var(--sh);
  margin-bottom: 8px;
}
.hero-label { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hero-value { font-size: 30px; font-weight: 750; letter-spacing: -0.04em; line-height: 1; }
.hero-delta {
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650;
  background: var(--green-bg); color: var(--green);
}

/* ---------- Строка товара ---------- */
.product {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(165deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px; margin-bottom: var(--gap);
  cursor: pointer; box-shadow: var(--sh-sm);
  transition: border-color .2s, transform .12s var(--ease);
}
.product:active { transform: scale(.99); border-color: rgba(47,124,246,.35); }
.product-main { flex: 1; min-width: 0; }
.product-name {
  font-weight: 650; font-size: 14.5px; margin-bottom: 3px;
  letter-spacing: -0.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.product-meta {
  font-size: 12px; color: var(--text-muted);
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.product-meta span + span::before { content: "·"; margin-right: 6px; color: var(--text-muted); }

/* Превью товара. Фотографий пока нет — показываем иконку категории. */
.thumb {
  width: 52px; height: 52px; border-radius: var(--r); flex-shrink: 0;
  background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.thumb.lg { width: 64px; height: 64px; font-size: 27px; }

/* Шеврон справа */
.chev { color: var(--text-muted); font-size: 17px; flex-shrink: 0; }

/* ---------- Score ---------- */
/* Пилюля со счётом — основной вид в списках */
.score-pill {
  flex-shrink: 0; padding: 5px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: -0.02em;
  white-space: nowrap;
}
.score-pill.good { background: var(--green-bg); color: var(--green); }
.score-pill.mid { background: var(--amber-bg); color: var(--amber); }
.score-pill.bad { background: var(--red-bg); color: var(--red); }
.score-pill.none { background: var(--surface-3); color: var(--text-muted); }

/* Кольцо — там, где нужен акцент */
.score {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; border: 2px solid;
}
.score.good { border-color: var(--green); color: var(--green); background: var(--green-bg); }
.score.mid { border-color: var(--amber); color: var(--amber); background: var(--amber-bg); }
.score.bad { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.score.none { border-color: var(--border-strong); color: var(--text-muted); font-size: 18px; }

/* Крупный блок оценки на карточке товара */
.score-hero {
  border-radius: var(--r-xl); padding: 18px;
  background: linear-gradient(150deg, var(--surface-2) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border); margin-bottom: var(--gap);
  box-shadow: var(--sh-sm);
}
.score-hero-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.score-hero-num { font-size: 42px; font-weight: 750; letter-spacing: -0.05em; line-height: 1; }
.score-hero-num.good { color: var(--green); }
.score-hero-num.mid { color: var(--amber); }
.score-hero-num.bad { color: var(--red); }
.score-hero-max { font-size: 16px; color: var(--text-dim); font-weight: 600; }
.score-hero-title { font-weight: 650; font-size: 15px; margin-bottom: 4px; }
.score-hero-text { color: var(--text-dim); font-size: 13px; line-height: 1.45; }

/* Полоска прогресса под оценкой */
.score-bar {
  height: 6px; border-radius: 999px; background: var(--surface-3);
  overflow: hidden; margin: 12px 0 10px;
}
.score-bar-fill { height: 100%; border-radius: 999px; transition: width .5s var(--ease); }
.score-bar-fill.good { background: linear-gradient(90deg, #26a45c, var(--green)); }
.score-bar-fill.mid { background: linear-gradient(90deg, #c27f12, var(--amber)); }
.score-bar-fill.bad { background: linear-gradient(90deg, #c2352f, var(--red)); }

/* ---------- Сетка плиток ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: var(--gap); }
.tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px 8px; text-align: center;
}
.tile-icon { font-size: 19px; margin-bottom: 6px; }
.tile-label { font-size: 11.5px; color: var(--text-dim); margin-bottom: 3px; }
.tile-value { font-size: 12.5px; font-weight: 650; }
.tile-value.good { color: var(--green); }
.tile-value.mid { color: var(--amber); }
.tile-value.bad { color: var(--red); }
.tile-value.dim { color: var(--text-muted); }

/* Плитки статистики в две-три колонки */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: var(--gap); }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 13px 10px;
}
.stat-label { font-size: 11.5px; color: var(--text-dim); margin-bottom: 5px; }
.stat-value { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }

/* ---------- Кнопки ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px; border: none;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 650; font-size: 15px; letter-spacing: -0.015em;
  cursor: pointer; box-shadow: var(--sh-accent);
  transition: transform .12s var(--ease), opacity .2s, box-shadow .2s;
}
.btn:active { transform: scale(.975); box-shadow: 0 2px 8px var(--accent-glow); }
.btn:disabled { opacity: .38; box-shadow: none; cursor: default; }

.btn.secondary {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); box-shadow: none;
}
.btn.ghost {
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-dim); box-shadow: none;
}
.btn.danger {
  background: transparent; border: 1px solid rgba(255,77,79,.35);
  color: var(--red); box-shadow: none;
}
.btn.sm { padding: 11px; font-size: 13.5px; border-radius: var(--r-sm); }

.btn-row { display: flex; gap: 9px; margin-bottom: var(--gap); }
.btn-row .btn { margin: 0; }

/* ---------- Шаги Auto-Fix ---------- */
.steps { margin-bottom: var(--gap); }
.step { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; }
.step-mark {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; border: 2px solid var(--border-strong);
  color: var(--text-muted); margin-top: 1px;
}
.step-mark.done { background: var(--green); border-color: var(--green); color: #05230f; }
.step-mark.running { border-color: var(--accent); color: var(--accent); }
.step-mark.failed { border-color: var(--red); color: var(--red); }
.step-body { flex: 1; min-width: 0; }
.step-title { font-weight: 600; font-size: 14.5px; margin-bottom: 2px; }
.step-text { font-size: 12.5px; color: var(--text-dim); }
.step.pending .step-title { color: var(--text-muted); font-weight: 500; }

/* Было → стало */
.ba { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 4px 0 14px; }
.ba-box {
  flex: 1; text-align: center; padding: 16px 10px;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--surface);
}
.ba-box.after { border-color: rgba(46,204,113,.35); background: var(--green-bg); }
.ba-num { font-size: 34px; font-weight: 750; letter-spacing: -0.05em; line-height: 1; }
.ba-box.after .ba-num { color: var(--green); }
.ba-label { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; }
.ba-arrow { font-size: 20px; color: var(--text-muted); flex-shrink: 0; }

/* Список галочек */
.checks { margin-bottom: var(--gap); }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 13.5px; }
.check-mark {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: var(--green-bg); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.check-mark.off { background: var(--surface-3); color: var(--text-muted); }

/* ---------- Фильтры ---------- */
.chips {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 14px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  padding: 8px 15px; border-radius: 999px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .18s var(--ease);
}
.chip:active { transform: scale(.96); }
.chip.on {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent; color: #fff; font-weight: 650;
  box-shadow: 0 3px 12px var(--accent-glow);
}

/* ---------- Формы ---------- */
.field { margin-bottom: 15px; }
.label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 7px; font-weight: 500; }
.input, .textarea, .select {
  width: 100%; padding: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
.textarea { min-height: 118px; resize: vertical; line-height: 1.5; }
.hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }

/* Поиск с иконкой */
.search { position: relative; margin-bottom: 12px; }
.search .input { padding-left: 40px; }
.search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 14px; pointer-events: none;
}

/* ---------- Нижняя навигация ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-around; align-items: center;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(10, 13, 20, .9);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid var(--border-soft);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 0; background: none; border: none;
  color: var(--text-muted); font-size: 9.5px; font-weight: 500;
  cursor: pointer; transition: color .2s;
}
.tab.on { color: var(--accent-soft); }
.tab-icon { font-size: 20px; line-height: 1; transition: transform .18s var(--ease); }
.tab:active .tab-icon { transform: scale(.9); }
.tab.add .tab-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 27px; margin-top: -18px; font-weight: 300;
  box-shadow: 0 6px 22px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ---------- Профиль ---------- */
.profile-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 700; color: #fff;
  box-shadow: var(--sh-accent);
}
.profile-name { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.profile-sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; }

.menu { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); margin-bottom: var(--gap); }
.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 15px; background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer; font-size: 14.5px;
}
.menu-item:last-child { border-bottom: none; }
.menu-item:active { background: var(--surface-2); }
.menu-icon { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }
.menu-label { flex: 1; min-width: 0; }

/* Золотой баннер тарифа */
.promo {
  border-radius: var(--r-xl); padding: 16px;
  background: linear-gradient(140deg, #3a2c08 0%, #241d09 100%);
  border: 1px solid rgba(255, 204, 51, .3);
  display: flex; align-items: center; gap: 13px; margin-bottom: var(--gap);
}
.promo-mark {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), #d9a406);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.promo-title { font-weight: 700; font-size: 15px; margin-bottom: 3px; }
.promo-text { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }

/* ---------- Прочее ---------- */
.badge { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge.free { background: var(--surface-3); color: var(--text-dim); }
.badge.pro { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.badge.ultra { background: linear-gradient(135deg, #d9a406, #a8790a); color: #fff; }

.status-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px;
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  margin-bottom: 16px; box-shadow: var(--sh-sm);
}
.status-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.status-name { font-weight: 650; font-size: 15px; }
.credits { text-align: right; flex-shrink: 0; }
.credits-num { font-size: 21px; font-weight: 750; line-height: 1; letter-spacing: -0.03em; }
.credits-label { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }

.empty { text-align: center; padding: 56px 24px; color: var(--text-dim); }
.empty-icon { font-size: 50px; margin-bottom: 14px; opacity: .8; }
.empty-title { font-weight: 700; color: var(--text); margin-bottom: 8px; font-size: 17px; letter-spacing: -0.02em; }

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
  border-radius: var(--r-lg); height: 76px; margin-bottom: 10px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.spinner {
  width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.25);
  border-top-color: currentColor; border-radius: 50%;
  animation: spin .7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error-box {
  background: linear-gradient(150deg, #2a1315, #1a0f10);
  border: 1px solid rgba(255,77,79,.3);
  border-radius: var(--r); padding: 14px;
  color: #ff9b9c; font-size: 13.5px; margin-bottom: var(--gap); line-height: 1.5;
}

.ai-result {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 15px;
  white-space: pre-wrap; word-break: break-word;
  font-size: 14px; line-height: 1.6; margin-bottom: var(--gap);
}

/* ---------- Шторка ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  z-index: 100; display: flex; align-items: flex-end;
  animation: fade .2s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  width: 100%; max-height: 90vh; overflow-y: auto;
  background: var(--bg-2); border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--border);
  padding: 14px var(--pad) calc(22px + var(--safe-bottom));
  animation: rise .28s var(--ease);
  box-shadow: 0 -14px 44px rgba(0,0,0,.55);
}
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
.sheet-handle { width: 38px; height: 4px; background: var(--border-strong); border-radius: 999px; margin: 0 auto 18px; }

/* ---------- Экран тарифов ---------- */
.plan {
  position: relative;
  border-radius: var(--r-xl); padding: 20px 18px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, var(--surface) 0%, var(--bg-2) 100%);
  box-shadow: var(--sh-sm);
}

/* PRO — синий акцент */
.plan.pro {
  border-color: rgba(47, 124, 246, .38);
  background: linear-gradient(160deg, #14203a 0%, #0b101c 100%);
  box-shadow: var(--sh), inset 0 1px 0 rgba(122, 163, 255, .14);
}

/* ULTRA — золото, самый премиальный */
.plan.ultra {
  border-color: rgba(255, 204, 51, .42);
  background: linear-gradient(160deg, #2a2208 0%, #14100a 40%, #0b0a08 100%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 214, 10, .18);
}

/* Лента «текущий» / «выгодный» */
.plan-ribbon {
  position: absolute; top: 14px; right: 16px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.plan-ribbon.now { background: var(--surface-3); color: var(--text-dim); }
.plan-ribbon.best {
  background: linear-gradient(135deg, var(--gold), #d9a406); color: #241d09;
}

.plan-head { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.plan-mark {
  width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--surface-3);
}
.plan.pro .plan-mark {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 14px var(--accent-glow);
}
.plan.ultra .plan-mark {
  background: linear-gradient(135deg, var(--gold), #d9a406);
  box-shadow: 0 4px 16px rgba(255, 204, 51, .3);
}
.plan-name { font-size: 19px; font-weight: 750; letter-spacing: -0.03em; }
.plan-tagline { font-size: 13px; color: var(--text-dim); margin-top: 1px; }

.plan-price { display: flex; align-items: baseline; gap: 7px; margin: 14px 0 4px; }
.plan-price-num { font-size: 34px; font-weight: 750; letter-spacing: -0.045em; line-height: 1; }
.plan.pro .plan-price-num { color: var(--accent-soft); }
.plan.ultra .plan-price-num { color: var(--gold); }
.plan-price-unit { font-size: 15px; color: var(--text-dim); font-weight: 600; }
.plan-price-note { font-size: 12.5px; color: var(--text-muted); margin-bottom: 16px; }

.plan-feats { margin-bottom: 18px; }
.plan-feat {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0; font-size: 13.5px; line-height: 1.4;
}
.plan-feat-mark {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
  background: var(--green-bg); color: var(--green);
}
.plan-feat-mark.off { background: var(--surface-3); color: var(--text-muted); }
.plan-feat.muted { color: var(--text-muted); }

/* Кнопка внутри карточки тарифа */
.plan .btn.ultra-btn {
  background: linear-gradient(135deg, var(--gold), #d9a406);
  color: #241d09; box-shadow: 0 6px 20px rgba(255, 204, 51, .28);
}
.plan .btn.current-btn {
  background: var(--surface-3); color: var(--text-dim);
  box-shadow: none; cursor: default;
}

/* Подвал экрана тарифов */
.plan-note {
  text-align: center; font-size: 12.5px; color: var(--text-muted);
  line-height: 1.5; margin: 6px 0 10px; padding: 0 8px;
}

/* ---------- Поддержка и FAQ ---------- */
.faq-item {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(165deg, var(--surface) 0%, var(--bg-2) 100%);
  margin-bottom: 10px; overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: border-color .2s;
}
.faq-item.open {
  border-color: rgba(47, 124, 246, .38);
  box-shadow: var(--sh), inset 0 1px 0 rgba(122, 163, 255, .1);
}

.faq-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; cursor: pointer;
}
.faq-q {
  flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px;
  line-height: 1.35; letter-spacing: -0.015em;
}
.faq-toggle {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 400; line-height: 1;
  background: var(--surface-3); color: var(--text-dim);
  transition: transform .22s var(--ease), background .2s, color .2s;
}
.faq-item.open .faq-toggle {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; transform: rotate(45deg);
  box-shadow: 0 3px 12px var(--accent-glow);
}

.faq-body {
  padding: 0 16px 16px; font-size: 13.5px; line-height: 1.6;
  color: var(--text-2); white-space: pre-wrap;
  animation: faqOpen .22s var(--ease);
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Блок «не нашли ответ» */
.faq-footer {
  margin-top: 24px; padding: 20px 18px;
  border-radius: var(--r-xl); text-align: center;
  background: linear-gradient(150deg, #16203a 0%, var(--surface) 100%);
  border: 1px solid rgba(47, 124, 246, .25);
  box-shadow: var(--sh);
}
.faq-footer-icon { font-size: 32px; margin-bottom: 10px; }
.faq-footer-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.faq-footer-text {
  font-size: 13px; color: var(--text-dim); line-height: 1.45;
  margin-bottom: 16px;
}

/* ---------- Экран товара ---------- */
/* Галерея. Фотографий в модели пока нет — показываем заглушку
   того же размера, чтобы вёрстка не прыгала, когда они появятся. */
.gallery {
  position: relative;
  aspect-ratio: 4 / 3; width: 100%;
  border-radius: var(--r-xl); overflow: hidden;
  margin-bottom: 14px;
  background: linear-gradient(150deg, var(--surface-2) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.gallery-empty { text-align: center; padding: 20px; }
.gallery-empty-icon { font-size: 48px; opacity: .5; margin-bottom: 10px; }
.gallery-empty-text { font-size: 13px; color: var(--text-muted); line-height: 1.45; }

/* Шапка товара */
.prod-head { margin-bottom: 14px; }
.prod-name {
  font-size: 22px; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.25; margin-bottom: 8px;
}
.prod-tags { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.tag {
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-3); color: var(--text-dim); white-space: nowrap;
}
.tag.active { background: var(--green-bg); color: var(--green); }
.tag.draft { background: var(--amber-bg); color: var(--amber); }
.tag.sold { background: rgba(122,163,255,.14); color: var(--accent-soft); }
.tag.paused { background: var(--surface-3); color: var(--text-muted); }

/* Блок цен */
.price-box {
  display: flex; gap: 10px; margin-bottom: var(--gap);
}
.price-cell {
  flex: 1; padding: 14px 12px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
}
.price-cell.main {
  background: linear-gradient(150deg, #16203a, var(--surface));
  border-color: rgba(47,124,246,.28);
}
.price-cell.profit { border-color: rgba(46,204,113,.3); }
.price-label { font-size: 11.5px; color: var(--text-dim); margin-bottom: 5px; }
.price-value { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.price-cell.main .price-value { color: var(--accent-soft); }
.price-cell.profit .price-value { color: var(--green); }
.price-value.empty { color: var(--text-muted); font-size: 14px; font-weight: 500; }

/* Поля объявления */
.field-row {
  padding: 13px 0; border-bottom: 1px solid var(--border-soft);
}
.field-row:last-child { border-bottom: none; }
.field-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
.field-label {
  font-size: 12px; color: var(--text-dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.field-value {
  font-size: 14px; line-height: 1.55; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
}
.field-value.empty { color: var(--text-muted); font-style: italic; }

/* Сетка действий 2×2 */
.actions-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 9px; margin-bottom: var(--gap);
}
.action-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 16px 10px; cursor: pointer;
  border-radius: var(--r); border: 1px solid var(--border);
  background: linear-gradient(165deg, var(--surface), var(--bg-2));
  transition: border-color .2s, transform .12s var(--ease);
}
.action-btn:active { transform: scale(.97); border-color: rgba(47,124,246,.4); }
.action-btn.disabled { opacity: .4; pointer-events: none; }
.action-icon { font-size: 22px; line-height: 1; }
.action-label { font-size: 12.5px; font-weight: 600; text-align: center; }
.action-note { font-size: 10.5px; color: var(--text-muted); }

/* ---------- Фотографии товара ---------- */
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Счётчик и стрелки поверх главного фото */
.gallery-count {
  position: absolute; right: 12px; bottom: 12px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 12px; font-weight: 600;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* Лента миниатюр */
.thumbs {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 12px; margin-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.thumbs::-webkit-scrollbar { display: none; }

.thumb-item {
  position: relative; flex-shrink: 0;
  width: 74px; height: 74px; border-radius: var(--r);
  overflow: hidden; cursor: pointer;
  border: 2px solid transparent;
  background: var(--surface-2);
  transition: border-color .2s, transform .12s var(--ease);
}
.thumb-item:active { transform: scale(.95); }
.thumb-item.main { border-color: var(--accent); }
.thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Метка главного фото */
.thumb-badge {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 0; text-align: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .03em;
}

/* Кнопка добавления в ленте */
.thumb-add {
  flex-shrink: 0; width: 74px; height: 74px; border-radius: var(--r);
  border: 1px dashed var(--border-strong);
  background: var(--surface); cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; color: var(--text-dim);
}
.thumb-add:active { border-color: var(--accent); }
.thumb-add-icon { font-size: 20px; line-height: 1; }
.thumb-add-text { font-size: 9.5px; }

/* Панель управления выбранным фото */
.photo-tools {
  display: flex; gap: 7px; margin-bottom: var(--gap);
}
.photo-tool {
  flex: 1; padding: 11px 6px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  text-align: center; cursor: pointer; font-size: 12px; font-weight: 600;
  transition: transform .12s var(--ease), border-color .2s;
}
.photo-tool:active { transform: scale(.96); }
.photo-tool.danger { color: var(--red); border-color: rgba(255,77,79,.3); }
.photo-tool.disabled { opacity: .35; pointer-events: none; }

/* Полоса загрузки */
.upload-bar {
  display: flex; align-items: center; gap: 11px;
  padding: 14px; border-radius: var(--r);
  background: linear-gradient(150deg, #16203a, var(--surface));
  border: 1px solid rgba(47,124,246,.3);
  margin-bottom: var(--gap); font-size: 13.5px;
}

/* Просмотр фото на весь экран */
.viewer {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .95);
  display: flex; align-items: center; justify-content: center;
  animation: fade .2s var(--ease);
}
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-close {
  position: absolute; top: calc(16px + var(--safe-top)); right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; cursor: pointer;
}

/* ---------- Правка цены прямо в карточке ---------- */
.price-cell.editable {
  cursor: pointer; position: relative;
  transition: border-color .2s, transform .12s var(--ease);
}
.price-cell.editable:active {
  transform: scale(.97);
  border-color: var(--accent);
}

/* Карандаш рядом с подписью — подсказка, что можно нажать */
.edit-hint {
  margin-left: 5px; font-size: 9px; opacity: .45;
  vertical-align: middle;
}
.price-cell.editable:active .edit-hint { opacity: 1; }

/* Поле ввода внутри ячейки: тот же размер, что у значения */
.price-input {
  width: 100%; padding: 0; margin: 0;
  background: transparent; border: none; outline: none;
  color: var(--accent-soft);
  font-size: 18px; font-weight: 700; letter-spacing: -0.03em;
  font-family: inherit;
  /* убираем стрелки у числового поля */
  -moz-appearance: textfield; appearance: textfield;
}
.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.price-input::placeholder { color: var(--text-muted); font-weight: 500; }

/* ---------- Главная: премиальный Home ---------- */
/* Только свои классы с префиксом home-/hero-/qa-, чтобы не задеть
   остальные экраны. Существующие правила выше не менялись. */

.brand-ai { color: var(--accent-soft); }

.home-greet {
  font-size: 26px; font-weight: 750; letter-spacing: -0.04em;
  margin: 2px 0 4px; line-height: 1.2;
}
.home-greet-sub {
  color: var(--text-dim); font-size: 14px; margin-bottom: 18px;
}

/* ===== Герой: AI-продавец ===== */
.home-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: 20px 18px 18px;
  margin-bottom: 22px;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(47, 124, 246, .30) 0%, transparent 58%),
    linear-gradient(155deg, #16233d 0%, #0c1220 55%, #070b13 100%);
  border: 1px solid rgba(122, 163, 255, .22);
  box-shadow: var(--sh), inset 0 1px 0 rgba(160, 196, 255, .14);
}
/* Тонкие орбиты — статичные, без анимации */
.home-hero .hero-orbit {
  position: absolute; pointer-events: none;
  border: 1px solid rgba(130, 176, 255, .18);
  border-radius: 50%;
}
.home-hero .hero-orbit {
  width: 250px; height: 118px; right: -42px; top: 6px;
  transform: rotate(-18deg);
}
.home-hero .hero-orbit.two {
  width: 186px; height: 186px; right: -14px; top: -28px;
  transform: none; border-color: rgba(130, 176, 255, .12);
}

.home-hero .hero-art {
  position: absolute; right: 14px; top: 50%;
  width: 132px; height: 132px; margin-top: -72px;
  pointer-events: none;
}
.home-hero .hero-logo {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 10px 30px rgba(47, 124, 246, .45));
}

.home-hero .hero-body { position: relative; max-width: 62%; }
.hero-title {
  font-size: 21px; font-weight: 750; letter-spacing: -0.035em;
  margin-bottom: 7px;
}
.hero-sub {
  font-size: 13px; line-height: 1.45; color: var(--text-2);
  margin-bottom: 13px;
}
.hero-chip {
  display: inline-block; margin-bottom: 14px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650;
  color: var(--accent-soft);
  background: rgba(47, 124, 246, .14);
  border: 1px solid rgba(122, 163, 255, .24);
}
.home-hero .btn { box-shadow: 0 8px 26px rgba(47, 124, 246, .45); }

/* Узкие экраны: знак уводим за край, текст на всю ширину */
@media (max-width: 360px) {
  .home-hero .hero-body { max-width: 72%; }
  .home-hero .hero-art { width: 108px; height: 108px; margin-top: -58px; right: 4px; }
}

/* ===== Быстрые действия ===== */
.home-title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.025em;
  margin-bottom: 11px;
}
.qa-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 24px;
}
.qa {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 8px; padding: 13px 5px 12px; cursor: pointer; min-width: 0;
  border-radius: var(--r); border: 1px solid var(--border);
  background: linear-gradient(170deg, var(--surface) 0%, var(--bg-2) 100%);
  transition: border-color .2s, transform .12s var(--ease);
}
.qa:active { transform: scale(.96); border-color: rgba(47, 124, 246, .45); }
.qa-icon { font-size: 21px; line-height: 1; }
.qa-label {
  font-size: 11px; line-height: 1.25; text-align: center;
  color: var(--text-2); white-space: pre-line;
}

/* ===== Твои товары ===== */
.home-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.home-head .home-title { margin: 0; }
.home-count {
  color: var(--text-muted); font-size: 15px; font-weight: 650;
}
.home-link {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--text-dim); cursor: pointer;
}
.home-link:active { color: var(--accent-soft); }

.home-prod {
  display: flex; align-items: center; gap: 12px;
  padding: 11px; margin-bottom: 9px;
  border-radius: var(--r-lg); cursor: pointer;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, var(--surface) 0%, var(--bg-2) 100%);
  box-shadow: var(--sh-sm);
  transition: border-color .2s, transform .12s var(--ease);
}
.home-prod:active { transform: scale(.99); border-color: rgba(47, 124, 246, .35); }
.home-prod-main { flex: 1; min-width: 0; }
.home-cover {
  width: 56px; height: 56px; border-radius: var(--r); flex-shrink: 0;
  overflow: hidden; border: 1px solid var(--border); background: var(--surface-2);
}
.home-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.home-state {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; margin: 3px 0 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-state.good { color: var(--green); }
.home-state.warn { color: var(--amber); }
.home-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: currentColor;
}

/* ===== Следующий шаг ===== */
.home-next {
  margin-top: 6px; padding: 16px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(245, 166, 35, .26);
  background: linear-gradient(160deg, #221a09 0%, var(--surface) 70%);
  box-shadow: var(--sh-sm);
}
.home-next.calm {
  border-color: rgba(46, 204, 113, .26);
  background: linear-gradient(160deg, #0d2318 0%, var(--surface) 70%);
}
.home-next-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.home-next-icon { font-size: 20px; line-height: 1; }
.home-next-title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.home-next-text { font-size: 13px; line-height: 1.5; color: var(--text-dim); }

/* ---------- Карточка товара: премиальный вид ---------- */
/* Переопределения идут в конце файла: исходные правила выше не тронуты,
   поэтому старая разметка и все обработчики продолжают работать. */

.gallery {
  border-radius: 24px;
  border-color: rgba(122, 163, 255, .16);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.prod-head { margin: 16px 0 16px; }
.prod-name {
  font-size: 25px; font-weight: 780; letter-spacing: -0.04em; line-height: 1.2;
}
.prod-tags .tag {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* Цены: стеклянные ячейки, нажимаемые как и раньше */
.price-box { gap: 9px; margin-bottom: 18px; }
.price-cell {
  padding: 15px 13px; border-radius: 18px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .015) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.price-cell.main {
  background: linear-gradient(160deg, rgba(47, 124, 246, .22) 0%, rgba(47, 124, 246, .05) 100%);
  border-color: rgba(122, 163, 255, .32);
  box-shadow: inset 0 1px 0 rgba(160, 196, 255, .18);
}
.price-cell.profit {
  background: linear-gradient(160deg, rgba(46, 204, 113, .16) 0%, rgba(46, 204, 113, .04) 100%);
  border-color: rgba(46, 204, 113, .3);
}
.price-label { font-size: 11px; letter-spacing: .02em; }
.price-value { font-size: 19px; letter-spacing: -0.04em; }

/* Оценка: крупный блок со свечением */
.score-hero {
  border-radius: 24px; padding: 22px 20px;
  background:
    radial-gradient(130% 110% at 20% 0%, rgba(47, 124, 246, .20) 0%, transparent 60%),
    linear-gradient(165deg, #121a2b 0%, #0a0e18 100%);
  border: 1px solid rgba(122, 163, 255, .2);
  box-shadow: var(--sh), inset 0 1px 0 rgba(160, 196, 255, .12);
}
.score-hero-num { font-size: 52px; letter-spacing: -0.06em; }
.score-bar { height: 8px; background: rgba(255, 255, 255, .07); margin: 16px 0 12px; }
.score-hero-title { font-size: 16px; }

/* Сетка действий: стекло вместо тяжёлых рамок */
.actions-grid { gap: 10px; }
.action-btn {
  border-radius: 18px; padding: 18px 10px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .015) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.action-btn:active { border-color: rgba(122, 163, 255, .45); }
.action-icon { font-size: 24px; }
.action-label { font-size: 13px; }

.section-title { font-size: 19px; letter-spacing: -0.03em; }

/* ---------- AI за работой: знак с орбитами ---------- */
.ai-run {
  position: relative; overflow: hidden;
  padding: 28px 18px 24px; margin-bottom: var(--gap);
  border-radius: var(--r-xl); text-align: center;
  background: linear-gradient(165deg, #101a2c 0%, #070b13 100%);
  border: 1px solid rgba(122, 163, 255, .2);
  box-shadow: var(--sh), inset 0 1px 0 rgba(160, 196, 255, .12);
}
.ai-run-stage {
  position: relative; width: 132px; height: 132px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
}
.ai-run-glow {
  position: absolute; inset: -30px; border-radius: 50%;
  background: radial-gradient(circle,
              rgba(70, 142, 255, .34) 0%, rgba(47, 124, 246, .10) 38%, transparent 66%);
  animation: aiBreath 3.2s ease-in-out infinite;
}
.ai-run-orbit {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(140, 184, 255, .4);
  width: 128px; height: 128px;
  animation: aiSpin 7s linear infinite;
}
.ai-run-orbit.two {
  width: 128px; height: 60px;
  border-color: rgba(130, 176, 255, .28);
  animation: aiSpinTilt 11s linear infinite;
}
.ai-run-logo {
  position: relative; width: 132px; height: 132px; display: block;
  filter: drop-shadow(0 10px 26px rgba(47, 124, 246, .5));
  animation: aiBreath 3.2s ease-in-out infinite;
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiSpinTilt {
  from { transform: rotate(-20deg); }
  to   { transform: rotate(340deg); }
}
@keyframes aiBreath {
  0%, 100% { opacity: .88; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
.ai-run-label {
  font-size: 15.5px; font-weight: 650; letter-spacing: -0.02em; margin-bottom: 5px;
}
.ai-run-hint { font-size: 12.5px; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .ai-run-glow, .ai-run-orbit, .ai-run-logo { animation: none !important; }
}

/* ---------- Разовая покупка кредитов ---------- */
.pack-hint {
  font-size: 13px; color: var(--text-dim); line-height: 1.45;
  text-align: center; margin-bottom: 12px;
}
.pack-divider {
  height: 1px; margin: 16px 0 14px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.pack-row { margin-bottom: 10px; }
.pack-note {
  font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 5px;
}
.pack-done {
  text-align: center; padding: 12px; border-radius: var(--r);
  font-size: 14px; font-weight: 650; color: var(--green);
  background: var(--green-bg); border: 1px solid rgba(46, 204, 113, .3);
  margin-bottom: 12px;
}

/* Блок на экране тарифов */
.pack-box {
  border-radius: var(--r-xl); padding: 18px;
  margin: 4px 0 14px;
  background: linear-gradient(160deg, rgba(47, 124, 246, .12) 0%, var(--surface) 70%);
  border: 1px solid rgba(122, 163, 255, .24);
  box-shadow: var(--sh-sm);
}
.pack-title {
  font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  text-align: center; margin-bottom: 5px;
}
.pack-box .pack-hint { margin-bottom: 14px; }
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pack-btn {
  padding: 13px 6px; border-radius: var(--r); cursor: pointer; text-align: center;
  background: linear-gradient(165deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .2s, transform .12s var(--ease);
}
.pack-btn:active { transform: scale(.96); border-color: rgba(122, 163, 255, .5); }
.pack-num {
  font-size: 20px; font-weight: 750; letter-spacing: -0.03em; color: var(--accent-soft);
}
.pack-price { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }

/* ---------- Список товаров: как на референсе ---------- */

/* Шапка: заголовок с градиентом, счётчики, AI-подзаголовок, кнопка и декор */
.pl-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 4px 0 18px;
}
.pl-head-main { flex: 1; min-width: 0; }
.pl-head-side {
  position: relative; flex-shrink: 0; width: 138px; height: 150px;
}
.pl-title {
  font-size: 34px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.05;
  margin-bottom: 8px;
  background: linear-gradient(120deg, #ffffff 0%, #dbe7ff 45%, #8fb5ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pl-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 14.5px; color: var(--accent-soft); font-weight: 600;
  margin-bottom: 10px;
}
.pl-sub span + span::before { content: "•"; margin-right: 6px; color: var(--text-muted); }
.pl-sub .warn { color: var(--accent-soft); }
.pl-sub .good { color: var(--green); }
.pl-tagline {
  font-size: 14px; line-height: 1.4; color: var(--text-2);
  max-width: 230px;
}

.pl-add {
  position: absolute; right: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 7px;
  padding: 12px 17px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-size: 14px; font-weight: 650; color: #fff;
  background: linear-gradient(135deg, #3d8bff 0%, #2f6bf0 60%, #1f4fd8 100%);
  border: 1px solid rgba(160, 196, 255, .35);
  box-shadow: 0 8px 26px rgba(47, 124, 246, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .12s var(--ease);
}
.pl-add:active { transform: scale(.96); }
.pl-add-icon { font-size: 16px; font-weight: 400; line-height: 1; }

/* Декор: знак SellerAI на орбите, под кнопкой */
.pl-art {
  position: absolute; right: -6px; bottom: -8px;
  width: 128px; height: 96px; pointer-events: none;
}
.pl-art-orbit {
  position: absolute; left: 6px; bottom: 10px;
  width: 116px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(110, 168, 255, .55);
  box-shadow: 0 0 18px rgba(47, 124, 246, .35);
  transform: rotate(-14deg);
}
.pl-art-logo {
  position: absolute; right: 8px; top: -6px;
  width: 104px; height: 104px; display: block;
  filter: drop-shadow(0 10px 26px rgba(47, 124, 246, .5));
}

/* Поиск: большое стеклянное поле, кнопка фильтров через разделитель */
.pl-search {
  position: relative; display: flex; align-items: center;
  margin-bottom: 14px; height: 60px;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%);
  border: 1px solid rgba(122, 163, 255, .22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(160, 196, 255, .12),
              0 0 0 1px rgba(47, 124, 246, .08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pl-search .input {
  flex: 1; height: 100%; padding: 0 12px 0 52px;
  background: transparent; border: none; box-shadow: none;
  font-size: 17px; color: var(--text);
}
.pl-search .input:focus { border: none; box-shadow: none; }
.pl-search-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--text-dim); pointer-events: none; opacity: .8;
}
.pl-search-sep { width: 1px; height: 30px; background: rgba(255, 255, 255, .1); }
.pl-search-btn {
  width: 58px; height: 100%; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--text-2);
}
.pl-search-btn.on { color: var(--accent-soft); }
.pl-sorts { padding-bottom: 8px; margin-top: -4px; }

/* Фильтры: иконка + текст + число, активный со свечением */
.pl-chips { gap: 9px; padding-bottom: 16px; }
.pl-chip {
  padding: 11px 15px; border-radius: 15px; font-size: 14px; font-weight: 550;
  background: linear-gradient(165deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  color: var(--text-2);
}
.pl-chip.on {
  background: linear-gradient(135deg, #3d8bff 0%, #2359d6 100%);
  border-color: rgba(160, 196, 255, .4); color: #fff; font-weight: 650;
  box-shadow: 0 6px 20px rgba(47, 124, 246, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.chip-n {
  margin-left: 9px; font-size: 12.5px; font-weight: 700; opacity: .75;
}
.pl-chip.on .chip-n { opacity: .9; }
.chip.dim { opacity: .45; }

/* Карточка товара: стекло, крупная обложка, оценка справа */
.pl-card {
  position: relative;
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px; margin-bottom: 12px;
  border-radius: 22px; cursor: pointer;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(47, 124, 246, .08) 0%, transparent 55%),
    linear-gradient(165deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .015) 100%);
  border: 1px solid rgba(122, 163, 255, .16);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(160, 196, 255, .1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: border-color .2s, transform .12s var(--ease);
}
.pl-card:active { transform: scale(.99); border-color: rgba(122, 163, 255, .45); }

.pl-cover {
  position: relative; flex-shrink: 0;
  width: 86px; height: 86px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(150deg, #1b2434, #10161f);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}
.pl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-cover-empty {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; font-size: 30px; opacity: .5;
}
.pl-photos {
  position: absolute; right: 5px; bottom: 5px;
  display: flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 8px;
  background: rgba(8, 12, 20, .78); color: #fff;
  font-size: 11px; font-weight: 700;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .1);
}
.pl-photos span { font-size: 10px; opacity: .9; }

.pl-main { flex: 1; min-width: 0; padding-top: 2px; }
.pl-name {
  font-size: 16px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.25; margin-bottom: 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pl-price {
  font-size: 19px; font-weight: 750; letter-spacing: -0.035em; margin-bottom: 9px;
}
.pl-price.empty { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.pl-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 11.5px; color: var(--text-dim);
}
.pl-meta-item { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.pl-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-weight: 600; font-size: 11px;
  background: rgba(122, 163, 255, .12); color: var(--accent-soft);
  border: 1px solid rgba(122, 163, 255, .18);
}
.pl-tag-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pl-tag.active { background: var(--green-bg); color: var(--green); border-color: rgba(46, 204, 113, .25); }
.pl-tag.draft { background: rgba(122, 163, 255, .12); color: var(--accent-soft); }
.pl-tag.sold { background: rgba(122, 163, 255, .14); color: var(--accent-soft); }
.pl-tag.paused { background: var(--surface-3); color: var(--text-dim); border-color: var(--border); }

/* Правая колонка: «…», оценка со свечением, вердикт, проблемы, стрелка */
.pl-right {
  position: relative; flex-shrink: 0; width: 126px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 26px 18px 0 0;
}
.pl-more {
  position: absolute; right: -4px; top: -6px;
  width: 30px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; letter-spacing: 1px; color: var(--text-dim); cursor: pointer;
}
.pl-more:active { color: #fff; }
.pl-chev {
  position: absolute; right: -2px; top: 50%; margin-top: -10px;
  font-size: 22px; color: var(--text-muted); line-height: 1;
}
.pl-score {
  padding: 7px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
  border: 1px solid transparent;
}
.pl-score.good {
  color: #5df0a0; background: rgba(46, 204, 113, .16);
  border-color: rgba(46, 204, 113, .35);
  box-shadow: 0 0 18px rgba(46, 204, 113, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.pl-score.mid {
  color: #ffc45a; background: rgba(245, 166, 35, .16);
  border-color: rgba(245, 166, 35, .35);
  box-shadow: 0 0 18px rgba(245, 166, 35, .32), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.pl-score.bad {
  color: #ff7a7c; background: rgba(255, 77, 79, .16);
  border-color: rgba(255, 77, 79, .35);
  box-shadow: 0 0 18px rgba(255, 77, 79, .32), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.pl-score.none { color: var(--text-muted); background: var(--surface-3); }

.pl-verdict { font-size: 12px; font-weight: 600; line-height: 1.3; }
.pl-verdict.good { color: var(--green); }
.pl-verdict.mid { color: var(--amber); }
.pl-verdict.bad { color: var(--red); }
.pl-verdict.none { color: var(--text-muted); }

.pl-issue {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11px; line-height: 1.3; color: var(--text-2);
}
.pl-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--amber); margin-top: 4px;
  box-shadow: 0 0 6px rgba(245, 166, 35, .7);
}

/* Меню «…» */
.pl-menu-title {
  font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* AI-баннер */
.pl-promo {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 13px;
  padding: 20px 16px; margin: 16px 0 26px;
  border-radius: 24px;
  background:
    radial-gradient(110% 120% at 100% 100%, rgba(66, 118, 255, .45) 0%, transparent 55%),
    radial-gradient(80% 80% at 0% 0%, rgba(47, 124, 246, .18) 0%, transparent 60%),
    linear-gradient(160deg, #141f38 0%, #0b1226 100%);
  border: 1px solid rgba(122, 163, 255, .35);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 32px rgba(47, 124, 246, .25),
              inset 0 1px 0 rgba(160, 196, 255, .18);
}
.pl-promo-spark {
  position: absolute; color: rgba(190, 214, 255, .8); pointer-events: none;
  text-shadow: 0 0 12px rgba(122, 163, 255, .9);
}
.pl-promo-spark.one { left: 50%; top: 14px; font-size: 22px; }
.pl-promo-spark.two { right: 14px; top: 8px; font-size: 14px; opacity: .8; }
.pl-promo-mark {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #4a94ff, #2a5fe0);
  box-shadow: 0 8px 24px rgba(47, 124, 246, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.pl-promo-body { flex: 1; min-width: 0; }
.pl-promo-title { font-size: 16.5px; font-weight: 750; letter-spacing: -0.025em; margin-bottom: 5px; }
.pl-promo-text { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.pl-promo-btn {
  flex-shrink: 0; align-self: center;
  padding: 12px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #3d8bff, #1f4fd8);
  border: 1px solid rgba(160, 196, 255, .4);
  box-shadow: 0 8px 22px rgba(47, 124, 246, .55);
}
.pl-promo-btn:active { transform: scale(.96); }
@media (max-width: 380px) {
  .pl-promo { flex-wrap: wrap; }
  .pl-promo-btn { width: 100%; text-align: center; }
}

/* Полезное */
.pl-tools-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.pl-tools-title { font-size: 20px; font-weight: 750; letter-spacing: -0.03em; }
.pl-tools {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 8px;
}
.pl-tool {
  padding: 13px 8px 12px; border-radius: 18px; cursor: pointer; min-width: 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .015) 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: var(--sh-sm);
  transition: border-color .2s, transform .12s var(--ease);
}
.pl-tool:active { transform: scale(.96); border-color: rgba(122, 163, 255, .45); }
.pl-tool-icon {
  width: 38px; height: 38px; border-radius: 12px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.pl-tool-icon.blue { background: rgba(47, 124, 246, .22); }
.pl-tool-icon.violet { background: rgba(140, 92, 255, .24); }
.pl-tool-icon.green { background: rgba(46, 204, 113, .2); }
.pl-tool-icon.amber { background: rgba(245, 166, 35, .2); }
.pl-tool-title {
  font-size: 12px; font-weight: 700; line-height: 1.25; white-space: pre-line;
  margin-bottom: 5px;
}
.pl-tool-text {
  font-size: 10px; line-height: 1.3; color: var(--text-muted); white-space: pre-line;
}

/* Нижняя навигация: стекло, активная вкладка в светящейся плашке, крупный + */
.tabbar {
  background: rgba(8, 11, 18, .72);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-top: 1px solid rgba(122, 163, 255, .14);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, .45);
  padding-left: 8px; padding-right: 8px;
}
.tab {
  border-radius: 16px; margin: 6px 3px; padding: 8px 0 7px;
  font-size: 10.5px; gap: 5px;
  transition: color .2s, background .2s, box-shadow .2s;
}
.tab.on {
  color: var(--accent-soft);
  background: linear-gradient(165deg, rgba(47, 124, 246, .22) 0%, rgba(47, 124, 246, .08) 100%);
  border: 1px solid rgba(122, 163, 255, .28);
  box-shadow: 0 0 22px rgba(47, 124, 246, .28), inset 0 1px 0 rgba(160, 196, 255, .12);
}
.tab.add .tab-icon {
  width: 58px; height: 58px; margin-top: -26px;
  background: linear-gradient(135deg, #4a94ff 0%, #2359d6 100%);
  border: 2px solid rgba(160, 196, 255, .45);
  box-shadow: 0 10px 30px rgba(47, 124, 246, .65), 0 0 0 6px rgba(47, 124, 246, .12),
              inset 0 1px 0 rgba(255, 255, 255, .3);
  font-size: 30px;
}
.tab.add.on { background: none; border: none; box-shadow: none; }

/* Узкие экраны: ничего не обрезается */
@media (max-width: 370px) {
  .pl-title { font-size: 29px; }
  .pl-head-side { width: 124px; height: 138px; }
  .pl-add { padding: 11px 13px; font-size: 13px; }
  .pl-art-logo { width: 92px; height: 92px; }
  .pl-cover { width: 74px; height: 74px; }
  .pl-right { width: 110px; padding-right: 16px; }
  .pl-tools { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Avito: аналитика объявления ---------- */
.av-card {
  position: relative; overflow: hidden;
  border-radius: 24px; padding: 18px 16px 16px; margin-bottom: var(--gap);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(47, 124, 246, .16) 0%, transparent 58%),
    linear-gradient(165deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .015) 100%);
  border: 1px solid rgba(122, 163, 255, .22);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(160, 196, 255, .12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.av-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.av-brand {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--accent-soft);
}
.av-dot-brand {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9cc6ff, #2f7cf6);
  box-shadow: 0 0 10px rgba(47, 124, 246, .8);
}
.av-sub { font-size: 16.5px; font-weight: 750; letter-spacing: -0.025em; margin-top: 4px; }
.av-item {
  font-size: 12px; color: var(--text-dim); margin: -6px 0 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.av-text { font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin-bottom: 14px; }
.av-link { font-size: 12.5px; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.av-link:active { color: var(--accent-soft); }
.av-ok { color: var(--green); }
.av-refresh {
  width: 36px; height: 36px; border-radius: 12px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--accent-soft);
  background: rgba(47, 124, 246, .14); border: 1px solid rgba(122, 163, 255, .24);
}
.av-refresh.busy { opacity: .7; }

/* Метрики: крупные цифры, мало рамок */
.av-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 16px; }
.av-m { padding: 8px 0 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.av-m.none { opacity: .5; }
.av-m-top { display: flex; align-items: baseline; gap: 8px; }
.av-m-icon { font-size: 15px; line-height: 1; }
.av-m-value { font-size: 26px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.1; }
.av-m-label { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }

/* Период + динамика */
.av-period-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.av-periods {
  display: inline-flex; padding: 3px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07);
}
.av-period {
  padding: 6px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  transition: background .2s, color .2s;
}
.av-period.on {
  color: #fff; background: linear-gradient(135deg, #3d8bff, #2359d6);
  box-shadow: 0 4px 14px rgba(47, 124, 246, .45);
}
.av-delta {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 14px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1;
}
.av-delta span { font-size: 10px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
.av-delta.up { color: var(--green); }
.av-delta.down { color: var(--amber); }

/* График */
.av-spark-label { font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }
.av-spark { width: 100%; height: 56px; margin-bottom: 14px; }
.av-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Инсайт */
.av-insight {
  padding: 13px 14px; border-radius: 16px; margin-bottom: 12px;
  background: linear-gradient(160deg, rgba(47, 124, 246, .14) 0%, rgba(47, 124, 246, .04) 100%);
  border: 1px solid rgba(122, 163, 255, .24);
}
.av-insight-head { font-size: 11.5px; font-weight: 750; letter-spacing: .06em; color: var(--accent-soft); margin-bottom: 6px; }
.av-insight-text { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.av-insight-cta {
  margin-top: 9px; font-size: 13.5px; font-weight: 700; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center;
}
.av-insight-cta:active { color: var(--accent-soft); }

.av-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--text-muted); padding-top: 4px;
}
.av-foot .stale { color: var(--amber); }

/* Пустое / ошибка */
.av-empty { text-align: center; padding: 14px 8px 16px; }
.av-empty-icon { font-size: 30px; margin-bottom: 8px; }
.av-empty-title { font-size: 14.5px; font-weight: 700; margin-bottom: 4px; }
.av-empty-text { font-size: 12.5px; color: var(--text-dim); }

/* Skeleton */
.av-sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 14px 0 12px; }
.av-sk { height: 54px; margin: 0; border-radius: 12px; }
.av-sk-line { height: 40px; margin: 0; border-radius: 12px; }

/* Выбор объявления */
.av-pick {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px; margin-bottom: 8px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
}
.av-pick-main { flex: 1; min-width: 0; }
.av-pick-title { font-size: 14px; font-weight: 600; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-pick-meta { font-size: 12px; color: var(--text-dim); }
.av-pick .btn { width: auto; flex-shrink: 0; padding: 9px 14px; }

@media (max-width: 340px) {
  .av-m-value { font-size: 22px; }
  .av-period { padding: 6px 8px; font-size: 11px; }
  .av-period-row { flex-wrap: wrap; }
}

/* ---------- Экран аналитики ---------- */
.an-title { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.an-sub { font-size: 13.5px; color: var(--text-dim); margin-top: 4px; }

.an-status {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 14px; margin-bottom: 14px;
  border-radius: 16px; font-size: 13.5px; font-weight: 600;
  background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border: 1px solid rgba(122, 163, 255, .18);
}
.an-status-left { display: flex; align-items: center; gap: 8px; }
.an-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 10px rgba(46, 204, 113, .8);
}
.an-ok { color: var(--green); }

.an-period-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 16px;
}

/* Метрики */
.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.an-metric {
  position: relative; padding: 16px 14px; border-radius: 20px;
  background:
    radial-gradient(130% 100% at 100% 0%, rgba(47, 124, 246, .16) 0%, transparent 60%),
    linear-gradient(165deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .015) 100%);
  border: 1px solid rgba(122, 163, 255, .18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(160, 196, 255, .1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.an-metric.none { opacity: .55; }
.an-metric-icon { font-size: 17px; margin-bottom: 8px; line-height: 1; }
.an-metric-value { font-size: 27px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; }
.an-metric-label { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.an-metric-delta {
  position: absolute; right: 13px; top: 14px;
  font-size: 12px; font-weight: 750;
}
.an-metric-delta.up { color: var(--green); }
.an-metric-delta.down { color: var(--amber); }

/* График */
.an-chart {
  padding: 16px 14px 12px; border-radius: 20px; margin-bottom: 16px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  border: 1px solid rgba(255, 255, 255, .08);
}
.an-chart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.an-chart-title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; }
.an-chart-note { font-size: 11.5px; color: var(--text-muted); }
.an-chart-empty {
  font-size: 12.5px; color: var(--text-muted); text-align: center; padding: 22px 0;
}

/* Инсайты */
.an-insights {
  padding: 16px 15px; border-radius: 20px; margin-bottom: 20px;
  background: linear-gradient(160deg, rgba(47, 124, 246, .16) 0%, rgba(47, 124, 246, .04) 100%);
  border: 1px solid rgba(122, 163, 255, .26);
}
.an-insights-head {
  font-size: 11.5px; font-weight: 750; letter-spacing: .06em;
  color: var(--accent-soft); margin-bottom: 10px;
}
.an-insight-line {
  font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin-bottom: 8px;
}
.an-insight-cta {
  font-size: 13.5px; font-weight: 700; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; margin-top: 4px;
}

/* Товары в аналитике */
.an-prod, .an-attention {
  display: flex; align-items: center; gap: 12px;
  padding: 11px; margin-bottom: 9px; border-radius: 18px; cursor: pointer;
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  border: 1px solid rgba(255, 255, 255, .07);
  transition: border-color .2s, transform .12s var(--ease);
}
.an-prod:active, .an-attention:active { transform: scale(.99); border-color: rgba(122, 163, 255, .4); }
.an-prod-cover {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(150deg, #1b2434, #10161f);
  border: 1px solid rgba(255, 255, 255, .06);
}
.an-prod-cover.empty { display: flex; align-items: center; justify-content: center; font-size: 22px; opacity: .5; }
.an-prod-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-prod-main { flex: 1; min-width: 0; }
.an-prod-name {
  font-size: 14.5px; font-weight: 650; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-prod-price { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.an-prod-stats { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-dim); }
.an-prod-delta { font-size: 13px; font-weight: 750; flex-shrink: 0; }
.an-prod-delta.up { color: var(--green); }
.an-prod-delta.down { color: var(--amber); }

.an-attention { border-color: rgba(245, 166, 35, .22); }
.an-reason {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--amber); line-height: 1.3;
}
.an-reason-dot {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}

.an-foot {
  text-align: center; font-size: 11.5px; color: var(--text-muted);
  margin: 18px 0 4px;
}
.an-foot-warn { color: var(--amber); margin-top: 6px; }

/* Подключение Avito — на аналитике и на главной */
.an-connect {
  position: relative; overflow: hidden;
  padding: 22px 18px; border-radius: 24px; text-align: center;
  background:
    radial-gradient(120% 110% at 100% 0%, rgba(47, 124, 246, .30) 0%, transparent 58%),
    linear-gradient(160deg, #141f36 0%, #0a0e18 100%);
  border: 1px solid rgba(122, 163, 255, .3);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(160, 196, 255, .16);
}
.an-connect.home { margin-bottom: 22px; text-align: left; cursor: pointer; }
.an-connect-mark {
  font-size: 22px; color: var(--accent-soft); margin-bottom: 8px;
  text-shadow: 0 0 16px rgba(47, 124, 246, .9);
}
.an-connect-title { font-size: 19px; font-weight: 780; letter-spacing: -0.03em; margin-bottom: 6px; }
.an-connect-text { font-size: 13.5px; line-height: 1.45; color: var(--text-2); margin-bottom: 14px; }
.an-connect-icons {
  display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center;
  font-size: 12px; color: var(--text-dim); margin-bottom: 16px;
}
.an-connect.home .an-connect-icons { justify-content: flex-start; }

.an-connect.ok { padding: 16px 16px 14px; }
.an-home-stats {
  display: flex; gap: 14px; margin: 12px 0 10px; flex-wrap: wrap;
}
.an-home-stats > div {
  font-size: 19px; font-weight: 780; letter-spacing: -0.035em;
  display: flex; align-items: baseline; gap: 5px;
}
.an-home-stats span { font-size: 14px; }
.an-home-stats small {
  display: block; font-size: 10.5px; font-weight: 500;
  color: var(--text-dim); letter-spacing: 0;
}
.an-home-cta { font-size: 13.5px; font-weight: 700; color: var(--accent-soft); }

@media (max-width: 340px) {
  .an-metric-value { font-size: 23px; }
  .an-home-stats { gap: 10px; }
  .an-home-stats > div { font-size: 17px; }
}

/* ---------- Разбор конкурента ---------- */
.cm-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07);
}
.cm-tab {
  flex: 1; text-align: center; padding: 9px 4px; border-radius: 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text-dim); white-space: nowrap;
  transition: background .2s, color .2s;
}
.cm-tab.on {
  color: #fff; background: linear-gradient(135deg, #3d8bff, #2359d6);
  box-shadow: 0 4px 14px rgba(47, 124, 246, .45);
}
.cm-hint { font-size: 13px; line-height: 1.45; color: var(--text-2); margin-bottom: 12px; }