/* ═══════════════════════════════════════════════════════════════════════════
   МаркетAI Pro — мобильное приложение.
   Дизайн-система из утверждённых рендеров, в масштабе реального устройства.

   Тёмная тема — основная. Светлая обязана существовать: часть людей работает
   днём на улице, плюс Telegram отдаёт тему пользователя.

   Правило, которое здесь соблюдается буквально: РАЗМЫТИЕ ТОЛЬКО НА ХРОМЕ.
   Панель с числами — плотная поверхность, иначе цифры теряют читаемость.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Накал ниши: значение 0…1 подставляет приложение, из него берётся фон. */
  --heat:.5;

  --ink:#F3F1FF;
  --ink2:rgba(243,241,255,.62);
  --ink3:rgba(243,241,255,.40);
  --pane:rgba(20,14,42,.62);
  --pane2:rgba(255,255,255,.065);
  --line:rgba(255,255,255,.11);
  --chrome:rgba(10,8,22,.55);

  --acc:#B5A8FF;
  --acc-1:#6E5BD8;
  --acc-2:#A93FB0;
  --tg:#2AABEE;

  --good:#3DD68C;
  --warn:#FFB84D;
  --bad:#FF7A72;
  --good-bg:rgba(61,214,140,.15);
  --warn-bg:rgba(255,184,77,.13);
  --bad-bg:rgba(255,122,114,.14);

  --wb:#CB11AB; --oz:#005BFF; --ym:#FF5226;

  --r-lg:22px; --r:18px; --r-sm:13px;
  --tap:44px;

  /* ─── Шкала размеров текста ────────────────────────────────────────────────
     Раньше в приложении жили 22 разных кегля: 13, 13.5, 14, 14.5, 15, 15.5…
     Глазу такая «шкала» читается как небрежность — размеры отличаются, а роли
     у них одинаковые. Теперь ступеней одиннадцать, и у каждой своя работа. */
  --fs-00:10px;   /* прописные микроподписи, оси графика */
  --fs-0:11px;    /* подпись под числом, сноска, единица измерения */
  --fs-1:12px;    /* второстепенный текст, чипы, служебные пометки */
  --fs-2:13px;    /* мелкий абзац, правая пометка в шапке блока */
  --fs-3:14px;    /* основной текст списков */
  --fs-4:15px;    /* заголовок блока, текст кнопки */
  --fs-5:17px;    /* поле ввода, главная кнопка, иконка-глиф */
  --fs-6:19px;    /* число в узкой плитке, заголовок экрана-подробностей */
  --fs-7:22px;    /* число в широкой плитке, заголовок пустого экрана */
  --fs-8:24px;    /* заголовок вкладки */
  --fs-hero:32px; /* главное число разбора — единственное на экране */

  /* ─── Шкала отступов ───────────────────────────────────────────────────────
     Было четырнадцать значений подряд — 1,2,3,4,5,6,7,8,9,10,11,12,13,14.
     Стало восемь ступеней с шагом 4 и двумя половинными для плотных мест. */
  --s-0:2px; --s-1:4px; --s-2:6px; --s-3:8px;
  --s-4:12px; --s-5:16px; --s-6:20px; --s-7:24px;

  --t-fast:.08s; --t:.14s; --t-comp:.2s; --t-sheet:.28s;
  --ease-out:cubic-bezier(.2,.8,.3,1);
  --ease-in:cubic-bezier(.5,0,.85,.3);

  --ui:'Inter',-apple-system,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,system-ui,sans-serif;

  /* В полноэкранном Telegram свои отступы: системная зона (часы, вырез) +
     контентная зона Telegram (плавающая кнопка закрытия). Складываем всё —
     где переменных нет, слагаемые равны нулю и остаётся системный env(). */
  --safe-t:calc(env(safe-area-inset-top,0px)
    + var(--tg-safe-area-inset-top,0px)
    + var(--tg-content-safe-area-inset-top,0px));
  --safe-b:calc(env(safe-area-inset-bottom,0px) + var(--tg-safe-area-inset-bottom,0px));

  --canvas:#0A0816;

  color-scheme:dark;
}

/* Светлая тема = Dropify Light, та же система, что в приложении для
   компьютера: серо-лавандовый канвас, белые карточки, акцент #9588E8,
   Inter, мягкие тени. Утверждено Олегом по концепту 04.08. */
:root[data-theme="light"]{
  --ink:#2B2B31;
  --ink2:#55545F;
  --ink3:#74737E;
  --pane:#FFFFFF;
  --pane2:#F1F0F6;
  --line:#E9E8F1;
  --chrome:rgba(255,255,255,.86);
  --acc:#7A6BDD;
  --acc-1:#6E60D3; --acc-2:#5D4FC0;
  --good:#059669; --warn:#B45309; --bad:#DC2626;
  --good-bg:rgba(5,150,105,.12); --warn-bg:rgba(180,83,9,.13); --bad-bg:rgba(220,38,38,.11);
  --canvas:#ECEBF2;
  color-scheme:light;
}
/* Белые карточки на светлом канвасе держатся тенью, а не только линией. */
:root[data-theme="light"] .p,
:root[data-theme="light"] .kpi{
  box-shadow:0 1px 2px rgba(41,40,56,.05), 0 10px 28px rgba(41,40,56,.07);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Кнопки и поля не наследуют кегль сами — браузер подставляет свои 13,333 px.
   Из-за этого один и тот же класс .row читался 14 px внутри div и 13,33 px
   внутри button: на экране профиля весь список был мельче остальных. */
button,input,select,textarea{font-size:inherit;font-family:inherit}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--ui);
  font-size:var(--fs-5);
  line-height:1.35;
  color:var(--ink);
  /* Цвет самого полотна тоже зависит от темы: в светлой он вылезал чернотой
     при «резиновой» прокрутке на iOS, потому что был задан жёстко. */
  background:var(--canvas,#0A0816);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

/* Фон приложения. Холодное индиго → фиолетовый → горячая магента.
   Цвет говорит о содержимом: чем плотнее ниша, тем горячее полотно. */
#bg{
  position:fixed;inset:0;z-index:-1;transition:opacity .6s var(--ease-out);
  background:
    radial-gradient(120% 76% at 50% -8%,
      color-mix(in srgb, #22306E calc((1 - var(--heat)) * 100%), #6A2470) 0%,
      transparent 62%),
    radial-gradient(92% 54% at 86% 5%,
      color-mix(in srgb, rgba(61,214,140,.16) calc((1 - var(--heat)) * 100%), rgba(224,90,110,.32)) 0%,
      transparent 58%),
    linear-gradient(180deg,
      color-mix(in srgb, #121A33 calc((1 - var(--heat)) * 100%), #25123A) 0%,
      color-mix(in srgb, #0C0F20 calc((1 - var(--heat)) * 100%), #140B22) 46%,
      #0A0816 100%);
}
/* Dropify: ровный серо-лавандовый канвас. Накал ниши остаётся, но шёпотом —
   еле заметная тёплая дымка сверху, а не пастельная заря на пол-экрана. */
:root[data-theme="light"] #bg{
  background:
    radial-gradient(110% 46% at 50% -12%,
      color-mix(in srgb, rgba(149,136,232,.14) calc((1 - var(--heat)) * 100%), rgba(224,90,110,.14)) 0%,
      transparent 58%),
    linear-gradient(180deg,#F0EFF6 0%,#ECEBF2 60%,#E7E6EF 100%);
}
@media (prefers-reduced-motion:reduce){ #bg{transition:none} }

/* ─── Оболочка ────────────────────────────────────────────────────────────── */

/* Колонка приложения. Всё наложенное — шиты, подсказки, тосты — живёт ВНУТРИ неё,
   иначе на широком окне они растягиваются во всю ширину и выглядят сломанными. */
#app{
  position:fixed;inset:0;display:flex;flex-direction:column;
  max-width:520px;margin:0 auto;
  box-shadow:0 0 0 1px var(--line);
}
@media (max-width:560px){ #app{max-width:none;box-shadow:none} }

.hdr{
  /* Боковой отступ шапки был 18 px против 16 px у ленты контента: заголовок
     экрана стоял на два пикселя правее всех карточек под ним. Теперь одна линия. */
  flex:none;padding:calc(var(--safe-t) + var(--s-4)) var(--s-5) var(--s-3);
  display:flex;align-items:center;gap:var(--s-4);
}
.hdr h1{margin:0;font-size:var(--fs-8);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.hdr h1.sm{font-size:var(--fs-6);letter-spacing:-.02em;display:flex;align-items:center;gap:var(--s-3);min-width:0}
.hdr h1.sm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr .rgt{margin-left:auto;display:flex;gap:var(--s-3);flex:none}

.ib{
  width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line);
  background:var(--pane2);color:var(--ink2);font-size:var(--fs-5);
  display:flex;align-items:center;justify-content:center;flex:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform var(--t) var(--ease-out),background var(--t);
}
.ib:active{transform:scale(.94)}

main{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:0 var(--s-5) var(--s-4);
  display:flex;flex-direction:column;gap:var(--s-4);
  -webkit-overflow-scrolling:touch;
}

/* Полоса главного действия — всегда доступна, над таббаром */
.actbar{
  flex:none;padding:var(--s-4) var(--s-5);display:flex;gap:var(--s-3);
  background:linear-gradient(180deg,transparent,var(--chrome) 45%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.actbar:empty{display:none}

/* Таббар */
.tabs{
  flex:none;display:flex;align-items:center;
  padding:var(--s-3) var(--s-3) calc(var(--safe-b) + var(--s-4));
  background:var(--chrome);border-top:1px solid var(--line);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.tab{
  flex:1;min-height:var(--tap);border:0;background:none;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);
  color:var(--ink3);font-size:var(--fs-0);font-weight:600;padding:0;cursor:pointer;
  transition:color var(--t);
}
.tab .ic{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-6);line-height:1;transition:transform var(--t) var(--ease-out);
}
.tab:active .ic{transform:scale(.9)}
/* Капсула-подсветка — у ОТКРЫТОЙ вкладки: человек всегда видит, где он. */
.tab.on{color:var(--acc)}
.tab.on .ic{
  background:linear-gradient(100deg,var(--acc-1),var(--acc-2));color:#fff;
  border-radius:12px;
  box-shadow:0 5px 16px color-mix(in srgb,var(--acc-2) 45%,transparent);
}
/* Профиль — контурный силуэт вместо смайлика: голова и плечи из CSS. */
.ic-user{position:relative}
.ic-user::before{
  content:"";width:8px;height:8px;border-radius:50%;
  border:1.8px solid currentColor;
  position:absolute;left:50%;top:4px;transform:translateX(-50%);
}
.ic-user::after{
  content:"";width:15px;height:8px;
  border:1.8px solid currentColor;border-bottom:0;
  border-radius:8px 8px 0 0;
  position:absolute;left:50%;bottom:5px;transform:translateX(-50%);
}

/* ─── Панель с данными: плотная, без размытия ─────────────────────────────── */

.p{background:var(--pane);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-5)}
.p.tight{padding:var(--s-4)}
/* Шапка блока держит постоянную высоту. Раньше она была 20 px без правой
   пометки и 32 px с ней — соседние панели начинались на разной высоте, и
   вертикальный ритм экрана рассыпался. */
.ph{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);min-height:28px}
.ph b{font-size:var(--fs-4);font-weight:640;letter-spacing:-.01em;line-height:1.25}
.ph .more{margin-left:auto;font-size:var(--fs-2);color:var(--acc);font-weight:620;
  line-height:1.25;display:flex;align-items:center;flex:none;
  /* Пометка справа — короткая по смыслу. Если она длинная, обрезаем её,
     а не заголовок: заголовок отвечает на вопрос «что это за блок». */
  max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbl{font-size:var(--fs-0);font-weight:680;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:var(--s-3)}

/* ─── Поиск ───────────────────────────────────────────────────────────────── */

.srch{
  display:flex;align-items:center;gap:var(--s-4);flex:none;
  background:var(--pane2);border:1px solid var(--line);border-radius:16px;
  padding:0 var(--s-5);min-height:52px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.srch .m{color:var(--ink3);font-size:var(--fs-5);flex:none}
.srch input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:inherit;font-size:var(--fs-5);color:var(--ink);padding:var(--s-5) 0;
}
.srch input::placeholder{color:var(--ink3)}
.srch .clr{color:var(--ink3);font-size:var(--fs-4);padding:var(--s-3);margin:-8px}

/* Подсказки из собственной истории: живых подсказок площадки в открытом
   контуре нет, а прошлые запросы пользователя — есть и стоят ноль запросов. */
.srchwrap{flex:none;display:flex;flex-direction:column;gap:var(--s-3)}
.hints{display:flex;flex-direction:column;gap:var(--s-0)}
.hint{display:flex;align-items:center;gap:var(--s-4);min-height:42px;padding:0 var(--s-5);cursor:pointer;
  background:var(--pane2);border:1px solid var(--line);border-radius:12px;
  font-family:inherit;color:var(--ink);text-align:left}
.hint .hq{flex:1;font-size:var(--fs-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hint .hm{font-size:var(--fs-0);color:var(--ink3);flex:none}

/* ─── Главное число ───────────────────────────────────────────────────────── */

.hero{text-align:center;padding:var(--s-2) 0 var(--s-0)}
.hero .meta{
  display:flex;justify-content:center;gap:var(--s-3);align-items:center;flex-wrap:wrap;
  font-size:var(--fs-2);color:var(--ink2);margin-bottom:var(--s-4);font-variant-numeric:tabular-nums;
}
.hero .meta i{font-style:normal;opacity:.4}
.hero .big{
  display:block;font-size:var(--fs-hero);font-weight:700;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,var(--ink) 32%,var(--acc));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .big small{font-size:var(--fs-5);font-weight:600;letter-spacing:0;-webkit-text-fill-color:var(--ink2)}
.hero .state{font-size:var(--fs-6);font-weight:660;margin-top:var(--s-4);letter-spacing:-.02em}
.hero .sub{font-size:var(--fs-2);color:var(--ink2);margin-top:var(--s-1)}
.hero .sub b{font-weight:650}
.hero .sub b.up{color:var(--good)} .hero .sub b.dn{color:var(--bad)}

.verdict{font-size:var(--fs-4);line-height:1.45;margin:0}
.verdict b{font-weight:640}

/* ─── График с подписями в точках ─────────────────────────────────────────── */

.chart{position:relative;height:104px;margin-top:var(--s-4)}
.chart svg{width:100%;height:100%;display:block;overflow:visible}
.tip{position:absolute;font-size:var(--fs-1);font-weight:640;color:var(--ink2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tip.now{color:var(--ink);background:var(--pane);border:1px solid var(--line);
  padding:var(--s-1) var(--s-3);border-radius:9px}

/* ─── Сегменты ────────────────────────────────────────────────────────────── */

.seg{display:flex;background:var(--pane2);border:1px solid var(--line);
  border-radius:13px;padding:var(--s-1);gap:var(--s-0)}
.seg button{
  flex:1;min-height:36px;border:0;background:none;font-family:inherit;
  font-size:var(--fs-3);font-weight:620;color:var(--ink2);border-radius:10px;cursor:pointer;
  transition:background var(--t),color var(--t);
}
.seg button[aria-pressed="true"]{background:var(--pane);color:var(--ink);border:1px solid var(--line)}

/* ─── Метрики ─────────────────────────────────────────────────────────────── */

.mrow{display:flex;gap:var(--s-3);align-items:stretch}
.mc{flex:1;min-width:0;background:var(--pane);border:1px solid var(--line);
  border-radius:16px;padding:var(--s-4);text-align:left;
  display:flex;flex-direction:column;font-family:inherit;color:inherit;font-size:var(--fs-3)}
/* Слот значения фиксированной высоты: с ним подписи всех трёх плиток стоят на
   одной линии независимо от того, что внутри — число, прочерк или предложение
   загрузить. Раньше плитки различались и ряд выглядел кривым. */
.mc b{display:block;font-size:var(--fs-6);font-weight:680;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;line-height:1.15;min-height:calc(var(--fs-6) * 1.15);
  display:flex;align-items:baseline}
/* Подпись переносится на вторую строку вместо обрезки многоточием:
   «рейтинг не загружен» в 82 px не помещался и читался как «рейтинг не загр…». */
.mc span{font-size:var(--fs-0);color:var(--ink2);margin-top:var(--s-1);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Значение не загружено. Это не «нет данных» и не ноль — это «мы ещё не
   спрашивали». Плитка честно говорит об этом и сама предлагает спросить. */
.mc.unk{border-style:dashed;cursor:pointer}
.mc.unk b{display:block;font-size:var(--fs-2);font-weight:640;color:var(--acc);
  letter-spacing:0;line-height:1.2;white-space:normal}
.mc.unk.off{cursor:default}
.mc.unk.off b{color:var(--ink3);font-weight:600}
.mc.unk:active{transform:scale(.98)}
.mc.unk[disabled]{opacity:.7}

/* ─── Строки товаров ──────────────────────────────────────────────────────── */

.rows{display:flex;flex-direction:column}
/* Просвет между колонками строки — 8 px, а не 12: на 375 точках лишние
   восемь пикселей решали, поместится ли подпись в одну строку. «Помощник на
   компьютере» требовал 180 px при 178 доступных и уезжал на второй ряд. */
.row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) 0;border-top:1px solid var(--line);
  min-height:var(--tap);text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;
  font-family:inherit;color:inherit;width:100%;cursor:pointer;font-size:var(--fs-3)}
.row:first-child{border-top:0}
.row:active{opacity:.6}
.thumb{width:46px;height:60px;border-radius:11px;flex:none;overflow:hidden;position:relative;
  background:linear-gradient(150deg,rgba(181,168,255,.28),rgba(228,90,201,.14));
  border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.row .t{min-width:0;flex:1}
.row .t b{font-size:var(--fs-3);font-weight:600;line-height:1.3;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .t span{display:block;color:var(--ink3);font-size:var(--fs-1);margin-top:var(--s-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .r{margin-left:auto;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.row .r b{display:block;font-size:var(--fs-4);font-weight:670;letter-spacing:-.012em}
.row .r span{font-size:var(--fs-0);color:var(--ink3)}

/* ─── Пилюли ──────────────────────────────────────────────────────────────── */

.pill{display:inline-flex;align-items:center;gap:var(--s-2);border-radius:999px;
  padding:var(--s-1) var(--s-4);font-size:var(--fs-1);font-weight:650;line-height:1.35;white-space:nowrap}
.pill.ok{background:var(--good-bg);color:var(--good)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.ai{background:rgba(181,168,255,.18);color:var(--acc)}
.pill.mut{background:var(--pane2);color:var(--ink2);border:1px solid var(--line)}

/* ─── Кнопки ──────────────────────────────────────────────────────────────── */

.btn{
  flex:1;min-height:52px;border:0;border-radius:16px;font-family:inherit;
  font-size:var(--fs-5);font-weight:660;letter-spacing:-.01em;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:var(--s-3);
  background:linear-gradient(100deg,var(--acc-1),var(--acc-2));
  box-shadow:0 6px 20px color-mix(in srgb,var(--acc-2) 34%,transparent);
  transition:transform var(--t-fast) var(--ease-out),opacity var(--t);
  touch-action:manipulation;
  /* Подпись держим в одну строку. Двухстрочные кнопки росли до 68 px, съезжали
     по базовой линии и выглядели неаккуратно рядом друг с другом. */
  padding:0 var(--s-5);line-height:1.15;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* В нижней полосе кнопки всегда одной высоты и одного размера шрифта:
   именно там стояли рядом «Узнать рейтинги брендов» и «Собрать бренды всей выдачи». */
/* Высота кнопки в нижней полосе задана жёстко, поэтому подпись можно переносить
   на вторую строку, не ломая ряд. Раньше стоял запрет переноса и обрезка
   многоточием: «Открыть на Wildberries» и «Перепроверить нишу» теряли хвост
   (нужно 170 px, в кнопку помещалось 147). Теперь текст переносится по центру. */
.actbar .btn{height:52px;min-height:52px;font-size:var(--fs-3);flex:1 1 0;min-width:0;
  white-space:normal;text-overflow:clip;line-height:1.2;padding:0 var(--s-3)}
.actbar .btn.sm{height:46px;min-height:46px;font-size:var(--fs-2)}
@media (max-width:390px){ .actbar .btn{padding:0 var(--s-2)} }
.btn:active{transform:scale(.975)}
.btn[disabled]{opacity:.45;box-shadow:none}
.btn.ghost{background:var(--pane2);color:var(--ink);border:1px solid var(--line);box-shadow:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn.tg{background:linear-gradient(100deg,#2AABEE,#229ED9);
  box-shadow:0 6px 20px rgba(42,171,238,.3)}
.btn.sm{min-height:44px;font-size:var(--fs-4);border-radius:13px}

/* ─── Шаги выполнения ─────────────────────────────────────────────────────── */

.steps{display:flex;flex-direction:column}
.step{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-3) 0}
.step .mk{width:22px;height:22px;border-radius:50%;flex:none;margin-top:var(--s-0);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-1);font-weight:700;
  border:1.5px solid var(--line);color:var(--ink3)}
.step.done .mk{background:var(--good);border-color:var(--good);color:#08160F}
.step.now .mk{border-color:var(--acc);color:var(--acc);box-shadow:0 0 0 4px rgba(181,168,255,.15)}
.step.wait{opacity:.4}
.step .x b{display:block;font-size:var(--fs-4);font-weight:610}
.step .x span{display:block;font-size:var(--fs-2);color:var(--ink3);margin-top:var(--s-0);
  font-variant-numeric:tabular-nums}
.meter{height:6px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:var(--s-3)}
:root[data-theme="light"] .meter{background:rgba(20,16,33,.08)}
.meter i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--acc-1),var(--acc-2));
  transition:width .3s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.meter i{transition:none}}

/* ─── Честная плашка ──────────────────────────────────────────────────────── */

.honest{display:flex;gap:var(--s-4);align-items:flex-start;background:var(--warn-bg);
  border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);
  border-radius:var(--r-sm);padding:var(--s-4)}
.honest .i{color:var(--warn);font-size:var(--fs-4);flex:none;line-height:1.25}
.honest p{margin:0;font-size:var(--fs-2);line-height:1.45;color:var(--ink2)}
.honest p b{color:var(--ink);font-weight:640}

/* ─── Состояния: пусто / отказ / мало данных ──────────────────────────────── */

.state-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:var(--s-5);padding:var(--s-7) var(--s-7)}
.state-screen .glyph{width:72px;height:72px;border-radius:24px;display:flex;align-items:center;
  justify-content:center;font-size:var(--fs-8);background:var(--pane);border:1px solid var(--line)}
.state-screen h2{font-size:var(--fs-7);font-weight:680;letter-spacing:-.02em;margin:0}
.state-screen p{margin:0;font-size:var(--fs-4);line-height:1.5;color:var(--ink2);max-width:34ch}

/* ─── Обучающая подсказка ─────────────────────────────────────────────────── */

/* Затемнение под меню. Раньше оно было почти чёрным, и на телефоне открытие
   любого шита читалось как «экран погас». Достаточно лёгкой вуали с размытием:
   подложка остаётся узнаваемой, а внимание всё равно уходит на меню. */
.scrim{position:absolute;inset:0;background:rgba(6,4,16,.42);z-index:40;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:fade var(--t-comp) var(--ease-out)}
:root[data-theme="light"] .scrim{background:rgba(20,16,33,.22)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Подсказки обучения жили в жёстко заданных тёмных цветах и в светлой теме
   оставались чёрными пятнами. Теперь цвета берутся из темы, как у всего остального. */
.coach{position:absolute;left:16px;right:16px;z-index:41;
  --coach-bg:#241C48; --coach-ink:#F3F1FF; --coach-line:rgba(255,255,255,.14);
  background:linear-gradient(150deg,#2A2050,#1A1436);
  border:1px solid var(--coach-line);color:var(--coach-ink);
  border-radius:var(--r-lg);padding:var(--s-5);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:pop var(--t-comp) var(--ease-out)}
:root[data-theme="light"] .coach{
  --coach-bg:#FFFFFF; --coach-ink:#141021; --coach-line:rgba(20,16,33,.12);
  background:linear-gradient(150deg,#FFFFFF,#F6F3FE);
  box-shadow:0 22px 50px rgba(40,30,90,.18)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.coach::after{content:"";position:absolute;top:-8px;left:var(--ax,42px);width:16px;height:16px;
  background:var(--coach-bg);border-left:1px solid var(--coach-line);
  border-top:1px solid var(--coach-line);transform:rotate(45deg);border-radius:3px}
:root[data-theme="dark"] .coach::after{background:#2A2050}
.coach b{display:block;font-size:var(--fs-4);font-weight:660;margin-bottom:var(--s-2)}
.coach p{margin:0;font-size:var(--fs-2);line-height:1.45;color:color-mix(in srgb,var(--coach-ink) 70%,transparent)}
.coach .cx{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-5)}
.coach .dots{display:flex;gap:var(--s-2);margin-right:auto}
.coach .dots i{width:6px;height:6px;border-radius:50%;
  background:color-mix(in srgb,var(--coach-ink) 26%,transparent)}
.coach .dots i.on{background:var(--coach-ink)}
.coach button{border:0;font-family:inherit;font-size:var(--fs-3);font-weight:650;cursor:pointer;
  min-height:40px;padding:0 var(--s-5);border-radius:11px}
.coach .skip{background:none;color:color-mix(in srgb,var(--coach-ink) 58%,transparent);padding:0 var(--s-3)}
.coach .next{background:var(--coach-ink);color:var(--coach-bg)}

/* ─── Нижний шит ──────────────────────────────────────────────────────────── */

.sheet-wrap{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:flex-end}
/* Шит обязан быть ПОЗИЦИОНИРОВАННЫМ и лежать выше затемнения. Без этого он
   остаётся обычным блоком в потоке, а затемнение рядом — позиционированное с
   z-index:40, и по правилам отрисовки оно ложится ПОВЕРХ шита: содержимое
   уходит под вуаль с размытием, а любой тап по полю попадает в затемнение и
   закрывает окно. Так ломались сразу все шиты приложения. */
.sheet{
  position:relative;z-index:41;
  background:linear-gradient(180deg,rgba(38,28,66,.98),rgba(18,13,34,.99));
  border-top:1px solid rgba(255,255,255,.13);
  border-radius:26px 26px 0 0;padding:var(--s-4) var(--s-5) calc(var(--safe-b) + var(--s-6));
  display:flex;flex-direction:column;gap:var(--s-4);
  max-height:86vh;overflow-y:auto;
  box-shadow:0 -18px 55px rgba(0,0,0,.55);
  animation:up var(--t-sheet) var(--ease-out);
}
:root[data-theme="light"] .sheet{background:linear-gradient(180deg,#FFFFFF,#F7F5FD)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .sheet,.coach,.scrim{animation:none}
}
.grab{width:40px;height:5px;border-radius:99px;background:var(--line);margin:0 auto 6px;flex:none}
.sheet h2{font-size:var(--fs-6);font-weight:680;letter-spacing:-.02em;margin:0}
.sheet p{margin:0;font-size:var(--fs-4);line-height:1.45;color:var(--ink2)}
.opt{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border:1px solid var(--line);
  border-radius:15px;min-height:var(--tap);background:none;font-family:inherit;
  color:inherit;text-align:left;width:100%;cursor:pointer}
.opt.sel{border-color:color-mix(in srgb,var(--tg) 60%,transparent);background:rgba(42,171,238,.12)}
.opt b{font-size:var(--fs-4);font-weight:640;display:block}
.opt span{font-size:var(--fs-2);color:var(--ink3)}
.opt .ck{margin-left:auto;color:var(--tg);font-size:var(--fs-4)}

/* Внутри шита масштаб мельче, чем на главном экране: шит — это разговор в сторону,
   а не второй экран. Раньше здесь стояли те же 52-пиксельные кнопки и крупные
   заголовки, из-за чего меню выглядели тяжелее содержимого. */
.sheet{gap:var(--s-4)}
.sheet p{font-size:var(--fs-3)}
.sheet .btn{min-height:48px;font-size:var(--fs-4);border-radius:14px}
.sheet .btn.sm{min-height:42px;font-size:var(--fs-3)}
.sheet .p{padding:var(--s-4)}
.sheet .p.tight{padding:var(--s-4)}
.sheet .chip{min-height:34px;font-size:var(--fs-2)}
.sheet .lbl{margin-bottom:var(--s-3)}
.sheet .fin{min-height:44px;font-size:var(--fs-4)}
.sheet .opt{padding:var(--s-4)}
.sheet .opt b{font-size:var(--fs-3)}

/* ─── Тост ────────────────────────────────────────────────────────────────── */

.toast{position:absolute;left:16px;right:16px;bottom:calc(var(--safe-b) + 92px);z-index:60;
  background:var(--pane);border:1px solid var(--line);border-radius:15px;padding:var(--s-5) var(--s-5);
  font-size:var(--fs-4);box-shadow:0 14px 40px rgba(0,0,0,.4);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  animation:up var(--t-comp) var(--ease-out);display:flex;align-items:center;gap:var(--s-4)}
.toast.ok{border-color:color-mix(in srgb,var(--good) 40%,transparent)}
.toast.bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent)}

/* ─── Скелетон ────────────────────────────────────────────────────────────── */

.sk{background:linear-gradient(100deg,var(--pane2) 30%,rgba(255,255,255,.13) 50%,var(--pane2) 70%);
  background-size:220% 100%;border-radius:9px;animation:sh 1.2s linear infinite}
@keyframes sh{from{background-position:150% 0}to{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* ─── Знаки площадок: официальные марки из кода проекта ───────────────────── */

.mk{width:22px;height:22px;border-radius:6px;flex:none;display:inline-block;
  background-size:100% 100%;background-repeat:no-repeat;vertical-align:-5px}
.mk.s{width:16px;height:16px;border-radius:4px;vertical-align:-3px}
.mk.l{width:28px;height:28px;border-radius:8px;vertical-align:-7px}
.mk.wb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='24' y1='0' x2='0' y2='24' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F023C7'/%3E%3Cstop offset='1' stop-color='%237B23F3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='24' height='24' rx='5.5' fill='url(%23g)'/%3E%3Ctext x='12' y='16.6' font-family='Arial,Helvetica,sans-serif' font-size='11.5' font-weight='700' fill='%23fff' text-anchor='middle' letter-spacing='-0.4'%3EWB%3C/text%3E%3C/svg%3E")}
.mk.oz{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='5.5' fill='%23005BFF'/%3E%3Cg transform='translate(4.6 4.6) scale(0.1305)'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M58.18.289a52.956 52.956 0 1 0 47.134 47.28A52.89 52.89 0 0 0 58.18.289zm-1.716 80.689A28.247 28.247 0 1 1 80.716 56.65a28.236 28.236 0 0 1-24.252 24.328z'/%3E%3C/g%3E%3C/svg%3E")}
.mk.ym{border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='15' cy='15' r='15'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='15' cy='15' r='15' fill='%23FF5226'/%3E%3Cg clip-path='url(%23c)'%3E%3Cg transform='translate(-32.555 0)'%3E%3Cpath d='M45.232 2.03L28.498 28.14h7.671l9.667-15.05-.236-.107-2.68 10.77 5.674 1 5.832-7.33-.316-.157-1.97 8.326 12.363-2.356-2.522-4.154-4.456 1.02.526.605 2.075-8.695-4.834-3.232-6.33 7.96.315.158 2.6-10.43-6.645-4.438z' fill='%23FD0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.mk.tg{border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%232AABEE'/%3E%3Cpath d='M5.2 11.7l11-4.25c.51-.19.96.12.79.9l-1.87 8.82c-.14.65-.53.81-1.07.5l-2.96-2.18-1.43 1.38c-.16.16-.29.29-.59.29l.21-3.01 5.48-4.95c.24-.21-.05-.33-.37-.12l-6.77 4.26-2.92-.91c-.63-.2-.65-.63.13-.93z' fill='%23fff'/%3E%3C/svg%3E")}

/* ─── Мелочи ──────────────────────────────────────────────────────────────── */

.num{font-variant-numeric:tabular-nums}
.hide{display:none !important}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}
::-webkit-scrollbar{width:0;height:0}

/* ═══════════════════════════════════════════════════════════════════════════
   ВИДЫ ОТОБРАЖЕНИЯ СПИСКА. В десктопе это есть, на мобильном тоже должно быть:
   строка — когда важна цена и продавец, плитка — когда важно фото,
   крупный — когда выбираешь визуал для своей карточки.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Панель над списком. На узком экране заголовок занимает свою строку, а
   управление уходит на вторую: иначе «Фильтры», «Выбрать» и переключатель
   видов не помещаются в 375 точек и вылезают за край. */
.viewbar{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);flex-wrap:wrap}
.viewbar > div:first-child{flex:1 1 100%;min-width:0}
.viewbar .vt{display:flex;background:var(--pane2);border:1px solid var(--line);
  border-radius:11px;padding:var(--s-1);gap:var(--s-0);margin-left:auto;flex:none}
.viewbar .vt button{min-width:38px;min-height:32px;border:0;background:none;font-family:inherit;
  font-size:var(--fs-3);color:var(--ink3);border-radius:8px;cursor:pointer}
.viewbar .vt button[aria-pressed="true"]{background:var(--pane);color:var(--ink);border:1px solid var(--line)}
.viewbar .flt{display:inline-flex;align-items:center;gap:var(--s-2);min-height:36px;padding:0 var(--s-4);
  border-radius:11px;border:1px solid var(--line);background:var(--pane2);color:var(--ink);
  font-family:inherit;font-size:var(--fs-2);font-weight:620;cursor:pointer}
.viewbar .flt.on{border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  background:rgba(181,168,255,.16);color:var(--acc)}
.viewbar .flt .n{background:var(--acc);color:#17151F;border-radius:999px;
  min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-0);font-weight:700}

/* Лента активных фильтров: снять один — тапом по крестику, не открывая шит */
.fchips{display:flex;gap:var(--s-3);overflow-x:auto;padding-bottom:9px;margin-bottom:var(--s-0);
  scrollbar-width:none}
.fchips::-webkit-scrollbar{display:none}
.fchip{flex:none;min-height:32px;padding:0 var(--s-4);border-radius:9px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
  background:rgba(181,168,255,.16);color:var(--acc);
  font-family:inherit;font-size:var(--fs-1);font-weight:620;
  display:inline-flex;align-items:center;gap:var(--s-2);white-space:nowrap}
.fchip i{font-style:normal;font-size:var(--fs-0);opacity:.75}
.fchip.clr{background:var(--pane2);border-color:var(--line);color:var(--ink3);font-weight:560}

/* Пропавшее фото — тоже факт о карточке: показываем плитку, а не пустоту */
.thumb.nophoto{background:var(--pane2);position:relative}
.thumb.nophoto::after{content:"нет фото";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:var(--fs-0);color:var(--ink3);
  text-align:center;padding:var(--s-2);line-height:1.3}

.rate{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--fs-1);color:var(--ink2);
  font-variant-numeric:tabular-nums}
.rate i{color:#FFC24D;font-style:normal}
.rate .rv{color:var(--ink3);font-size:var(--fs-0)}
.sbit{display:inline-block;font-size:var(--fs-0);color:var(--good);font-weight:620;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sbit.off{color:var(--ink3);font-weight:500}

/* ─── Вид «строками»: плотный просмотр длинной выдачи ─────────────────────── */

.cards.list{display:flex;flex-direction:column}
.cards.list .thumb{width:56px;height:74px}
.cards.list .row .t .ln{display:block;margin-top:var(--s-1)}
.cards.list .row .r span{white-space:nowrap}

/* ─── Вид «плиткой»: витрина, как ждёт покупатель маркетплейса ────────────── */

.cards.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.cards.grid .row,.cards.big .row{
  position:relative;flex-direction:column;align-items:stretch;gap:0;padding:0;border-top:0;
  background:var(--pane);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cards.grid .thumb,.cards.big .thumb{
  width:100%;height:auto;aspect-ratio:3/4;border-radius:0;border:0}
@supports not (aspect-ratio:3/4){
  .cards.grid .thumb{height:206px}
  .cards.big .thumb{height:390px}
}
.cards.grid .t,.cards.big .t{padding:var(--s-4) var(--s-4) 0;display:block}
.cards.grid .t b{font-size:var(--fs-2);-webkit-line-clamp:2}
.cards.grid .r,.cards.big .r{margin:0;padding:var(--s-3) var(--s-4) var(--s-4);text-align:left;
  display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.cards.grid .r b{display:inline;font-size:var(--fs-4)}
.cards.big .r b{display:inline;font-size:var(--fs-6)}

.bnd{display:block;font-size:var(--fs-00);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:var(--s-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnd .pos{float:right;color:var(--acc);letter-spacing:0;font-variant-numeric:tabular-nums}
.pbadge{position:absolute;top:9px;right:9px;background:rgba(10,8,22,.62);color:#fff;
  border-radius:8px;padding:var(--s-1) var(--s-3);font-size:var(--fs-00);font-weight:640;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ─── Вид «крупно»: вдумчивое сравнение верхушки ──────────────────────────── */

.cards.big{display:flex;flex-direction:column;gap:var(--s-5)}
.cards.big .t b{-webkit-line-clamp:3;font-size:var(--fs-4)}
.dlt{font-size:var(--fs-0);font-weight:620}
.dlt.up{color:var(--warn)} .dlt.dn{color:var(--good)} .dlt.eq{color:var(--ink3)}
.cards.big .foot{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  padding:0 var(--s-4) var(--s-4);font-size:var(--fs-0);color:var(--ink3)}
.cards.big .foot .sl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52%}
.cards.big .foot .tag{background:var(--pane2);border:1px solid var(--line);
  border-radius:7px;padding:var(--s-0) var(--s-3);color:var(--ink2)}

/* ═══ КАРТОЧКА ТОВАРА — полноценный экран внутри приложения ═══ */

.gal{position:relative;margin:0 -16px;flex:none}
.gal .strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;
  scrollbar-width:none}
.gal .strip::-webkit-scrollbar{display:none}
.gal .strip img{width:100%;flex:none;scroll-snap-align:center;height:360px;object-fit:contain;
  background:var(--pane2)}
.gal .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:var(--s-1)}
.gal .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.34)}
.gal .dots i.on{background:#fff}
.gal .badge{position:absolute;top:12px;right:12px}

/* Хлебные крошки карточки: бренд — переход, категория — подпись */
.crumbs{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-3)}
.crumbs .lnk{border:0;background:rgba(181,168,255,.16);color:var(--acc);font-family:inherit;
  font-size:var(--fs-1);font-weight:640;border-radius:8px;padding:var(--s-1) var(--s-4);cursor:pointer;
  min-height:30px}
.crumbs .cr{font-size:var(--fs-1);color:var(--ink3)}

/* Пояснения под данными: не украшение, а несущий текст о полноте данных */
/* ─── Пояснения и сноски ──────────────────────────────────────────────────
   Длина строки. На 375 точках абзац в 12 px растягивался на 48 знаков — глаз
   на такой строке теряет начало следующей. Кегль поднят на ступень (13 px),
   мера набора ограничена сорока знаками: строка стала короче и крупнее. */
.nodata,.note{margin:var(--s-3) 0 0;font-size:var(--fs-2);line-height:1.45;color:var(--ink3)}
.note.warn{color:var(--warn)}
.nodata,.note,.verdict,.honest p,.desc{max-width:40ch}

/* Спарклайн истории цены */
.spark{height:70px;margin:2px 0 8px}
.spark svg{width:100%;height:100%;display:block;overflow:visible}
.pmm{display:flex;gap:var(--s-3)}
.pmm span{flex:1;font-size:var(--fs-0);color:var(--ink3);display:flex;flex-direction:column;gap:var(--s-0)}
.pmm b{font-size:var(--fs-3);font-weight:660;color:var(--ink);font-variant-numeric:tabular-nums}

/* Лента вариантов цвета: в карточке это просто список артикулов */
.vstrip{display:flex;gap:var(--s-3);overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.vstrip::-webkit-scrollbar{display:none}
.vth{flex:none;width:52px;height:68px;border-radius:11px;overflow:hidden;padding:0;cursor:pointer;
  border:1px solid var(--line);background:var(--pane2)}
.vth img{width:100%;height:100%;object-fit:cover;display:block}
.vth.on{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 40%,transparent)}

.chars{display:flex;flex-direction:column}
.chgroup{border-top:1px solid var(--line)}
.chgroup:first-child{border-top:0}
.chgroup .gname{width:100%;display:flex;align-items:center;gap:var(--s-3);
  font-size:var(--fs-0);font-weight:680;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);background:none;border:0;font-family:inherit;cursor:pointer;
  padding:var(--s-4) 0;text-align:left}
.chgroup .gname i{margin-left:auto;font-style:normal;letter-spacing:0;font-size:var(--fs-0);
  background:var(--pane2);border-radius:99px;padding:var(--s-0) var(--s-3);color:var(--ink3)}
.chgroup .gname::after{content:"⌄";margin-left:6px;font-size:var(--fs-2);transition:transform var(--t)}
.chgroup.open .gname::after{transform:rotate(180deg)}
.chgroup .gbody{display:none;padding-bottom:10px}
.chgroup.open .gbody{display:block}

.ch{display:flex;gap:var(--s-4);padding:var(--s-1) 0;font-size:var(--fs-3);align-items:baseline;
  width:100%;text-align:left;background:none;border:0;font-family:inherit;color:inherit}
/* Имя характеристики раньше стояло flex:none и упиралось в max-width — текст
   длиннее половины строки («Описание длиннее 1000 знаков») просто вылезал
   поверх значения. Теперь оно переносится по словам внутри своей половины. */
.ch .k{color:var(--ink2);flex:0 1 auto;max-width:52%;overflow-wrap:anywhere}
/* Значение переносится по словам: длинная характеристика («Материал: сталь
   нержавеющая пищевая 304 с двойными стенками») иначе выпирала за правый край. */
.ch .v{margin-left:auto;text-align:right;font-weight:560;display:inline-flex;
  align-items:center;gap:var(--s-2);justify-content:flex-end;
  flex:1;min-width:0;overflow-wrap:anywhere}
.ch.cp{cursor:pointer;min-height:38px}
.ch.cp .v i{font-style:normal;color:var(--acc);font-size:var(--fs-2)}
.ch.cp:active{opacity:.6}

/* Описание: свёрнуто до нескольких строк, разворачивается по кнопке */
.desc{margin:0;font-size:var(--fs-3);line-height:1.5;color:var(--ink2);white-space:pre-line;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.desc.full{display:block;overflow:visible}

/* Свод жалоб: подсчёт слов, а не разбор смысла — цвет предупреждающий, не тревожный */
.painbox{background:var(--pane2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s-4) var(--s-4);margin:10px 0}
.chip.pain{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,transparent);
  color:var(--bad);min-height:30px;font-size:var(--fs-1);cursor:default}
.chip.good{background:var(--good-bg);border-color:color-mix(in srgb,var(--good) 35%,transparent);
  color:var(--good);min-height:30px;font-size:var(--fs-1);cursor:default}
.chip.warn2{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,transparent);
  color:var(--warn);min-height:30px;font-size:var(--fs-1);cursor:default}

/* Строка библиотеки с кнопкой «разобрать заново» */
.librow{display:flex;align-items:center;gap:var(--s-2);border-top:1px solid var(--line)}
.librow:first-child{border-top:0}
.librow .row{border-top:0;flex:1;min-width:0}
.librow .again{width:38px;height:38px;flex:none;border-radius:11px;border:1px solid var(--line);
  background:var(--pane2);color:var(--ink2);font-size:var(--fs-4);cursor:pointer;font-family:inherit}
.librow .again:active{transform:scale(.94)}

/* Дельта в строке наблюдаемого товара */
.dl{font-style:normal;font-weight:620}
.dl.up{color:var(--warn)} .dl.dn{color:var(--good)}

/* Отзывы */
.fbs{display:flex;flex-direction:column}
.fb{border-top:1px solid var(--line);padding:var(--s-4) 0}
.fb:first-child{border-top:0}
.fb .fh{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-1)}
.fb .st{color:#FFC24D;font-size:var(--fs-1);letter-spacing:1px}
.fb .dt{font-size:var(--fs-0);color:var(--ink3);margin-left:auto}
.fb p{margin:0;font-size:var(--fs-2);line-height:1.45;color:var(--ink2)}
.fb p.pro{color:var(--good);margin-top:var(--s-1);font-size:var(--fs-2)}
.fb p.con{color:var(--bad);margin-top:var(--s-1);font-size:var(--fs-2)}

/* Выбор площадки на экране разбора */
.plats{display:flex;gap:var(--s-3)}
.plat{flex:1;min-width:0;min-height:64px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line);background:var(--pane2);color:var(--ink2);font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);padding:var(--s-2) var(--s-1)}
.plat span{font-size:var(--fs-1);font-weight:620}
.plat em{font-style:normal;font-size:var(--fs-00);color:var(--ink3)}
.plat.on{background:rgba(181,168,255,.18);color:var(--acc);
  border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.plat.off{opacity:.7}

/* Сворачиваемый заголовок условий отбора */
.ph.accord{width:100%;background:none;border:0;font-family:inherit;color:inherit;
  cursor:pointer;padding:0;text-align:left;min-height:var(--tap)}
.ph.accord::after{content:"⌄";margin-left:8px;font-size:var(--fs-3);color:var(--ink3);
  transition:transform var(--t)}
.ph.accord.open::after{transform:rotate(180deg)}

/* ═══ ГЛАВНЫЙ ЭКРАН: приветствие, плитки, кольцо, активность, карта ниши ═══ */

.hello{padding:var(--s-0) var(--s-0) 0;display:flex;align-items:center;gap:var(--s-4)}
/* Приветствие идёт сразу под заголовком вкладки. Два крупных набора подряд
   спорили друг с другом, поэтому приветствие на ступень мельче заголовка. */
.hello .ht b{display:block;font-size:var(--fs-6);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.hello .ht span{display:block;font-size:var(--fs-2);color:var(--ink2);margin-top:var(--s-1)}
/* Фото из Telegram. Кольцо в цвет акцента отделяет его от канваса. */
.hello .ava{
  width:46px;height:46px;border-radius:50%;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--acc-1),var(--acc-2));
  color:#fff;font-size:var(--fs-6);font-weight:700;
  box-shadow:0 0 0 2px var(--pane), 0 0 0 4px var(--acc);
}
.hello .ava img{width:100%;height:100%;object-fit:cover;display:block}

/* Плитки по две в ряд: на 375 точках четыре в строку нечитаемы. */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.kpi{background:var(--pane);border:1px solid var(--line);border-radius:16px;padding:var(--s-4)}

/* Верхний ряд плитки Dropify: иконка-чип слева, дельта-бейдж справа. */
.krow{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-3)}
.kic{
  width:30px;height:30px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-4);color:var(--acc);
  background:linear-gradient(140deg,rgba(110,91,216,.28),rgba(169,63,176,.20));
  border:1px solid var(--line);
}
:root[data-theme="light"] .kic{background:#2E2E33;color:#fff;border-color:#2E2E33}
.kbadge{
  font-size:var(--fs-0);font-weight:700;font-variant-numeric:tabular-nums;
  padding:2px 7px;border-radius:999px;color:var(--ink2);background:var(--pane2);
}
.kbadge.up{color:var(--good);background:var(--good-bg)}
.kbadge.dn{color:var(--bad);background:var(--bad-bg)}

/* Мини-спарклайн внутри плитки или карточки ниши: семь тонких столбиков. */
.kspark{display:flex;align-items:flex-end;gap:3px;height:26px;margin-top:var(--s-3)}
.kspark i{
  flex:1;min-width:3px;border-radius:2px;
  background:color-mix(in srgb, var(--acc) 30%, transparent);
}
.kspark i.now{background:linear-gradient(180deg,#8E7BFF,#6E5BD8)}

/* ИИ-раздел: строки задач в шите, ожидание, результат в markdown. */
.aitask{
  display:flex;align-items:center;gap:var(--s-4);width:100%;text-align:left;
  cursor:pointer;font-family:inherit;color:inherit;margin-top:var(--s-3);
}
.aitask .att{flex:1;min-width:0}
.aitask .att b{display:block;font-size:var(--fs-4);font-weight:640}
.aitask .att span{display:block;font-size:var(--fs-1);color:var(--ink3);margin-top:2px;line-height:1.35}
.aitask .chev{color:var(--ink3);font-size:var(--fs-6);flex:none}

.aiwait{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--s-3);padding:var(--s-8) var(--s-5)}
.aiwait b{font-size:var(--fs-4)}
.aiwait span{font-size:var(--fs-1);color:var(--ink3);max-width:280px;line-height:1.4}
.spin{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--pane2);border-top-color:var(--acc);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation-duration:2.5s} }

.md p{font-size:var(--fs-3);line-height:1.5;margin:0 0 var(--s-3)}
.md .mdh{font-size:var(--fs-4);font-weight:700;margin:var(--s-5) 0 var(--s-3)}
.md .mdh:first-child{margin-top:0}
.md ul{margin:0 0 var(--s-3);padding-left:18px;display:flex;flex-direction:column;gap:var(--s-2)}
.md li{font-size:var(--fs-3);line-height:1.45}
.md b{font-weight:700}

/* Строки метрик: имя — полоса — значение. Табличные цифры, чтобы столбик
   значений не плясал. */
.mrow{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-2) 0}
.mrow .mn{flex:0 0 96px;font-size:var(--fs-1);color:var(--ink2)}
.mrow .mb{
  flex:1;height:8px;border-radius:4px;background:var(--pane2);
  overflow:hidden;display:block;
}
.mrow .mb i{
  display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#6E5BD8,#A93FB0);
}
.mrow b{
  flex:0 0 auto;min-width:64px;text-align:right;
  font-size:var(--fs-2);font-weight:700;font-variant-numeric:tabular-nums;
}

/* Лента «Мои ниши»: горизонтальная карусель карточек-виджетов. */
.nstrip{
  display:flex;gap:var(--s-4);overflow-x:auto;
  scroll-snap-type:x proximity;
  margin:0 calc(-1 * var(--s-5));padding:2px var(--s-5) var(--s-2);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.nstrip::-webkit-scrollbar{display:none}
.ncard{
  flex:0 0 148px;scroll-snap-align:start;text-align:left;cursor:pointer;
  background:var(--pane2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s-4);display:flex;flex-direction:column;font-family:inherit;color:inherit;
}
.ncard b{
  display:block;font-size:var(--fs-3);font-weight:650;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ncard .nm{display:block;font-size:var(--fs-1);color:var(--ink2);margin-top:var(--s-1);
  font-variant-numeric:tabular-nums}
.ncard .krow{margin-bottom:var(--s-2)}
.ncard .kspark{height:20px}
.kpi b{display:block;font-size:var(--fs-7);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
/* Подпись занимает ровно две строки во всех плитках. У «фотографий у
   конкурентов» она переносилась, у соседей — нет, и нижняя строка съезжала
   на 15 px: ряд выглядел развалившимся. Теперь место под вторую строку
   зарезервировано всегда, и нижние строки стоят на одной линии. */
.kpi .kt{display:block;font-size:var(--fs-1);color:var(--ink2);margin-top:var(--s-2);line-height:1.3;
  min-height:calc(var(--fs-1) * 1.3 * 2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kpi .kn{display:block;font-size:var(--fs-0);color:var(--ink3);margin-top:var(--s-1)}
.kpi .kn.up{color:var(--good)} .kpi .kn.dn{color:var(--bad)}

/* Кольцо среднего рейтинга */
.gwrap{display:flex;align-items:center;gap:var(--s-5);margin-bottom:var(--s-5)}
.gauge{position:relative;width:90px;height:90px;flex:none}
.gauge svg{width:100%;height:100%;display:block}
.gauge .gv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s-0)}
.gauge .gv b{font-size:var(--fs-6);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gauge .gv span{font-size:var(--fs-00);color:var(--ink3)}
.gt b{display:block;font-size:var(--fs-3);font-weight:640}
.gt span{display:block;font-size:var(--fs-1);color:var(--ink3);margin-top:var(--s-1);line-height:1.4}

/* Столбики активности по дням недели */
.sbars{display:flex;align-items:flex-end;gap:var(--s-2);height:74px}
.sb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:var(--s-2);height:100%}
.sb i{display:block;width:100%;border-radius:6px;background:var(--pane2);min-height:6px;
  border:1px solid var(--line)}
.sb.now i{background:linear-gradient(180deg,var(--acc-1),var(--acc-2));border-color:transparent}
.sb span{font-size:var(--fs-00);color:var(--ink3)}

/* Товар в фокусе */
.focus{display:flex;gap:var(--s-4);align-items:flex-start;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;padding:0;font-family:inherit;color:inherit}
.focus .thumb{width:84px;height:112px;border-radius:13px;flex:none}
.focus .ft{min-width:0;flex:1}
.focus .ft b{display:block;font-size:var(--fs-3);font-weight:620;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.focus .ft span{display:block;font-size:var(--fs-1);color:var(--ink3);margin-top:var(--s-1)}
.focus .ft .fm{color:var(--ink2);font-weight:560;font-variant-numeric:tabular-nums}

/* Карта ниши: доли брендов плитками */
.tmap{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.tm{flex:1 1 0;min-width:88px;border-radius:12px;padding:var(--s-4) var(--s-4);
  background:linear-gradient(140deg,color-mix(in srgb,var(--acc-1) 60%,transparent),
    color-mix(in srgb,var(--acc-2) 45%,transparent));color:#fff;overflow:hidden}
.tm.other{background:var(--pane2);color:var(--ink2);border:1px solid var(--line)}
.tm b{display:block;font-size:var(--fs-1);font-weight:660;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.tm span{display:block;font-size:var(--fs-0);opacity:.85;margin-top:var(--s-1);font-variant-numeric:tabular-nums}

/* ═══ ОТЧЁТ ПО НИШЕ: ценовые слои и проработанность карточек ═══ */

.segs{display:flex;flex-direction:column;gap:var(--s-4);margin-bottom:var(--s-4)}
.seg2 .sh{display:flex;align-items:baseline;gap:var(--s-3);font-size:var(--fs-2)}
.seg2 .sh b{font-size:var(--fs-3);font-weight:640}
.seg2 .sh span{color:var(--ink3);font-size:var(--fs-1)}
.seg2 .sh i{margin-left:auto;font-style:normal;color:var(--ink2);font-size:var(--fs-1);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.seg2 .sbar{height:8px;border-radius:99px;background:var(--pane2);overflow:hidden;margin:6px 0 4px}
.seg2 .sbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--acc-1),var(--acc-2))}
.seg2 .sf{font-size:var(--fs-0);color:var(--ink3)}

.bars{display:flex;flex-direction:column;gap:var(--s-3)}
/* Полоска и число занимали 150 px из 309, и подпись «Описание длиннее 1000
   знаков» (187 px) обрезалась на «…1000 зн». Полоска — иллюстрация, подпись —
   смысл: место отдано подписи. */
.bar2{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-2)}
.bar2 .k{flex:1;color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar2 .b{width:64px;flex:none;height:7px;border-radius:99px;background:var(--pane2);overflow:hidden}
.bar2 .b i{display:block;height:100%;border-radius:99px;background:var(--acc)}
.bar2 .v{width:40px;flex:none;text-align:right;color:var(--ink2);font-size:var(--fs-1);
  font-variant-numeric:tabular-nums}

/* Режим выбора товаров: цель — вся карточка, а не маленький квадратик */
.row.pick{position:relative}
.row.pick.on{outline:2px solid var(--acc);outline-offset:-2px}
.cards.list .row.pick.on{outline-offset:0;border-radius:12px;
  background:rgba(181,168,255,.10)}
.pmark{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);background:rgba(10,8,22,.45);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-2);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.row.pick.on .pmark{background:var(--acc);border-color:var(--acc);color:#17151F;font-weight:700}
:root[data-theme="light"] .pmark{border-color:rgba(20,16,33,.35);background:rgba(255,255,255,.7);color:var(--ink)}

/* Сравнение запросов */
.crow{padding:var(--s-4) 0;border-top:1px solid var(--line)}
.crow:first-child{border-top:0}
.crow .ct{display:flex;align-items:baseline;gap:var(--s-3)}
.crow .ct b{font-size:var(--fs-3);font-weight:620}
.crow .ct span{margin-left:auto;font-size:var(--fs-1);color:var(--ink2);white-space:nowrap}
.crow .cbar{height:7px;border-radius:99px;background:var(--pane2);overflow:hidden;margin:7px 0 4px}
.crow .cbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--acc-1),var(--acc-2))}
.crow .cf{font-size:var(--fs-0);color:var(--ink3);font-variant-numeric:tabular-nums}

/* ═══ ЮНИТ-ЭКОНОМИКА ═══ */

.erow{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) 0}
.erow .k{flex:1;font-size:var(--fs-3);color:var(--ink2)}
.erow .ein{width:104px;flex:none;min-height:42px;text-align:right;font-size:var(--fs-4);
  font-variant-numeric:tabular-nums;padding:0 var(--s-4)}
.erow .u{width:16px;flex:none;font-size:var(--fs-2);color:var(--ink3)}

/* Структура цены: из чего сложились деньги за единицу */
.pbar{display:flex;height:12px;border-radius:99px;overflow:hidden;margin:14px 0 9px;
  background:var(--pane2)}
.pbar i{display:block;height:100%}
.pbar .c{background:linear-gradient(90deg,var(--acc-1),var(--acc-2))}
.pbar .e{background:var(--warn)}
.pbar .p{background:var(--good)}
.pleg{display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:var(--fs-1);color:var(--ink2)}
.pleg span{display:inline-flex;align-items:center;gap:var(--s-1)}
.pleg i{width:9px;height:9px;border-radius:3px;flex:none}
.pleg .c{background:var(--acc-1)} .pleg .e{background:var(--warn)} .pleg .p{background:var(--good)}

/* Фото во весь экран */
.lbox{position:absolute;inset:0;z-index:70;background:rgba(6,4,14,.96);
  display:flex;align-items:center;animation:fade var(--t-comp) var(--ease-out)}
.lstrip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;
  scrollbar-width:none;align-items:center}
.lstrip::-webkit-scrollbar{display:none}
.lstrip img{width:100%;flex:none;scroll-snap-align:center;object-fit:contain;max-height:88vh}
.lnum{position:absolute;top:calc(var(--safe-t) + 14px);left:0;right:0;text-align:center;
  color:#fff;font-size:var(--fs-2);font-weight:620;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 6px rgba(0,0,0,.6)}
.lclose{position:absolute;top:calc(var(--safe-t) + 6px);right:12px;width:40px;height:40px;
  border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:var(--fs-4);
  cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.stars{display:flex;flex-direction:column;gap:var(--s-1);margin-top:var(--s-4)}
.star{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-1);color:var(--ink2)}
.star .lbl2{width:14px;flex:none;text-align:right;font-variant-numeric:tabular-nums}
.star .bar{flex:1;height:7px;border-radius:99px;background:var(--pane2);overflow:hidden}
.star .bar i{display:block;height:100%;border-radius:99px;background:#FFC24D}
.star .cnt{width:56px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink3)}

/* ═══ БРЕНДЫ ═══ */

.brow{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) 0;border-top:1px solid var(--line);
  width:100%;background:none;border-left:0;border-right:0;border-bottom:0;font-family:inherit;
  color:inherit;text-align:left;cursor:pointer;min-height:var(--tap)}
.brow:first-child{border-top:0}
.brow .bn{width:44px;height:52px;border-radius:11px;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:var(--fs-4);font-weight:700;color:#fff;overflow:hidden;
  border:1px solid var(--line);background:var(--pane2)}
.brow .bn img{width:100%;height:100%;object-fit:cover;display:block}
/* Фото не отдалось — возвращаемся к монограмме, а не к пустой дырке. */
.brow .bn.mono{background:linear-gradient(140deg,var(--acc-1),var(--acc-2));border-color:transparent}
.brow .bt{flex:1;min-width:0}
.brow .bt b{display:block;font-size:var(--fs-3);font-weight:620;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.brow .bt span{display:block;font-size:var(--fs-1);color:var(--ink3);margin-top:var(--s-1)}
.brow .br{margin-left:auto;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.brow .br b{display:block;font-size:var(--fs-4);font-weight:670}
.brow .br span{font-size:var(--fs-0);color:var(--ink3)}
.sharebar{height:4px;border-radius:99px;background:var(--pane2);overflow:hidden;margin-top:var(--s-2)}
.sharebar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--acc-1),var(--acc-2))}

/* ═══ ФИЛЬТРЫ ═══ */

.frow{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) 0;border-top:1px solid var(--line)}
.frow:first-child{border-top:0}
.frow label{font-size:var(--fs-4);flex:1}
.frow .val{font-size:var(--fs-3);color:var(--ink2);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.chip{min-height:36px;padding:0 var(--s-4);border-radius:11px;border:1px solid var(--line);
  background:var(--pane2);color:var(--ink2);font-family:inherit;font-size:var(--fs-2);font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;gap:var(--s-1)}
.chip[aria-pressed="true"]{background:rgba(181,168,255,.18);border-color:color-mix(in srgb,var(--acc) 50%,transparent);color:var(--acc)}

/* ─── Порядок сортировки ───────────────────────────────────────────────────
   Было двенадцать чипов вразнобой: шесть рваных рядов и 239 px высоты только
   под сортировку. Стало девять признаков ровной сеткой 3×3 плюс отдельный
   переключатель направления — он появляется лишь там, где направление есть
   (цена, рейтинг, отзывы). Ряды одинаковой ширины читаются как список,
   а не как высыпанная горсть. */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.sgrid .chip{padding:0 var(--s-3);min-height:34px;justify-content:center;text-align:center;
  font-size:var(--fs-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex}
.sdir{display:flex;gap:var(--s-2);margin-top:var(--s-3);align-items:center}
.sdir .sl{font-size:var(--fs-1);color:var(--ink3);flex:none}
.sdir .chip{flex:1;min-height:34px;justify-content:center;font-size:var(--fs-1);padding:0 var(--s-3)}
.fin{width:100%;min-height:46px;border-radius:13px;border:1px solid var(--line);
  background:var(--pane2);color:var(--ink);font-family:inherit;font-size:var(--fs-4);padding:0 var(--s-5);outline:none}
.fin::placeholder{color:var(--ink3)}
.fin:focus{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}

/* === вёрстка экранов === */
/* Правки по итогам обмера всех экранов в окне 375×812. Здесь только геометрия:
   что к чему прижато, что висит обрубком, где дыра и где лента обрывается без
   намёка на продолжение. Размеры шрифта и шаг отступов берутся готовыми
   переменными и не переопределяются. */

/* ── Пустой блок подсказок держал под поиском семь точек воздуха ─────────── */
.hints:empty{display:none}

/* ── Кнопка внутри панели сжималась по надписи и висела обрубком слева ────
   Причина одна на всё приложение: у .btn задан flex:1, а панель — обычный блок,
   и растягивать было нечему. Затронуто было девять кнопок: «Все бренды»,
   «Загрузить рейтинги», «Оценить продажи верхушки», «Очистить условия»,
   «Показать отзывы», «Читать полностью», «Сбросить всё» и обе в шитах. */
main > .btn,
.p > .btn,
.sheetbody > .btn{flex:0 0 auto;width:100%}

/* ── Полоса главного действия: соседние кнопки одной высоты ───────────────
   На экране отказа рядом стояли «Попробовать снова» (52) и «Назад» (46) —
   нижние края расходились на шесть точек. */
.actbar{align-items:stretch}
.actbar .btn.sm{height:auto;min-height:46px}

/* ── Тело шита: просветы между блоками ────────────────────────────────────
   Шит задавал gap своим детям, но ребёнок у него ровно один — обёртка, —
   поэтому ВСЁ внутри стояло вплотную: заголовок к первой панели, панели друг
   к другу, а «Показать все 12» и «Сбросить всё» соприкасались вообще без
   зазора, хотя вторая кнопка стирает фильтры. */
.sheet > .sheetbody{display:flex;flex-direction:column;gap:var(--s-4);min-height:0}
.sheet > .sheetbody > .grab{align-self:center;margin:0}

/* ── Глубина разбора: четыре значения — значит два на два ─────────────────
   Пилюли по 160–168 точек в контейнер 311 не вставали парами и уходили каждая
   в свою строку: четыре ряда, и в каждом половина пустая. */
.chips.pair{display:grid;grid-template-columns:1fr 1fr}
.chips.pair .chip{justify-content:space-between;min-width:0;overflow:hidden}
/* Цену в килобайтах не переносим: «≈160 КБ» ломалось на две строки, и вторая
   уходила под нижний край пилюли. */
.chips.pair .chip > span{white-space:nowrap;flex:none}

/* ── Плитки площадок: знаки на одной линии ────────────────────────────────
   Разметка теперь даёт третью строку каждой плитке, здесь только запрет
   на её схлопывание, чтобы значки не разъезжались по вертикали. */
.plat em{min-height:14px;display:block}

/* ── Строка библиотеки: просвет до кнопки повтора ─────────────────────────
   Между «открыть разбор» и «↻ разобрать заново» было шесть точек. */
.librow{gap:var(--s-3)}

/* ── Подпись метрики: две строки вместо вечного многоточия ────────────────
   «рейтинг не загружен» требует 105 точек, а колонка даёт 82 — подпись всегда
   стояла обрезанной. Плитки в ряду тянутся по самой высокой, поэтому ряд
   остаётся ровным. */
.mc span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}

/* ── Разделитель в шапке результата ───────────────────────────────────────
   Точка теперь принадлежит следующей подписи и переносится вместе с ней:
   отдельным узлом она оставалась висеть в конце строки. */
.hero .meta span + span::before{content:"·";opacity:.4;margin-right:var(--s-3)}

/* ── Горизонтальные ленты: видно, что есть продолжение ────────────────────
   Лента фильтров обрывалась ровно по краю панели (688 точек содержимого при
   311 видимых), лента вариантов цвета — тем более (1004 при 311). Растворение
   у того края, за которым что-то осталось, работает в обеих темах, потому что
   это маска по прозрачности, а не заливка цветом фона. */
.hscroll{--fade:26px}
.hscroll[data-more="right"]{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--fade)),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - var(--fade)),transparent)}
.hscroll[data-more="left"]{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade));
          mask-image:linear-gradient(90deg,transparent,#000 var(--fade))}
.hscroll[data-more="both"]{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}

/* ── Плитка: одинокая последняя карточка ──────────────────────────────────
   При нечётном числе товаров последняя плитка оставалась одна в ряду, а справа
   зияли 160 точек пустоты — выдача выглядела обрубленной. Такая карточка
   разворачивается на всю ширину и становится широкой строкой: ряд закрыт,
   и видно, что это конец списка, а не обрыв. */
.cards.grid > .row:last-child:nth-child(odd){
  grid-column:1 / -1;display:grid;
  grid-template-columns:132px minmax(0,1fr);grid-template-rows:auto 1fr;
  min-height:176px}
.cards.grid > .row:last-child:nth-child(odd) > .thumb{
  grid-row:1 / 3;grid-column:1;width:132px;height:100%;aspect-ratio:auto}
.cards.grid > .row:last-child:nth-child(odd) > .t{grid-column:2;grid-row:1}
.cards.grid > .row:last-child:nth-child(odd) > .r{grid-column:2;grid-row:2;align-self:end}
.cards.grid > .row:last-child:nth-child(odd) > .pbadge{top:auto;bottom:9px;left:9px;right:auto}

/* ── Место под данные, которые уже едут ───────────────────────────────────
   Пока рейтинги в пути, строка держит их будущую высоту серой полоской.
   Раньше список подрастал на 27 точек в каждой строке ровно в тот момент,
   когда данные приезжали, и человек терял место, которое читал. */
/* Сначала чиним саму строку рейтинга. Правило .row .t span{display:block}
   перебивало .rate по весу селектора, и оценка разваливалась на две строки во
   всю ширину: «★ 4,8» сверху, «1 234» отдельной строкой снизу. Из-за этого
   строка списка вырастала на 24 точки, а не на одну строку. */
/* ── Перечень изменений у наблюдаемого товара ─────────────────────────────
   Строка списка обрезает подпись многоточием, и из пяти фактов об изменениях
   было видно два: «фото 8 → 10» и «описание переписали» уезжали за край
   насовсем. Здесь подпись переносится и живёт до двух строк. */
.row .t span.chg{white-space:normal;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* В списке наблюдаемых товаров этот перечень — единственное содержимое строки,
   поэтому там ему три строки, а не две. */
.watchlist .row .t span.chg{-webkit-line-clamp:3}
.row .t span.chg .dl{white-space:nowrap}

.row .t .ln .rate{display:inline-flex;margin-top:0}
.row .t .ln .rate .rv{display:inline;margin-top:0}
.row .t .ln .sbit{display:inline-block;margin-top:0}

.rate.wait,.sbit.wait,
.row .t .ln .rate.wait,.row .t .ln .sbit.wait{
  display:inline-block;height:1.33em;border-radius:6px;vertical-align:-.26em;margin-top:0}
.rate.wait{width:76px}
.sbit.wait{width:92px}

/* ── График цен: столбики вместо сглаженной кривой ────────────────────────
   Кривая обещала значения между столбцами, которых не существует, а на нишах
   с длинным хвостом («платье женское», «кроссовки мужские») сплющивалась в
   один зубец у левого края. Столбик — это ровно «сколько товаров в отрезке
   цен», и меньше он не говорит. */
.pchart{position:relative;margin-top:var(--s-4)}
/* flex-direction задаём явно: класс .bars уже занят вертикальным списком в
   отчёте по нише, и без этой строки столбики выстраивались колонкой и делили
   высоту поровну — все четыре получались одинаковыми. */
/* Просвет между столбиками — размер графика, а не шаг вёрстки: он подобран
   под ширину столбика и намеренно живёт вне шкалы отступов. */
.pchart .bars{display:flex;flex-direction:row;align-items:flex-end;gap:3px;height:86px}
.pchart .bars .b{flex:1;min-width:0;height:var(--h);min-height:3px;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--acc-2),var(--acc-1))}
.pchart .bars .b.zero{background:var(--pane2);border:1px solid var(--line);height:3px}
.pchart .medline{position:absolute;top:0;height:86px;width:2px;margin-left:-1px;
  background:var(--ink);opacity:.5;border-radius:2px;pointer-events:none}
.pchart .medlab{position:absolute;top:-6px;transform:translateX(-50%);
  font-size:var(--fs-1);font-weight:640;color:var(--ink);font-variant-numeric:tabular-nums;
  white-space:nowrap;background:var(--pane);border:1px solid var(--line);
  border-radius:9px;padding:var(--s-0) var(--s-3);pointer-events:none}
.pchart .medlab.at-start{transform:none}
.pchart .medlab.at-end{transform:translateX(-100%)}
.pchart .ax{display:flex;justify-content:space-between;margin-top:var(--s-2);
  font-size:var(--fs-0);color:var(--ink3);font-variant-numeric:tabular-nums}

/* ── Профиль: учётная запись — первая строка общего списка ────────────────
   Отдельной панелью экран перерастал телефон на 43 точки, и прокручивать
   приходилось ради одного абзаца сноски. */
.acct{display:flex;align-items:center;gap:var(--s-5);padding-bottom:var(--s-4);
  border-bottom:1px solid var(--line);margin-bottom:var(--s-0)}
.acct .av{width:52px;height:52px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:var(--fs-6);font-weight:700;color:#fff;
  background:linear-gradient(140deg,var(--acc-1),var(--acc-2))}
.acct .an{min-width:0}
.acct .an b{display:block;font-size:var(--fs-4);font-weight:650}
.acct .an span{font-size:var(--fs-1);color:var(--ink3)}
.nodata.foot{margin:0}

/* ── Галерея карточки: поля закрывает само фото ───────────────────────────
   Кадр 3:4 в ленте шириной с экран оставлял по 52 точки ровной пустоты с
   каждой стороны — почти треть ширины. Обрезать товар нельзя, поэтому поля
   заполняет сильно размытая копия того же снимка: лишнего запроса это не
   стоит, а дыра исчезает. */
.gal .strip .gi{position:relative;display:block;flex:none;width:100%;height:360px;
  scroll-snap-align:center;overflow:hidden;background:var(--pane2);cursor:pointer}
.gal .strip .gi::before{content:"";position:absolute;inset:-34px;
  background-image:var(--ph);background-size:cover;background-position:center;
  filter:blur(28px) saturate(1.2);opacity:.5}
:root[data-theme="light"] .gal .strip .gi::before{opacity:.34}
.gal .strip .gi img{position:relative;width:100%;height:100%;object-fit:contain;
  display:block;background:none}