/* «Новый дизайн v8» (владелец 07.11: «V8 нравится»; перенос порциями, порция 1 — основа, «Сегодня», «Цены», «Нужно решить»,
   карточка товара, лист цены). Подключается ПОСЛЕДНИМ: переопределяет токены и вид, поведение и разметку не трогает.
   Источники: design/v8-2026-11-07/kit9.py (KIT_CSS), app8.py (APP_CSS), item_live.py (CSS) — переносится почти дословно.
   Правила: тема одна, тёмная; фон — графит и одно пятно света; карточки, списки, плитки — полупрозрачное стекло
   (белый 5,5 %, blur 24 + saturate 140 %, кромка 1 px); Manrope 300 / 400 / 500 / 600; крупные числа — 300, табличные;
   лайм только у главной кнопки экрана; выбор — белым, у чипа — светлой кромкой; статус — точкой, текст ink2.
   Радиусы: карточки 28, списки 24, плитки 22. Шкала кеглей v7 (7 размеров) этим файлом заменяется: v8 добавляет 15, 17, 26, 32, 34, 48. */

:root {
  /* Единые длительности движения (08.11, «однотипные объекты анимируются одинаково»). Токены T14–T16 (seg.js 240, чипы 160, нажатие 120,
     плашки enter.js/plate.js, пилюля меню 420 с пружиной) остаются как есть; здесь — то, что у них не было общим: раскрытия, листы,
     плашки сверху, полосы хода, переключатель. fast — нажатие; dur — раскрытие, шеврон, переключатель; slow — приход листа и плашки,
     полоса хода; close — уход листа и плашки. ease-std — кривая seg.js и enter.js. При prefers-reduced-motion — нули (app.css). */
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --dur-close: 240ms; --ease-std: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1);
}
:root, :root[data-theme="dark"] {
  --ground: #17181A; --ground2: #0F1011; --sheet: #1E1F21; --solid: #232427; --solid2: #2B2C2F;
  --glass: rgba(255,255,255,.055); --glass2: rgba(255,255,255,.10); --edge: rgba(255,255,255,.09);
  --blur: blur(24px) saturate(140%);
  --ink: #F4F4F2; --ink2: rgba(244,244,242,.58); --ink3: rgba(244,244,242,.28); --muted: var(--ink2);
  --surface: var(--glass); --surface2: var(--glass2); --tileBg: var(--glass); --tileBg2: var(--glass2);
  --line: var(--edge); --grid: var(--edge); --handle: rgba(255,255,255,.22); --dash: rgba(255,255,255,.22);
  --tileEdge: inset 0 0 0 1px var(--edge); --cardEdge: inset 0 0 0 1px var(--edge); --winShadow: inset 0 1px 0 var(--edge);
  --toastShadow: inset 0 0 0 1px var(--edge); --noteShadow: inset 0 0 0 1px var(--edge);
  --noteBg: var(--glass); --mutedBg: var(--glass); --noneBg: var(--glass); --infoBg: var(--glass); --markBg: var(--glass2);
  --accent: #CCFF00; --onAccent: #0D0E0F; --sel: #F4F4F2; --onSel: #121314;
  --good: #3DDC6A; --warn: #FFC53D; --off: #FF6B5E; --none: rgba(244,244,242,.40);
  --goodBg: rgba(61,220,106,.10); --warnBg: rgba(255,197,61,.09); --offBg: rgba(255,107,94,.10);
  --tabBg: var(--glass); --tabText: var(--ink2); --tabShadow: inset 0 0 0 1px var(--edge);
  --heroBg: var(--solid); --heroEdge: inset 0 0 0 1px var(--edge); --heroInset: var(--solid2); --heroTrack: rgba(255,255,255,.16);
  --heroInk: var(--ink); --heroMuted: var(--ink2);
  --scrim: rgba(8,9,10,.55); --backdrop: #0F1011; --ringTrack: rgba(255,255,255,.12);
  --skel: var(--glass); --skel2: var(--glass2); --skelHero: var(--glass2); --skelHeroBar: rgba(255,255,255,.14);
  --bar: rgba(255,255,255,.16); --cap: rgba(255,255,255,.30);
  --adTile: var(--glass); --adEdge: inset 0 0 0 1px var(--edge);
  --ease: cubic-bezier(.16,.84,.24,1); --areaA: .06;
  --r-card: 28px; --r-list: 24px; --r-tile: 22px;
  --glowA: rgba(255,255,255,.075); --glowB: rgba(204,255,0,.035); --textShadow: none; --pillActiveBg: var(--ink); --pillActiveText: var(--ground);
}
/* светлая тема снята 08.11 решением владельца, вернём позже (блок ниже и правила [data-theme="light"] мёртвые).
   Светлая тема v8 (design/v8-2026-11-07/light8.py: MAP + EXTRA): те же токены, другие значения — холст серо-шалфейный, стекло светлее,
   текст и штрихи белые, лайм у главной кнопки тот же. Переключение — атрибут data-theme="light" на <html>. */
:root[data-theme="light"] {
  --ground: #979D95; --ground2: #848A82; --sheet: #A9AEA6; --solid: rgba(255,255,255,.22); --solid2: rgba(255,255,255,.30);
  --glass: rgba(255,255,255,.20); --glass2: rgba(255,255,255,.28); --edge: rgba(255,255,255,.30);
  --ink: #FFFFFF; --ink2: rgba(255,255,255,.88); --ink3: rgba(255,255,255,.52); --muted: var(--ink2);
  --surface: var(--glass); --surface2: var(--glass2); --tileBg: var(--glass); --tileBg2: var(--glass2);
  --line: var(--edge); --grid: var(--edge); --handle: rgba(255,255,255,.5); --dash: rgba(255,255,255,.5);
  --tileEdge: inset 0 0 0 1px var(--edge); --cardEdge: inset 0 0 0 1px var(--edge); --winShadow: inset 0 1px 0 var(--edge);
  --toastShadow: inset 0 0 0 1px var(--edge); --noteShadow: inset 0 0 0 1px var(--edge);
  --noteBg: var(--glass); --mutedBg: var(--glass); --noneBg: var(--glass); --infoBg: var(--glass); --markBg: var(--glass2);
  --accent: #CCFF00; --onAccent: #0D0E0F; --sel: #FFFFFF; --onSel: #0D0E0F;
  --good: #2EE06A; --warn: #FFD24D; --off: #FF5A4A; --none: rgba(255,255,255,.60);
  --goodBg: rgba(46,224,106,.18); --warnBg: rgba(255,210,77,.20); --offBg: rgba(255,90,74,.18);
  --tabBg: var(--glass); --tabText: var(--ink2); --tabShadow: inset 0 0 0 1px var(--edge);
  --heroBg: var(--solid); --heroEdge: inset 0 0 0 1px var(--edge); --heroInset: var(--solid2); --heroTrack: rgba(255,255,255,.34);
  --heroInk: var(--ink); --heroMuted: var(--ink2); --heroGood: #2EE06A; --heroWarn: #FFD24D; --heroOff: #FF5A4A;
  --scrim: rgba(70,76,68,.38); --backdrop: #848A82; --ringTrack: rgba(255,255,255,.34);
  --skel: var(--glass); --skel2: var(--glass2); --skelHero: var(--glass2); --skelHeroBar: rgba(255,255,255,.34);
  --bar: rgba(255,255,255,.34); --cap: rgba(255,255,255,.55);
  --adTile: var(--glass); --adEdge: inset 0 0 0 1px var(--edge);
  --staleCard: var(--glass); --staleTile: var(--glass2); --unread: #FFFFFF; --info: var(--ink2); --actionIcon: var(--ink2);
  --glowA: rgba(255,255,255,.22); --glowB: rgba(204,255,0,.035); --textShadow: 0 1px 1px rgba(40,46,38,.18);
  --pillActiveBg: var(--ink); --pillActiveText: #0D0E0F; --offInk: #FFFFFF; --warnInk: #FFFFFF; --onWarn: #0D0E0F; --alertIcon: #0D0E0F;
  --knobOn: #0D0E0F; --knobOff: #FFFFFF; --offTrack: rgba(255,255,255,.3);
  --rgbMkGood: 46,224,106; --rgbMkWarn: 255,210,77; --rgbMkOff: 255,90,74; --rgbMkNone: 255,255,255; --kRisk: 1; --areaA: .22;
  color-scheme: light;
}

/* ---------- фон: графит сверху вниз и одно мягкое пятно света справа сверху (отдельный слой, без повторов и стыков) */
html { background: var(--ground2); }
html, body { background-color: transparent; color: var(--ink); }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, var(--ground), var(--ground2)); }
body::after { content: ''; position: fixed; z-index: -1; pointer-events: none; width: 420px; height: 420px; right: -170px; top: -300px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glowB), transparent 45%), radial-gradient(closest-side, var(--glowA), transparent); }
html.win-open body { background: var(--backdrop); }
body { font-weight: 400; }
#base.locked { background: linear-gradient(180deg, var(--ground), var(--ground2)); }
.win { background: linear-gradient(180deg, var(--ground), var(--ground2)); }
.nav-fade { background: linear-gradient(180deg, transparent 0%, var(--ground2) 55%); }

/* ---------- стекло: карточки, списки, плитки, плашки */
.card, .hcard, .pcard, .ctile, .gtile, .stock-card, .steps, .empty, .why, .gplate, .found, .hint, .note.plain, .t7p, .alist, .search, .banner, .dbar,
.tabbar, .chip, .tile4, .clt, .undo-card {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.card { border-radius: var(--r-list); background: var(--glass); box-shadow: var(--tileEdge); }
.card.alist, .card.list, .card.list24, .card.list22 { border-radius: var(--r-list); }
.card.pad18, .card.pad16 { border-radius: var(--r-card); }
.card.s2 { background: var(--glass2); }
.hero { border-radius: var(--r-card); background: var(--solid); box-shadow: var(--heroEdge); }
.hero.glow { background: var(--solid); }
.tile4, .clt, .ctile { border-radius: var(--r-tile); }

/* ---------- числа: тонкие, табличные */
.hero-num, .big48, .big44, .big40, .big36, .big34, .big32, .t7big, .t7sum, .cf-now, .cdnum, .chk-pair .now, .tile4 .tn, .clt .tn, .rdt-n, .shop-hero .big40,
.sumhero .big44 { font-weight: 300; }
.t7c .t7cn { font-weight: 400; letter-spacing: -.02em; }

/* ---------- заголовки: названия 500, подписи 400 */
h1, h2, h3, .h1, .h2, .nm15, .nm1, .tr-nm { font-weight: 500; }
.h1 { font-size: 32px; font-weight: 300; letter-spacing: -.02em; }
.sec2 h2, .sec-h { font-size: 13px; font-weight: 600; color: var(--ink2); }

/* ---------- поиск, чипы, сегменты */
.search { height: 48px; border-radius: 24px; background: var(--glass); box-shadow: var(--tileEdge); color: var(--ink2); }
.search input, .search textarea.sq { font-size: 15px; font-weight: 400; }
.chip { height: 36px; min-height: 36px; padding: 0 14px; border-radius: 18px; background: var(--glass); box-shadow: var(--tileEdge); color: var(--ink); font-size: 13px; font-weight: 500; }
.chip b { font-weight: 500; opacity: .6; margin-left: 2px; }
/* выбранный чип — светлой кромкой, а не заливкой: две белые пилюли подряд (сегмент и чип) спорили */
.chip[aria-checked="true"], .chip[aria-pressed="true"], .chip.on { background: rgba(255,255,255,.14); color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.chip[aria-checked="true"] b, .chip[aria-pressed="true"] b, .chip.on b { opacity: .75; }
.chip.ring { border: 0; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.seg { background: var(--glass2); border-radius: 19px; padding: 3px; }
.seg button { color: var(--ink2); font-weight: 500; }
.seg button[aria-checked="true"], .seg button[aria-selected="true"] { background: var(--ink); color: var(--onSel); box-shadow: none; }

/* ---------- кнопки: лайм только у главной */
.btn { font-weight: 600; font-size: 16px; min-height: 56px; }
.btn.sec { background: var(--glass2); color: var(--ink); box-shadow: none; }
.bb-btn, .hold { font-weight: 600; }
.kpill, .dpill { font-weight: 500; }
.round { background: var(--glass); box-shadow: var(--tileEdge); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

/* ---------- нижнее меню: стеклянная пилюля, подписи без значков, выбранный пункт — белая плашка */
.tabbar { height: 60px; padding: 4px; border-radius: 30px; background: var(--glass); box-shadow: var(--tabShadow);
  top: calc(var(--vp-h, var(--tg-viewport-stable-height, 100vh)) - 80px - var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
.tabbar .plate { left: 4px; top: 4px; height: 52px; width: calc((100% - 8px) / var(--n, 4)); background: var(--sel); border-radius: 26px; }
.tab { height: 52px; font-size: 13px; font-weight: 500; }
.tab svg, .tab .ti { display: none; }
.tab[aria-current="page"] { color: var(--onSel); font-weight: 500; }
@media (max-width: 399px) {
  .tabbar { left: 12px; right: 12px; padding: 4px; }
  .tabbar .plate { left: 4px; width: calc((100% - 8px) / var(--n, 4)); }
  .tab { font-size: 13px; letter-spacing: 0; }
}

/* ---------- листы и окна */
.sheet { background: var(--sheet); border-radius: 32px 32px 0 0; box-shadow: inset 0 1px 0 var(--edge); }
.win { border-radius: 32px 32px 0 0; }

/* ---------- «Сегодня» */
.t7 > .sumhead { height: 48px; }
.t7 > .sumhead + * { margin-top: 8px; }
.t7 .sumhead .sd { font-size: 15px; font-weight: 600; }
.t7todo { height: 60px; padding: 0 12px 0 20px; border-radius: 30px; background: var(--sel); color: var(--onSel); }
.t7todo-t { font-size: 16px; font-weight: 600; }
.t7todo-n { font-size: 22px; font-weight: 500; }
.t7todo > svg { width: 36px; height: 36px; padding: 11px; box-sizing: border-box; border-radius: 18px; background: var(--onSel); color: var(--sel); }
.t7p { border-radius: var(--r-card); background: var(--glass); box-shadow: var(--tileEdge); padding: 20px; transition: transform .14s; }
.t7p:active { background: var(--glass); transform: scale(.97); }
.t7ht { font-size: 16px; font-weight: 500; }
.t7h .chev { width: 36px; height: 36px; border-radius: 18px; background: var(--glass2); align-items: center; justify-content: center; color: var(--ink); }
.t7hero { margin-top: 14px; }
.t7big { font-size: 56px; font-weight: 300; letter-spacing: -.035em; }
.t7of { font-size: 17px; font-weight: 400; margin-left: 4px; }
.t7sum { font-size: 30px; font-weight: 300; letter-spacing: -.03em; }
.t7sub { font-size: 12px; }
.t7cn { font-size: 22px; }
.t7cl { font-size: 12px; }
.t7cl .dot, .t7d-dot { width: 6px; height: 6px; }
.t7c { margin-top: 18px; }
.t7ci { border-left: 0; padding-left: 0; }
.t7strokes { height: 44px; margin-top: 18px; align-items: flex-end; }
.t7s { width: 2px; border-radius: 1px; height: 100%; background: var(--ink3); }
.t7s.t7d-off { background: var(--off); }
.t7s.t7d-good { background: var(--ink3); }
.t7s.t7d-none { background: var(--ink3); }
.t7share, .t7bar { height: 8px; }
.t7we { background: rgba(255,255,255,.18); }

/* плитки «Реклама» и «Конкуренты» в ряд */
.t7 > .t7pair { flex: none; display: flex; gap: 12px; margin-top: 12px; }
.t7pair > .t7p { flex: 1 1 0; min-width: 0; margin-top: 0; padding: 18px; }
.t7pair .t7h .chev { width: 32px; height: 32px; border-radius: 16px; }
.t7pair .t7hr { display: none; }
.t7pair .t7ht { font-size: 15px; }
.t7pair .t7ads { margin-top: 14px; }
.t7pair .t7sum, .t7chero .t7big { font-size: 30px; letter-spacing: -.03em; }
.t7pair .t7ads { flex-direction: column; align-items: flex-start; gap: 12px; }
.t7pair .t7code { align-self: flex-start; }
.t7per { margin-top: 0; }
.t7pair .t7c { flex-direction: column; margin-top: 12px; gap: 6px; }
.t7pair .t7ci { flex-direction: row; align-items: center; gap: 6px; min-height: 0; }
.t7pair .t7cn { font-size: 14px; font-weight: 500; order: 2; }
.t7pair .t7cl { order: 1; }
.t7csplit { margin-top: 14px; }
.t7csplit .vsplit { display: flex; gap: 2px; height: 4px; }
.t7csplit .vsplit span { display: block; border-radius: 2px; min-width: 3px; }
.t7wel { margin-top: 8px; text-decoration: none; }
.t7sup { align-self: flex-start; margin: 2px 0 0 4px; font-size: 14px; font-weight: 500; color: var(--ink2); }
.t7p .viz { position: relative; margin-top: 12px; }
.viz.vbars { display: flex; align-items: flex-end; gap: 3px; }
.viz.vbars i { flex: 1; max-width: 8px; border-radius: 2px; display: block; }
.viz.vsplit { display: flex; gap: 2px; height: 4px; }
.viz .vd { position: absolute; right: -2px; width: 5px; height: 5px; border-radius: 3px; margin-top: -2.5px; }
.viz.vavg .va { position: relative; display: block; height: 2px; border-radius: 1px; background: var(--ink3); margin-top: 8px; }
.viz.vavg .va span { position: absolute; left: 0; top: -.5px; height: 3px; border-radius: 2px; background: var(--ink); }
.viz.vavg .va i { position: absolute; top: -5px; width: 1.5px; height: 12px; border-radius: 1px; background: var(--ink2); }
.viz .vl { position: relative; display: flex; justify-content: space-between; font-size: 10px; color: var(--ink3); margin-top: 6px; white-space: nowrap; }
.vring { position: absolute; right: 0; top: -48px; }

/* запас снизу ровно под меню: меню 60 + отступ 20, затемнение 130 — помещается, прокрутки нет; не помещается — листается */
.screen { padding-bottom: calc(max(0px, 100vh - var(--vp-h, var(--tg-viewport-stable-height, 100vh))) + 146px + var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
.screen.sub, .screen.full { padding-bottom: 24px; }
.nav-fade { height: calc(130px + var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  top: calc(var(--vp-h, var(--tg-viewport-stable-height, 100vh)) - 130px - var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
.screen { padding-top: 8px; }

/* переключатель блоков «Цен» — Товары / Группы / Конкуренты */
.seg.kseg { margin-top: 12px; padding: 3px; border-radius: 19px; background: var(--glass2); }
.seg.kseg button { min-height: 32px; height: 32px; border-radius: 16px; font-size: 13px; font-weight: 500; color: var(--ink2); }
.seg.kseg button[aria-checked="true"] { background: var(--sel); color: var(--onSel); }
.seg.kseg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* шапка «Цен»: «542 товара · 4 кабинета» 15/600 ink, свежесть справа серым */
.hubhead { height: 48px; min-height: 48px; }
.hubhead .hc, .head .titles { font-size: 15px; font-weight: 600; color: var(--ink); }
.hubhead { margin-top: -4px; }
/* вторая пара разделов внутри «Конкурентов» (Товары / Магазины) — как чип: светлая кромка, не вторая белая пилюля */
.cmtabs { height: 36px; padding: 0; background: none; gap: 8px; border-radius: 0; }
.cmtab { border-radius: 18px; background: var(--glass); box-shadow: var(--tileEdge); color: var(--ink); font-size: 13px; font-weight: 500; }
.cmtab[aria-selected="true"] { background: rgba(255,255,255,.14); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }

/* светлая: мелкие подписи 11–13 px плотнее (500) и с лёгкой тенью — иначе тонут в светлом стекле */
:root[data-theme="light"] .t7sub, :root[data-theme="light"] .t7cl, :root[data-theme="light"] .t7hr, :root[data-theme="light"] .meta,
:root[data-theme="light"] .p12, :root[data-theme="light"] .p13, :root[data-theme="light"] .small, :root[data-theme="light"] .mt,
:root[data-theme="light"] .st, :root[data-theme="light"] .hmeta, :root[data-theme="light"] .fresh, :root[data-theme="light"] .ih-l,
:root[data-theme="light"] .ih-s, :root[data-theme="light"] .tl, :root[data-theme="light"] .ts, :root[data-theme="light"] .rcab,
:root[data-theme="light"] .sec2 h2, :root[data-theme="light"] .ghead .gsub { font-weight: 500; text-shadow: var(--textShadow); }
:root[data-theme="light"] .tabbar .plate, :root[data-theme="light"] .t7todo { box-shadow: 0 1px 2px rgba(40,46,38,.12); }

/* ---------- карточка товара */
.ihead.withphoto { display: block; flex: none; margin-top: 4px; }
.iphoto { position: relative; display: block; box-sizing: border-box; margin: 0 auto; width: min(100%, 46.5vh); aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 28px; background: var(--glass2); transform-origin: 50% 0; will-change: transform, opacity; }
/* Рамка 3:4 всегда (карточки WB и Ozon одной высоты, высота не прыгает при загрузке); картинка целиком, без обрезки, по краям — подложка токеном. */
.iphoto .ip { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ihead.withphoto .ihtext { margin-top: 18px; }
.ihead .hname { font-size: 20px; font-weight: 500; line-height: 1.3; }
.imini-wrap { position: sticky; top: 4px; height: 0; z-index: 6; flex: none; }
.imini { position: absolute; left: 0; right: 96px; top: -40px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 4px; border: 0; border-radius: 20px;
  background: var(--glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--tileEdge); color: var(--ink); text-align: left;
  opacity: 0; transform: translateY(-8px) scale(.96); pointer-events: none; transition: opacity var(--dur-slow) var(--ease-std), transform var(--dur-slow) var(--ease-std); font: 500 13px 'Manrope', sans-serif; }
.imini-wrap.on .imini { opacity: 1; transform: none; pointer-events: auto; }
.imini .imth { flex: none; width: 32px; height: 32px; border-radius: 16px; overflow: hidden; background: #fff; }
.imini .imth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imini .imn { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.imini .imp { flex: none; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .imini { transition: none; } .iphoto { will-change: auto; } }

/* цена у покупателя — без карточки, тонкое крупное число; Цель и «В кабинете» — две стеклянные плитки */
.ihero { background: none; box-shadow: none; padding: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ihero::before, .ihero::after { display: none; }
.ihero .hero-num { font-size: 56px; font-weight: 300; letter-spacing: -.035em; }
.ihero .ih-cap, .ih-cap { font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink2); }
.ih-cols { display: flex; gap: 10px; margin-top: 18px; border-top: 0; padding-top: 0; }
.ih-cols > .ih-col { flex: 1; min-width: 0; padding: 14px; border-radius: var(--r-tile); background: var(--glass); box-shadow: var(--tileEdge);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.ih-sep { display: none; }
.ih-v { font-size: 26px; font-weight: 300; letter-spacing: -.02em; }
.ih-l, .ih-s { font-size: 12px; color: var(--ink2); }
.ih-chip, .stale-tag { height: 32px; padding: 0 12px; border-radius: 16px; background: var(--glass); box-shadow: var(--tileEdge); border: 0; font-size: 12px; font-weight: 500; color: var(--ink2); }
.ih-go { background: var(--glass); }
.viz.ivz { margin-top: 10px; }

/* график цены: статичный, подсказка по нажатию над точкой */
.gcard { background: var(--glass); border-radius: var(--r-card); box-shadow: var(--tileEdge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.tpill { height: 28px; padding: 0 12px; border-radius: 14px; border: 0; background: transparent; color: var(--ink2); font: 500 12px 'Manrope', sans-serif; }
.tpill[aria-checked="true"] { background: var(--sel); color: var(--onSel); }
.pctip { background: var(--ink); color: var(--onSel); border-radius: 12px; box-shadow: none; }
.pctip span { color: inherit; opacity: .7; }
.pchart .pctip { transform: translate(-50%, -100%); right: auto; padding: 6px 10px; background: var(--ink); color: var(--onSel); border-radius: 12px; box-shadow: none; z-index: 3; }
.pchart .pctip b { color: var(--onSel); font-weight: 600; }
.pchart .pcdot { background: var(--ink); border: 3px solid var(--sheet); width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.pchart .pcsel { background: var(--ink2); }
.t7pair .t7ci { flex: none; }

/* ===== правки порции 1 по сверке Дизайнера (07.11) ===== */
/* 1. светлая: выбранная внутренняя вкладка «Конкурентов» — как у верхнего переключателя: белый фон, тёмный текст */
:root[data-theme="light"] .cmtab[aria-selected="true"] { background: var(--sel); color: #17181A; box-shadow: none; }
/* 2. плитки «Цель» и «В кабинете» делят ряд поровну */
.ihero .ih-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; padding-top: 0; border-top: 0; width: 100%; }
.ihero .ih-cols.one { grid-template-columns: minmax(0, 1fr); }
.ih-cols > .ih-col { min-width: 0; width: auto; }
/* 3. «Сегодня» на низких экранах: плашки ужимаются, нижний отступ — ровно под меню */
.ksub { font-size: 13px; color: var(--ink2); margin-top: 6px; }
.ksec { display: flex; gap: 8px; margin: 22px 4px 10px; font-size: 13px; font-weight: 600; color: var(--ink2); } .ksec span { font-weight: 400; }
.todogroups > .ksec:first-child { margin-top: 18px; }
.todogroups .card.plist { margin-top: 0; }
@media (max-height: 800px) {
  .t7 > .t7todo { height: 52px; margin-top: 10px; }
  .t7 > .t7p, .t7 > .t7pair { margin-top: 10px; }
  .t7p { padding: 16px; }
  .t7pair > .t7p { padding: 14px; }
  .t7big { font-size: 46px; }
  .t7strokes { height: 32px; margin-top: 12px; }
  .t7c { margin-top: 12px; }
  .t7pair .t7ads { margin-top: 8px; gap: 8px; }
  .t7pair .t7c { margin-top: 8px; gap: 4px; }
  .t7pair .t7sum, .t7chero .t7big { font-size: 26px; }
  .t7 > .t7sys, .t7 > .banner { margin-top: 8px; }
}
@media (max-height: 700px) {
  .t7 > .sumhead { height: 40px; }
  .t7big { font-size: 40px; }
  .t7strokes { height: 24px; }
  .t7pair .t7per { display: none; }
  .t7pair .t7sub { font-size: 12px; }
  .t7 > :last-child { margin-bottom: 0; }
}
.t7 > :last-child { margin-bottom: 0; }
/* 4. плашка «Ставлю цель… Отменить»: в светлой текст #17181A, подпись 56 % от него */
:root[data-theme="light"] .undo, :root[data-theme="light"] .undo b, :root[data-theme="light"] .undo .ub { color: #17181A; }
:root[data-theme="light"] .undo .us { color: rgba(23,24,26,.56); }
:root[data-theme="light"] .undo .ubar { background: #17181A; }
.undo { background: var(--sel); color: var(--onSel); }
.undo b, .undo .ub { color: var(--onSel); }
.undo .us { color: var(--onSel); opacity: .56; }
/* 5. верх «Сегодня», «Цен», «Конкурентов» — одна строка без значка ₽ */
.sumhead .rubm, .hubhead .rubm { display: none; }
/* 6. цветного текста нет: цвет — только у точки */
.banner.warn .t, .outside .ot, .banner.off .t, .banner.none .t { color: var(--ink); }
.banner.warn .s, .banner.off .s, .banner.none .s, .outside .os { color: var(--ink2); }
.chip .t-off, .chip .t-warn, .chip .t-good, .hubhead .hc .t-off, .hubhead .hc .t-warn { color: inherit; }
.chip .t-off::before, .chip .t-warn::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 3px; margin-right: 5px; vertical-align: 1px; }
.chip .t-off::before { background: var(--off); } .chip .t-warn::before { background: var(--warn); }
.chip .t-off, .chip .t-warn { color: var(--ink2); }
/* 7. чипы: справа затухание */
.chips:not(.wrap) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right: 24px; }
/* 8. под нижними кнопками карточки — сплошная подложка-затухание (.fadeb макета) */
.bb-fade, .bbar.on-sheet .bb-fade { background: linear-gradient(180deg, transparent, var(--ground2) 55%); }
/* цветной текст не используем нигде: смысл — точкой/значком, слова — ink2 */
.t-good, .t-off, .t-warn { color: var(--ink2); }
.ih-cols > .ih-col.ih-go { background: var(--glass); box-shadow: var(--tileEdge); border: 0; color: var(--ink); }
.ih-go .tgo { color: var(--ink2); }

/* ===== «Реклама» — формы как у «Цен» (07.11, владелец: «очень отличается форма плашек») ===== */
.kslist { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--tileEdge); border-radius: var(--r-list); padding: 0 16px; margin-top: 12px; }
.clslist .clgroup { flex: none; }
.clslist .clgroup + .clgroup { border-top: 1px solid var(--edge); }
.clslist button.sec-h.clhead { width: 100%; min-height: 72px; padding: 12px 0; border-radius: 0; background: none; box-shadow: none; }
/* поиск — как на «Ценах»: пилюля h48, радиус 24, кромка edge */
.clsrch { height: 48px; border-radius: 24px; background: var(--glass); box-shadow: var(--tileEdge); padding: 0 0 0 16px; gap: 10px; margin-top: 12px;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
:root[data-theme="light"] .clsrch { background: var(--glass); }
.clsrch > svg { width: 18px; height: 18px; }
.clsq { height: 48px; font-size: 15px; font-weight: 400; }
/* плитки «Срочно / Отключить / Проверить»: радиус 22, стекло, подпись одной строкой, без «i» */
.clt { border-radius: var(--r-tile); background: var(--glass); box-shadow: var(--tileEdge); min-height: 92px;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.clt[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.clt .tl { white-space: nowrap; font-size: 13px; font-weight: 500; }
.clt .tn { font-size: 26px; font-weight: 300; }
.clt .ts { font-size: 12px; font-weight: 500; }
.clti { display: none; }
/* переключатель 7 / 14 дней — тот же сегмент, что «Товары / Группы / Конкуренты» */
.seg.clseg { margin-top: 12px; padding: 3px; border-radius: 19px; background: var(--glass2); }
.seg.clseg button, .seg.clseg button[aria-checked="true"] { min-height: 32px; height: 32px; border-radius: 16px; font-size: 13px; font-weight: 500; }
.seg.clseg button { color: var(--ink2); }
.seg.clseg button[aria-checked="true"] { background: var(--sel); color: var(--onSel); }

/* плашка-статус (v8): точка цвета смысла + текст ink2, без кромки поля */
.note.stplate { background: var(--glass); box-shadow: none; border-radius: 18px; padding: 12px 16px; gap: 10px; align-items: center; color: var(--ink2); }
.note.stplate .dot { width: 8px; height: 8px; border-radius: 4px; flex: none; }
.note.stplate span:last-child { color: var(--ink2); font-size: 13px; }

/* Гайд админам: номер шага — начертание 500 (дизайнер 07.11). */
.faq-steps li::before { font-weight: 500; }

/* «Реклама» — верх на тех же Y, что у «Цен» (дизайнер 07.11): .screen.sub (app.css:152) давал 14 px, у «Цен» 8. */
.page[data-tab="/ads"] > .screen.sub { padding-top: 8px; }

/* Карточка тура и показа — сплошная, как лист: через стекло просвечивал текст экрана (проверка 07.11). */
.tour-card { background: var(--sheet); }

/* Верх экранов на одних Y (замер дизайнера 07.11, 390):
   «Сегодня» — шапка на 4, как у «Цен» и «Рекламы» (.hubhead: margin-top -4); блок под ней остаётся на месте (+4). */
.t7 > .sumhead { margin-top: -4px; }
.t7 > .sumhead + * { margin-top: 12px; }
/* Первый блок под переключателем «Товары / Группы / Конкуренты» — 14 px от его низа (как «Групповые цены» у «Групп»). */
.stick .sbar { margin-top: 14px; }
.cmscr .cmtabs { margin-top: 14px; }
/* Окна: заголовок h1 на y 48 у всех — без лишних отступов у «Нужно решить» и «Зависимостей» (было 52). */
.t7list .h1 { margin-top: 0; }
.dp-title { margin: 0; }

/* «Новая группа»: полоска шагов на y 48, как верх остальных окон (дизайнер 07.11): было 50 из-за margin-top 2. */
.gsteps { margin-top: 0; }

/* ---------- T13 п.1: кнопка внизу. Переход цвета только у уже видимой кнопки (hold, active:false → true на том же экране);
   при первом показе и смене владельца bottombar.js ставит .nt — кнопка сразу в конечном цвете, без «доезжания» из серого. */
.bb-btn { transition: transform 100ms, background-color 160ms, color 160ms; }
.bb-btn.nt { transition: transform 100ms; }

/* ---------- T13 п.2: закреплённые поиск и фильтры без своей заливки. Раньше сплошной var(--ground) на странице с градиентом и
   пятном света давал прямоугольную подложку с острыми углами (видна в светлой теме). Теперь заливки нет, а содержимое, уезжающее
   под блок, гасит маска ::before: поле под блоком полностью прозрачное сверху, к низу блока плотность 0 -> так же, как у .nav-fade
   работает градиент, только без цвета: размывается и скрывается сам список (backdrop-filter с маской), цвета подложки нет. */
.sbar.on, .stick { background: none; }
.stick::before, .sbar.on::before { content: ''; position: absolute; inset: 0 0 -16px 0; z-index: -1; pointer-events: none;
  /* Дизайнер 07.11 (правка П2b): БЕЗ blur — в Chrome маска не смягчает размытие фона, его кромка читалась резкой полосой.
     Тонировка .9 цветом фона (на экранах и в окнах --ground (у .win фон — градиент от --ground), в листах --sheet: --veil) и маска в 0 на нижних 16 px: кромки нет,
     строки под блоком не читаются. Первая строка background — запас для движка без color-mix (блок сплошной). */
  background: var(--veil, var(--ground)); background: color-mix(in srgb, var(--veil, var(--ground)) 90%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 16px), transparent 100%); }
.sheet { --veil: var(--sheet); }          /* у .win фон — градиент от --ground, вуаль по умолчанию --ground: цвет совпадает с фоном у верха окна */
.stick .sbar.on::before { content: none; }
.stick::after { background: none; }
/* Причина видимой рамки под «Товары / Магазины» (T13 п.2): в светлой теме comp.css красит .cmtabs в --surface2 селектором
   :root[data-theme="light"] .cmtabs — он сильнее строки выше, и «background: none» не действовал. Подложки у блока нет. */
:root[data-theme="light"] .cmtabs { background: none; }

/* ===== T13 П2 (07.11) ===== */
/* п.3: «Товары / Магазины» внутри «Конкурентов» — тот же .seg, что верхний переключатель (одна дорожка, внутри плашка), но ниже: 36 px. */
.cmscr .cmtabs.seg { height: 36px; padding: 3px; gap: 0; border-radius: 18px; background: var(--glass2); }
:root[data-theme="light"] .cmscr .cmtabs.seg { background: var(--glass2); }
.cmscr .cmtabs.seg .cmtab { height: 30px; min-height: 30px; border-radius: 15px; background: transparent; box-shadow: none; color: var(--ink2); font-size: 13px; font-weight: 600; }
.cmscr .cmtabs.seg .cmtab[aria-selected="true"], :root[data-theme="light"] .cmscr .cmtabs.seg .cmtab[aria-selected="true"] { background: var(--sel); color: var(--onSel); box-shadow: none; }
.cmwhy2 { color: var(--ink2); }
/* п.4: выбранный фильтр виден и в светлой теме: там белая заливка .14 не видна, берём тёмную (кромка 1px, заливка .14) */
:root[data-theme="light"] .chip.on, :root[data-theme="light"] .chip[aria-pressed="true"] { background: rgba(23,24,26,.14); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23,24,26,.55); }
/* п.6: под главной кнопкой затемнение в цвет фона, как .nav-fade, — сплошное от верха кнопки до меню (FADE_EXTRA 40 px над кнопкой — плавный вход) */
.bb-fade { background: linear-gradient(180deg, transparent 0, var(--ground2) 40px); }
/* п.9: «Служебное» — подпись секции, как у других (отступ 8, ink2, не крупно); счётчик уведомлений — пилюля */
.msec { margin: 16px 4px 8px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.mpill { min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px; justify-content: center; background: var(--sel); color: var(--onSel); font-size: 13px; font-weight: 600; }
:root[data-theme="light"] .mpill { color: #17181A; }
/* п.9: верх «Ещё» — тот же размытый слой под шапкой Telegram, что у закреплённых блоков (ни острой кромки карточки, ни читаемых строк) */
.topveil { opacity: 0; transition: opacity 120ms; }
.topveil.on { opacity: 1; }
.topveil { position: sticky; top: var(--tg-content-safe-area-inset-top, 0px); z-index: 6; height: 36px; margin: 0 -16px -36px; pointer-events: none;
  background: var(--veil, var(--ground)); background: color-mix(in srgb, var(--veil, var(--ground)) 90%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 16px), transparent 100%); }

/* ===== T13 П2, п.11: лист магазина конкурента ===== */
/* Несвежая цена конкурента — ink2 (подпись «от 19:34» тоже ink2): не красная тревога, а «старше порога». */
.shop-pm.stale, .shop-xp.stale { color: var(--ink2); }
/* Под «Изменить конкурентов» отступ не нужен: строка 52 px сама держит низ, а .afx добавлял ещё 18 px. */
.shop-pf.has-edit .afx { padding-bottom: 0; }
/* Верхний слой листа: строки, уезжающие вверх, гаснут под ручкой без острой кромки (тот же слой, что .topveil «Ещё»; включается прокруткой листа). */

/* ===== T13 П2b ===== */
/* Шеврон строки «Ещё» стоял на 2–4 px выше центра: .chev — строчный span, svg садился на базовую линию. Делаем флекс-центр. */
.row.r56 > .chev { display: flex; align-items: center; align-self: center; }
.row.r56 > .chev > svg { display: block; }

/* ===== T14 (08.11): движение по MOTION.md. Двигаются только transform и opacity. ===== */
/* Живые числа (js/counter.js). Цифры табличные (body), ширина ячейки = ширина цифры: ширина числа во время прокрутки не меняется.
   Ячейка — окно высотой 1.15em, в котором едет лента 0–9 ×2 (counter.LINE = 1.15). Поля -.575em схлопывают её «поле-коробку» в
   ноль по высоте, поэтому строка не вырастает и соседи не сдвигаются; vertical-align .37em ставит базовую линию цифры на базовую
   линию строки (замер в Chrome по Manrope 14–56 px: разброс ±0,015em, то есть меньше 1 px на крупных числах). */
.lv-n { white-space: pre; }
.lv-c { display: inline-block; overflow: hidden; height: 1.15em; margin: -.575em 0; vertical-align: .37em; line-height: 1.15; }
.lv-t { display: block; will-change: transform; }
.lv-g { display: block; height: 1.15em; line-height: 1.15; }
.lv-n.xf { display: inline-block; position: relative; }
.lv-x.old { position: absolute; left: 0; top: 0; }        /* ширину строки задаёт только новое число */
/* Метка изменения («+3», «−1 600 ₽»): серая, мелкая, без цвета; держится до ухода с экрана. */
.lv-d { margin-left: 6px; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1; color: var(--ink2); vertical-align: top; white-space: nowrap; }
/* Рост от основания / слева: масштабируем вокруг нужного края (enter.js). */
.t7s, .viz.vbars i { transform-origin: 50% 100%; }
.viz.vsplit, .viz.vsplit > span { transform-origin: 0 50%; }
/* Нажатие: плашка до 0,97, круглая кнопка до 0,9, 120 мс; отпустили — возвращается. */
.t7p, .t7todo, .clt, .hcard { position: relative; transition: transform 120ms var(--ease); }
/* Сжатая плашка уменьшает и область нажатия: палец у кромки оказался бы вне неё, и клик потерялся бы. Пока держат — невидимый
   слой возвращает прежнюю область (6 px с каждой стороны покрывают сжатие 3% плашки до ~200 px шириной на сторону). */
.t7p:active::before, .t7todo:active::before, .clt:active::before, .hcard:active::before { content: ''; position: absolute; inset: -8px; z-index: -1; }
.t7p:active, .t7todo:active, .clt:active, .hcard:active { transform: scale(.97); }
.t7h .chev, .t7todo > svg { transition: transform 120ms var(--ease); }
.t7h:active .chev, .t7todo:active > svg { transform: scale(.9); }
/* Меню: белая пилюля переезжает к нажатому пункту с лёгкой пружиной за 420 мс. Ширину не анимируем (не transform):
   fitPlate ставит её сразу, она меняется на единицы px. */
.tabbar .plate { transition: transform 420ms cubic-bezier(.34, 1.45, .5, 1); z-index: 0; }
/* Подписи — над пилюлей; цвет меняется в самом начале переезда (90 мс), а не вместе с ним за 200 мс: иначе в первом кадре
   «С» уже серая, а пилюля ещё под ней. */
.tab { z-index: 1; transition: color 90ms linear; }

/* ===== T14 П2: «Уменьшение движения» не делает приложение мёртвым. Общее правило app.css («всё 0 мс») остаётся основой: ничто не
   едет, не масштабируется, не пружинит, ленты цифр нет. Поверх него — мягкие проявления по прозрачности за 160 мс. ===== */
@media (prefers-reduced-motion: reduce) {
  .page { transition-duration: 160ms !important; }                                   /* смена вкладки: motion.js ставит opacity inline */
  .scrim, .scrim.in { transition: opacity 160ms ease-out !important; }
  .sheet, .sheet.in { transform: none; transition: opacity 160ms ease-out !important; }
  .sheet { opacity: 0; } .sheet.in { opacity: 1; }                                    /* лист не выезжает, а проявляется; закрытие — ui.js (opacity 160 мс) */
  .top-note, .top-note.in { transition: opacity 160ms ease-out !important; }
  .clbin { transition: opacity 160ms ease-out !important; }                           /* раскрытие: прозрачность (grid-строки и шеврон сразу) */
  .fbody:not([hidden]) .fbin, .clext-body:not([hidden]) { animation: t14fade 160ms ease-out !important; }
  .tabbar .plate { transition: transform 160ms ease-out !important; }                /* пилюля меню: плавно, без пружины */
  .t7p:active, .t7todo:active, .clt:active, .hcard:active, .t7h:active .chev, .t7todo:active > svg { transform: none; }
  .spin, .bb-btn.prog::before { animation-duration: 2400ms !important; }            /* индикатор «идёт» не замирает (было: 0 мс) */
}
@keyframes t14fade { from { opacity: 0; } to { opacity: 1; } }

/* ===== T15: «плашка → экран» (js/plate.js). Слой-призрак на весь экран: виден только в вырезе clip-path, который растёт от плашки
   до экрана; фон — var(--solid2) с кромкой 1 px (--edge); нажатия проходят сквозь него. Копия плашки внутри — без собственного фона (он уже у призрака),
   иначе стекло легло бы вдвойне. ===== */
.pg-ghost { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: var(--edge); pointer-events: none; overflow: hidden; }   /* кромка плашки: слой цвета --edge, заливка на 1 px меньше */
.pg-fill { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--solid2); }
.pg-ghost * { pointer-events: none; transition: none !important; }
.pg-clone.t7p { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ===== T16 (08.11): движение на остальных экранах (js/seg.js, enter.js). Двигаются только transform и opacity. ===== */
/* Переключатель .seg: белая плашка — отдельный слой (seg.js вставляет span.segpl), в покое стоит по --segi (номер выбранного) и --segn
   (сколько сегментов); едет за 240 мс (transform). Выбранная кнопка своей заливки не имеет — её рисует плашка; подпись кнопки над плашкой. */
.seg.has-pl { position: relative; }
.seg.has-pl > .segpl { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--segn, 2)); border-radius: 999px;
  background: var(--ink); transform: translateX(calc(var(--segi, 0) * 100%)); pointer-events: none; z-index: 0; }
.seg.kseg.has-pl > .segpl, .seg.clseg.has-pl > .segpl, .seg.cmtabs.has-pl > .segpl { background: var(--sel); }
.seg.has-pl > button { position: relative; z-index: 1; }
.seg.has-pl > button[aria-checked="true"], .seg.has-pl > button[aria-selected="true"] { background: transparent !important; }
/* Чип-фильтр: заливка и обводка выбранного — слой ::before; меняется его прозрачность за 160 мс (цвет не анимируем). Обводка — рамка слоя.
   Чипы .s1 (журнал) и .ring (кольцо «спрашиваем») устроены иначе и остаются как были. */
.chip:not(.s1):not(.ring) { isolation: isolate; }
.chip:not(.s1):not(.ring)::before { content: ''; position: absolute; inset: 0; z-index: -1; box-sizing: border-box; border-radius: inherit; pointer-events: none;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.55); opacity: 0; transition: opacity 160ms ease-out; }
:root[data-theme="light"] .chip:not(.s1):not(.ring)::before { background: rgba(23,24,26,.14); border-color: rgba(23,24,26,.55); }
.chip[aria-checked="true"]:not(.s1):not(.ring), .chip[aria-pressed="true"]:not(.s1):not(.ring), .chip.on:not(.s1):not(.ring),
:root[data-theme="light"] .chip.on:not(.s1):not(.ring), :root[data-theme="light"] .chip[aria-pressed="true"]:not(.s1):not(.ring) { background: var(--glass); box-shadow: none; }
.chip[aria-checked="true"]:not(.s1):not(.ring)::before, .chip[aria-pressed="true"]:not(.s1):not(.ring)::before, .chip.on:not(.s1):not(.ring)::before { opacity: 1; }
/* Ряд пересобран экраном (элемент новый): слой проявляется / гаснет анимацией, а не переходом. */
.chip.fx-in::before { animation: t16fade 160ms ease-out; }
.chip.fx-out::before { animation: t16fade 160ms ease-out reverse; }
@keyframes t16fade { from { opacity: 0; } to { opacity: 1; } }
/* Цветная полоска строки «Рекламы» растёт слева вместе со строкой (enter.js rowsIn). */
.clbar { transform-origin: 0 50%; }
@media (prefers-reduced-motion: reduce) {
  .chip:not(.s1):not(.ring)::before { transition: opacity 160ms ease-out !important; }
  .chip.fx-in::before, .chip.fx-out::before { animation-duration: 160ms !important; }
}

/* ===== Единое движение однотипного, что T14–T16 не трогали (08.11) ===== */
/* Раскрытия: высота (grid-template-rows) и шеврон — одна длительность и кривая у всех шести аккордеонов и шевронов-строк */
.cmbody, .afb, .clbody, .fbody { transition: grid-template-rows var(--dur) var(--ease-std); }
.clbin { transition: opacity var(--dur-fast) var(--ease-std); }
.cmfold .chev, .aftog > .chev, .cltog .chev, .ftog .chev, .ntsplit .chev, .clext-tog .chev, .grow .chev, .stock-card .chev, button.sec-h .chev,
.shop-how .chev, .faq-q svg, .cmp-chev { transition: transform var(--dur) var(--ease-std); }
.sw .kn { transition: transform var(--dur) var(--ease-std); }
/* Листы, скрим, плашки сверху: приход slow, уход close (окна gesture.js уже 320 / 240) */
.scrim { transition: opacity var(--dur-close) var(--ease-in); }
.scrim.in { transition: opacity var(--dur-slow) var(--ease-std); }
.sheet { transition: transform var(--dur-close) var(--ease-in); }
.sheet.in { transition: transform var(--dur-slow) var(--ease-std); }
.top-note { transition: transform var(--dur-close) var(--ease-in), opacity var(--dur-close) var(--ease-in); }
.top-note.in { transition: transform var(--dur-slow) var(--ease-std), opacity var(--dur-slow) var(--ease-std); }
.res-swap { animation-duration: var(--dur); animation-timing-function: var(--ease-std); }
/* Полосы хода — одна длительность */
.bbar > span, .maint-card .mbar > span { transition: width var(--dur-slow) var(--ease-std); }
.tour-hole, .tour-card { transition-duration: var(--dur); }

/* ===== T17: плашки сверху сплошные, полоса «Бот забирает заявку…» живая ===== */
.top-note { background: var(--solid2); }     /* край — прежний --noteShadow (inset --edge); у .err красный из app.css */
.bbar.idle { position: relative; }
.bbar.idle > span { width: 0 !important; }
.bbar.idle::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 35%; border-radius: inherit;
  background: var(--ink2); opacity: .5; transform: translateX(-100%); animation: bbarRun 1.2s ease-in-out infinite; }
@keyframes bbarRun { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) {
  .bbar.idle::after { width: 100%; transform: none; animation: bbarPulse 1.2s ease-in-out infinite; }
  @keyframes bbarPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
}

/* ===== T19: вопрос Ozon «товар попадёт в акцию» — лист выбора (screens/ozask.js) и строка исхода на итоге заявки.
   Строки-варианты сплошные (--solid), радиус 20, от 64 px; выбранная — обводка 1.5 px --ink и кружок --sel. Цвет не анимируем
   (правило T16): обводка и заливка кружка — слоями ::after, смена выбора — их прозрачность за 160 мс (при reduce — сразу).
   Ответ ушёл — варианты гаснут в --ink3. Лайм — только у MainButton (bottombar). ===== */
.ask-head { gap: 4px; }
.ask-until { font-size: var(--fs-12); color: var(--ink2); }
.ask-until.warn { color: var(--warn); }
.ask-item { flex: none; display: flex; align-items: center; gap: 12px; }
.ask-itxt { min-width: 0; gap: 3px; }
.ask-why { margin: 0; font-size: var(--fs-13); line-height: 1.45; color: var(--ink2); }
.ask-note { margin: 0; }
.ask-opts { flex: none; display: flex; flex-direction: column; gap: 8px; }
.ask-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; width: 100%;
  padding: 12px 16px; border: 0; border-radius: var(--r-20); background: var(--solid); color: var(--ink); text-align: left; font: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ask-opt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--ink); opacity: 0;
  pointer-events: none; transition: opacity 160ms var(--ease-std); }
.ask-opt.on::after { opacity: 1; }
.ask-dot { position: relative; flex: none; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--ink3); }
.ask-dot::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; box-sizing: border-box; border: 6px solid var(--sel);
  background: var(--onSel); opacity: 0; transition: opacity 160ms var(--ease-std); }
.ask-opt.on .ask-dot::after { opacity: 1; }
.ask-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ask-t { font-size: var(--fs-14); font-weight: 600; line-height: 1.3; }
.ask-s { font-size: var(--fs-12); line-height: 1.4; color: var(--ink2); }
.ask-warn { color: var(--warn); }
.ask-opt.dead, .ask-busy .ask-opt { cursor: default; }
.ask-opt.dead .ask-t, .ask-opt.dead .ask-s, .ask-opt.dead .ask-warn, .ask-busy .ask-opt .ask-t, .ask-busy .ask-opt .ask-s,
.ask-busy .ask-opt .ask-warn { color: var(--ink3); }
.ask-busy .ask-opt::after { border-color: var(--ink3); }
.ask-out { flex: none; display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 14px 16px; border-radius: var(--r-20);
  background: var(--solid); font-size: var(--fs-13); line-height: 1.45; color: var(--ink2); }
.ask-out.t-good { color: var(--good); }
.ask-out.t-warn { color: var(--warn); }
.ask-mk { flex: none; width: 18px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .ask-opt::after, .ask-dot::after { transition: none; } }