/* ═══════════════════════════════════════════════════════════════════════════════════════════
   СКИДОЧНЫЙ ДВОР · ВИЗУАЛЬНЫЙ СЛОЙ v179 («Двор при дневном свете»)
   Ложится ПОВЕРХ стилей index.html. Логику не трогает: только вид, глубина, свет, движение,
   раскладка по ширинам. Фирменный синий — решение владельца 03.08 («верни наш синий») — сохранён.

   ОДИН СВЕТ. Виртуальное солнце слева-сверху (≈ −35°, высота 55°), тёплое утреннее.
   Следствия везде одинаковые: верхняя кромка поверхности ловит блик, тень падает вниз-вправо,
   чем выше уровень — тем длиннее и мягче тень. Фото товаров сведены к тому же свету (конвейер).

   УРОВНИ ГЛУБИНЫ: фон (двор) → мир (лента, полосы) → поверхность (карточки) → содержимое →
   плавающее (шапка, панель вкладок, кнопка корзины) → лист/окно → тост.

   ДВИЖЕНИЕ — пружины, рассчитанные заранее (tools/skidvor/visual/pruzhiny.py) и записанные
   кривыми linear(): браузер ведёт их сам, без JS в кадре. Крупное — тяжелее и без отскока,
   мелкое — быстрее и с едва заметным доходом. Где linear() не понимают — прежние кривые.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* пружины: рассчитаны tools/skidvor/visual/pruzhiny.py — не править руками */
  --spring-press: linear(0.0000 0.0%, 0.0235 2.1%, 0.0731 4.2%, 0.1395 6.2%, 0.2147 8.3%, 0.2935 10.4%, 0.3721 12.5%, 0.4477 14.6%, 0.5187 16.7%, 0.5840 18.7%, 0.6432 20.8%, 0.6961 22.9%, 0.7430 25.0%, 0.7840 27.1%, 0.8196 29.2%, 0.8502 31.2%, 0.8764 33.3%, 0.8987 35.4%, 0.9174 37.5%, 0.9332 39.6%, 0.9463 41.7%, 0.9571 43.8%, 0.9660 45.8%, 0.9733 47.9%, 0.9792 50.0%, 0.9840 52.1%, 0.9878 54.2%, 0.9909 56.2%, 0.9933 58.3%, 0.9952 60.4%, 0.9966 62.5%, 0.9977 64.6%, 0.9986 66.7%, 0.9992 68.8%, 0.9997 70.8%, 1.0000 72.9%, 1.0002 75.0%, 1.0004 77.1%, 1.0004 79.2%, 1.0005 81.2%, 1.0005 83.3%, 1.0005 85.4%, 1.0005 87.5%, 1.0004 89.6%, 1.0004 91.7%, 1.0004 93.8%, 1.0003 95.8%, 1.0003 97.9%, 1.0000 100.0%);
  --dur-press: 169ms;  /* m=0.6 k=1918.3 c=61.07 ζ=0.9 перелёт 0.05% */
  --spring-release: linear(0.0000 0.0%, 0.0197 2.1%, 0.0668 4.2%, 0.1325 6.3%, 0.2096 8.3%, 0.2925 10.4%, 0.3768 12.5%, 0.4595 14.6%, 0.5380 16.7%, 0.6110 18.8%, 0.6775 20.8%, 0.7370 22.9%, 0.7894 25.0%, 0.8347 27.1%, 0.8735 29.2%, 0.9062 31.3%, 0.9332 33.3%, 0.9553 35.4%, 0.9729 37.5%, 0.9867 39.6%, 0.9973 41.7%, 1.0052 43.8%, 1.0107 45.8%, 1.0145 47.9%, 1.0167 50.0%, 1.0178 52.1%, 1.0180 54.2%, 1.0175 56.2%, 1.0166 58.3%, 1.0154 60.4%, 1.0140 62.5%, 1.0125 64.6%, 1.0110 66.7%, 1.0095 68.8%, 1.0081 70.8%, 1.0068 72.9%, 1.0056 75.0%, 1.0046 77.1%, 1.0036 79.2%, 1.0028 81.2%, 1.0022 83.3%, 1.0016 85.4%, 1.0011 87.5%, 1.0007 89.6%, 1.0004 91.7%, 1.0002 93.8%, 1.0000 95.8%, 0.9999 97.9%, 1.0000 100.0%);
  --dur-release: 379ms;  /* m=0.6 k=367.8 c=23.18 ζ=0.78 перелёт 1.8% */
  --spring-select: linear(0.0000 0.0%, 0.0218 2.1%, 0.0726 4.2%, 0.1420 6.2%, 0.2222 8.3%, 0.3072 10.4%, 0.3924 12.5%, 0.4748 14.6%, 0.5522 16.7%, 0.6233 18.8%, 0.6872 20.8%, 0.7439 22.9%, 0.7933 25.0%, 0.8358 27.1%, 0.8719 29.2%, 0.9021 31.2%, 0.9271 33.3%, 0.9474 35.4%, 0.9637 37.5%, 0.9766 39.6%, 0.9866 41.7%, 0.9941 43.8%, 0.9997 45.8%, 1.0037 47.9%, 1.0063 50.0%, 1.0080 52.1%, 1.0089 54.2%, 1.0092 56.2%, 1.0091 58.3%, 1.0087 60.4%, 1.0081 62.5%, 1.0074 64.6%, 1.0066 66.7%, 1.0058 68.8%, 1.0050 70.8%, 1.0043 72.9%, 1.0036 75.0%, 1.0030 77.1%, 1.0025 79.2%, 1.0020 81.2%, 1.0016 83.3%, 1.0013 85.4%, 1.0010 87.5%, 1.0007 89.6%, 1.0005 91.7%, 1.0004 93.7%, 1.0002 95.8%, 1.0001 97.9%, 1.0000 100.0%);
  --dur-select: 319ms;  /* m=0.8 k=755.6 c=40.32 ζ=0.82 перелёт 0.92% */
  --spring-card: linear(0.0000 0.0%, 0.0199 2.1%, 0.0674 4.2%, 0.1327 6.3%, 0.2083 8.3%, 0.2886 10.4%, 0.3695 12.5%, 0.4480 14.6%, 0.5222 16.7%, 0.5908 18.8%, 0.6531 20.8%, 0.7088 22.9%, 0.7581 25.0%, 0.8010 27.1%, 0.8381 29.2%, 0.8698 31.2%, 0.8965 33.3%, 0.9189 35.4%, 0.9374 37.5%, 0.9527 39.6%, 0.9650 41.7%, 0.9749 43.8%, 0.9827 45.8%, 0.9888 47.9%, 0.9935 50.0%, 0.9970 52.1%, 0.9996 54.2%, 1.0014 56.2%, 1.0027 58.3%, 1.0035 60.4%, 1.0039 62.5%, 1.0041 64.6%, 1.0041 66.7%, 1.0039 68.8%, 1.0037 70.8%, 1.0034 72.9%, 1.0031 75.0%, 1.0027 77.1%, 1.0024 79.2%, 1.0021 81.2%, 1.0018 83.3%, 1.0015 85.4%, 1.0013 87.5%, 1.0011 89.6%, 1.0009 91.7%, 1.0007 93.8%, 1.0006 95.8%, 1.0005 97.9%, 1.0000 100.0%);
  --dur-card: 439ms;  /* m=1.2 k=571.1 c=45.03 ζ=0.86 перелёт 0.41% */
  --spring-sheet: linear(0.0000 0.0%, 0.0219 2.1%, 0.0726 4.2%, 0.1399 6.2%, 0.2156 8.3%, 0.2939 10.4%, 0.3708 12.5%, 0.4442 14.6%, 0.5124 16.7%, 0.5747 18.8%, 0.6309 20.8%, 0.6811 22.9%, 0.7255 25.0%, 0.7644 27.1%, 0.7985 29.2%, 0.8280 31.2%, 0.8536 33.3%, 0.8756 35.4%, 0.8944 37.5%, 0.9106 39.6%, 0.9244 41.7%, 0.9362 43.8%, 0.9462 45.8%, 0.9546 47.9%, 0.9618 50.0%, 0.9679 52.1%, 0.9730 54.2%, 0.9774 56.2%, 0.9810 58.3%, 0.9841 60.4%, 0.9867 62.5%, 0.9888 64.6%, 0.9906 66.7%, 0.9922 68.8%, 0.9935 70.8%, 0.9945 72.9%, 0.9954 75.0%, 0.9962 77.1%, 0.9968 79.2%, 0.9973 81.2%, 0.9978 83.3%, 0.9981 85.4%, 0.9985 87.5%, 0.9987 89.6%, 0.9989 91.7%, 0.9991 93.7%, 0.9993 95.8%, 0.9994 97.9%, 1.0000 100.0%);
  --dur-sheet: 459ms;  /* m=1.6 k=789.0 c=71.06 ζ=1.0 перелёт 0.0% */
  --spring-screen: linear(0.0000 0.0%, 0.0232 2.1%, 0.0760 4.2%, 0.1457 6.2%, 0.2235 8.3%, 0.3035 10.4%, 0.3818 12.5%, 0.4560 14.6%, 0.5246 16.7%, 0.5871 18.7%, 0.6431 20.8%, 0.6928 22.9%, 0.7366 25.0%, 0.7749 27.1%, 0.8081 29.2%, 0.8369 31.2%, 0.8617 33.3%, 0.8829 35.4%, 0.9010 37.5%, 0.9165 39.6%, 0.9296 41.7%, 0.9408 43.7%, 0.9502 45.8%, 0.9582 47.9%, 0.9650 50.0%, 0.9706 52.1%, 0.9754 54.2%, 0.9794 56.2%, 0.9828 58.3%, 0.9856 60.4%, 0.9880 62.5%, 0.9900 64.6%, 0.9916 66.7%, 0.9930 68.8%, 0.9942 70.8%, 0.9951 72.9%, 0.9960 75.0%, 0.9966 77.1%, 0.9972 79.2%, 0.9977 81.2%, 0.9981 83.3%, 0.9984 85.4%, 0.9987 87.5%, 0.9989 89.6%, 0.9991 91.7%, 0.9992 93.7%, 0.9994 95.8%, 0.9995 97.9%, 1.0000 100.0%);
  --dur-screen: 399ms;  /* m=1.8 k=1226.2 c=93.96 ζ=1.0 перелёт 0.0% */
  --spring-hero: linear(0.0000 0.0%, 0.0132 2.1%, 0.0458 4.2%, 0.0919 6.2%, 0.1468 8.3%, 0.2069 10.4%, 0.2695 12.5%, 0.3324 14.6%, 0.3941 16.7%, 0.4535 18.8%, 0.5099 20.8%, 0.5626 22.9%, 0.6115 25.0%, 0.6565 27.1%, 0.6975 29.2%, 0.7347 31.2%, 0.7682 33.3%, 0.7981 35.4%, 0.8248 37.5%, 0.8485 39.6%, 0.8695 41.7%, 0.8879 43.8%, 0.9040 45.8%, 0.9181 47.9%, 0.9303 50.0%, 0.9410 52.1%, 0.9501 54.2%, 0.9580 56.3%, 0.9648 58.3%, 0.9706 60.4%, 0.9756 62.5%, 0.9798 64.6%, 0.9833 66.7%, 0.9863 68.8%, 0.9888 70.8%, 0.9910 72.9%, 0.9927 75.0%, 0.9942 77.1%, 0.9954 79.2%, 0.9964 81.2%, 0.9972 83.3%, 0.9979 85.4%, 0.9984 87.5%, 0.9989 89.6%, 0.9992 91.7%, 0.9995 93.8%, 0.9997 95.8%, 0.9998 97.9%, 1.0000 100.0%);
  --dur-hero: 519ms;  /* m=1.5 k=341.1 c=42.07 ζ=0.93 перелёт 0.02% */
  --spring-toast: linear(0.0000 0.0%, 0.0188 2.1%, 0.0642 4.2%, 0.1280 6.2%, 0.2035 8.3%, 0.2852 10.4%, 0.3690 12.5%, 0.4515 14.6%, 0.5306 16.7%, 0.6044 18.7%, 0.6721 20.8%, 0.7329 22.9%, 0.7868 25.0%, 0.8337 27.1%, 0.8739 29.2%, 0.9079 31.2%, 0.9361 33.3%, 0.9592 35.4%, 0.9776 37.5%, 0.9921 39.6%, 1.0031 41.7%, 1.0112 43.7%, 1.0169 45.8%, 1.0205 47.9%, 1.0226 50.0%, 1.0234 52.1%, 1.0233 54.2%, 1.0224 56.2%, 1.0211 58.3%, 1.0194 60.4%, 1.0175 62.5%, 1.0155 64.6%, 1.0136 66.7%, 1.0117 68.8%, 1.0099 70.8%, 1.0083 72.9%, 1.0068 75.0%, 1.0055 77.1%, 1.0043 79.2%, 1.0033 81.2%, 1.0024 83.3%, 1.0017 85.4%, 1.0011 87.5%, 1.0007 89.6%, 1.0003 91.7%, 1.0000 93.7%, 0.9998 95.8%, 0.9996 97.9%, 1.0000 100.0%);
  --dur-toast: 399ms;  /* m=1.0 k=528.7 c=34.95 ζ=0.76 перелёт 2.35% */
  --spring-success: linear(0.0000 0.0%, 0.0277 2.1%, 0.0957 4.2%, 0.1903 6.2%, 0.3001 8.3%, 0.4159 10.4%, 0.5303 12.5%, 0.6383 14.6%, 0.7362 16.7%, 0.8218 18.8%, 0.8941 20.8%, 0.9530 22.9%, 0.9990 25.0%, 1.0333 27.1%, 1.0571 29.2%, 1.0720 31.2%, 1.0796 33.3%, 1.0814 35.4%, 1.0787 37.5%, 1.0729 39.6%, 1.0650 41.7%, 1.0560 43.8%, 1.0465 45.8%, 1.0372 47.9%, 1.0285 50.0%, 1.0207 52.1%, 1.0138 54.2%, 1.0080 56.2%, 1.0034 58.3%, 0.9997 60.4%, 0.9970 62.5%, 0.9952 64.6%, 0.9940 66.7%, 0.9935 68.8%, 0.9934 70.8%, 0.9936 72.9%, 0.9941 75.0%, 0.9948 77.1%, 0.9955 79.2%, 0.9963 81.2%, 0.9970 83.3%, 0.9978 85.4%, 0.9984 87.5%, 0.9989 89.6%, 0.9994 91.7%, 0.9998 93.7%, 1.0000 95.8%, 1.0003 97.9%, 1.0000 100.0%);
  --dur-success: 559ms;  /* m=0.8 k=329.9 c=20.14 ζ=0.62 перелёт 8.14% */
  /* запас на браузеры без linear(): прежние кривые кругов v163–v169 */
  --v-press-ease: var(--ease-out); --v-select-ease: var(--ease-out); --v-card-ease: var(--ease-out);
  --v-sheet-ease: var(--ease-drawer); --v-screen-ease: var(--ease-out); --v-toast-ease: var(--ease-out);
  --v-success-ease: var(--ease-out); --v-release-ease: var(--ease-out); --v-hero-ease: var(--ease-drawer);

  /* уровни — вместо случайных z-index в новом слое */
  --z-world: 1; --z-surface: 10; --z-content: 20; --z-floating: 30; --z-sheet: 50; --z-toast: 70;

  /* ── светлая: бетонная площадка днём ───────────────────────────────────────── */
  --bg:#eceef1; --card:#ffffff; --el:#ffffff;
  --ink:#1a1c20; --mut:#5d626b;                 /* --mut 4.9:1 на белом (было 4.6:1) — для пожилых */
  --hair:rgba(24,30,42,.13); --hair2:rgba(24,30,42,.07);
  --press:rgba(24,30,42,.06);
  --acc:#0071e3; --acc-soft:rgba(0,113,227,.10); --acc-ink:#0062c4;
  --navbg:rgba(236,238,241,.80); --tabbg:rgba(246,247,249,.84);
  --bad:#d93025; --warn:#ff9f0a; --warn-ink:#8a5200;
  /* «бирка» — жёлтый ценник: единственный цвет выгоды. Красный остаётся только за бедой */
  --deal:#ffd23f; --deal-edge:#e5b400; --deal-ink:#1d1600;
  /* поверхность: блик по верхней кромке + тени от одного света (вниз-вправо) */
  --edge-hi: inset 0 1px 0 rgba(255,255,255,.95);
  --e1: var(--edge-hi), 0 0 0 1px rgba(24,30,42,.05), 1px 1px 1px rgba(24,30,42,.05), 2px 5px 12px -2px rgba(24,30,42,.10);
  --e2: var(--edge-hi), 0 0 0 1px rgba(24,30,42,.05), 1px 2px 3px rgba(24,30,42,.07), 5px 14px 28px -6px rgba(24,30,42,.18);
  --e3: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(24,30,42,.06);
  --e4: inset 0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(24,30,42,.06), 0 -12px 40px -8px rgba(24,30,42,.22);
  --sh: var(--e1);
  /* зерно площадки: собственный шум SVG, 3.5 % — поверхность перестаёт быть «цифровой заливкой» */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .11  0 0 0 0 .13  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .9  0 0 0 0 .92  0 0 0 0 .95  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --r: 16px; --r-lg: 22px;
}
/* ── тёмная: тот же двор вечером. Не чёрная дыра #000, а асфальт: глубина читается ступенями света */
[data-theme="dark"]{
  --bg:#0e0f11; --card:#1a1c1f; --el:#222428;
  --ink:#f2f3f5; --mut:#a3a8b0;
  --hair:rgba(255,255,255,.14); --hair2:rgba(255,255,255,.075);
  --press:rgba(255,255,255,.08);
  --acc:#2f86f6; --acc-soft:rgba(47,134,246,.20); --acc-ink:#5aa0ff;   /* тот же синий, светлее — 4.8:1 на карточке */
  --navbg:rgba(14,15,17,.78); --tabbg:rgba(20,21,24,.84);
  --bad:#ff5a4e; --warn-ink:#ffb340;
  --deal:#f6c83a; --deal-edge:#c99a0d; --deal-ink:#1d1600;
  --edge-hi: inset 0 1px 0 rgba(255,255,255,.06);
  --e1: var(--edge-hi), 0 0 0 1px rgba(255,255,255,.035), 2px 6px 14px -4px rgba(0,0,0,.55);
  --e2: var(--edge-hi), 0 0 0 1px rgba(255,255,255,.05), 6px 16px 32px -8px rgba(0,0,0,.7);
  --e3: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(255,255,255,.04);
  --e4: inset 0 1px 0 rgba(255,255,255,.08), 0 -14px 44px -8px rgba(0,0,0,.75);
  --sh: var(--e1);
}

/* ─────────────────────────────── ПОВЕРХНОСТИ ─────────────────────────────── */
/* Жалоба 04.08: при прокрутке в тёмной теме снизу проступала светлая полоса — фон документа
   был своим, не цветом темы. Теперь html и body всегда цвета площадки. */
html,body{background:var(--bg)}
/* Зерно — фоновый слой самого экрана, смешанный с цветом площадки (background-blend-mode). Без псевдоэлемента и
   без изоляции: изоляция делала экран отдельным слоем наложения, и индикатор вкладки (живёт снаружи экрана)
   вставал поверх листов — синяя чёрточка над листом количества (видео 23.09). Круг 1 до этого навязывал позиции
   детям экрана — панель закрывала «В корзину». Экрану и его детям слоёв наложения не добавляем вовсе. */
.screen{background-color:var(--bg);background-image:var(--grain);background-size:160px 160px;background-blend-mode:multiply}
[data-theme="dark"] .screen{background-image:var(--grain-dark);background-blend-mode:screen}

.card{box-shadow:var(--e1);border-radius:var(--r)}
.card.flat{box-shadow:var(--edge-hi);border:1px solid var(--hair2)}

/* стекло: шапка и панель — один материал: размытие, насыщение, блик по кромке к свету */
.nav{background:var(--navbg);box-shadow:inset 0 -1px 0 var(--hair2);border-bottom:0}
.tabbar{background:var(--tabbg);border-top:0;box-shadow:var(--e3)}

/* ─────────────────────────────── ТИПОГРАФИКА ─────────────────────────────── */
/* подписи вкладок 9.5 px не читались пожилыми (аудит): минимум 11 px на всём экране */
.tabbar.compact .tab{font-size:11px;letter-spacing:-.01em}
.tab{font-size:11.5px}
.stock{font-size:11.5px;padding:2px 7px;border-radius:7px}
.pcard .pn{font-size:14.5px;line-height:1.28;letter-spacing:-.005em}
.pcard .pp{font-size:19px;font-weight:780;letter-spacing:-.025em}
.pcard .pu{font-size:12.5px}
.badge{font-size:11px!important}
.sub,.sec-note{color:var(--mut)}
.h2{letter-spacing:-.028em}

/* ─────────────────────────────── ФИЗИКА НАЖАТИЯ ──────────────────────────── */
/* Нажатие — быстрая жёсткая пружина без отскока; отпускание — отдельная, с доходом ≤2 %:
   кнопка «садится» под пальцем и «пружинит» обратно, как клавиша, а не мигает. */
.btn,.chip,.pcard,.hotcard,.tab,.nav-btn,.favh,.cs-btn{
  transition-property:transform,opacity,background-color,border-color,color,box-shadow;
  transition-duration:var(--dur-release),.14s,.2s,.2s,.2s,var(--dur-card);
  transition-timing-function:var(--v-release-ease),ease,ease,ease,ease,var(--v-card-ease);
}
.btn:active,.chip:active,.hotcard:active,.nav-btn:active{
  transform:scale(.965);transition-duration:var(--dur-press),.1s,.1s,.1s,.1s,var(--dur-press);
  transition-timing-function:var(--v-press-ease)}
/* карточка тяжелее кнопки: жмётся меньше и прижимается к площадке — тень короче */
.pcard:active{transform:scale(.975);box-shadow:var(--edge-hi),0 0 0 1px rgba(24,30,42,.06),1px 1px 2px rgba(24,30,42,.10);
  transition-duration:var(--dur-press),.1s,.1s,.1s,.1s,var(--dur-press);transition-timing-function:var(--v-press-ease)}
.btn:focus-visible,.chip:focus-visible,.pcard:focus-visible,.tab:focus-visible,.hotcard:focus-visible,
.nav-btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2.5px solid var(--acc);outline-offset:2px}
.btn[disabled],.btn:disabled{opacity:.42;transform:none!important;filter:saturate(.4)}
/* занятая кнопка: прежняя машина состояний (busy → ok/err), перевременена на пружины */
.btn.ok{animation-duration:var(--dur-success);animation-timing-function:var(--v-success-ease)}

/* ─────────────────────────────── КАТАЛОГ ─────────────────────────────────── */
.grid{gap:14px}
.pcard{background:var(--card);box-shadow:var(--e1);border-radius:var(--r)}
/* витрина: фото лежит в неглубокой нише — свет сверху, верхняя кромка ниши в тени */
.pcard img{aspect-ratio:1.1;background:var(--press)}
.pcard::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:1.1;pointer-events:none;
  border-radius:var(--r) var(--r) 0 0;box-shadow:inset 0 10px 14px -12px rgba(0,0,0,.35),inset 0 -1px 0 var(--hair2)}
.pcard .pi{padding:11px 12px 13px;gap:4px}

/* БИРКА вместо красной диагональной ленты: жёлтый ценник с люверсом, как на настоящем поддоне.
   Лежит на фото, отбрасывает короткую контактную тень вниз-вправо (тот же свет). */
.hot-ribbon{
  position:absolute!important;left:10px!important;top:10px!important;right:auto!important;bottom:auto!important;
  transform:rotate(-4deg)!important;z-index:3;width:auto!important;height:auto!important;
  background:var(--deal)!important;color:var(--deal-ink)!important;
  font-size:12px!important;font-weight:800!important;letter-spacing:.02em!important;text-transform:uppercase;
  padding:5px 10px 5px 20px!important;border-radius:5px 7px 7px 5px!important;line-height:1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.08),1px 2px 3px rgba(0,0,0,.25)!important;
  -webkit-mask:radial-gradient(circle 3.5px at 9px 50%,transparent 3.4px,#000 3.6px);
          mask:radial-gradient(circle 3.5px at 9px 50%,transparent 3.4px,#000 3.6px);
  clip-path:none!important;
}
.hot-ribbon::before,.hot-ribbon::after{display:none!important}
/* цена по акции: не красная (красный — беда), а на жёлтой подложке-ценнике */
.pcard .pp[style*="--bad"]{color:var(--deal-ink)!important;background:var(--deal);align-self:flex-start;
  padding:3px 8px 2px;margin-left:-4px;border-radius:6px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08)}
.pcard .pp[style*="--bad"] s{color:rgba(29,22,0,.55)!important}
.pcard .pp[style*="--bad"] .pu{color:rgba(29,22,0,.6)}
.hotcard{border:0;box-shadow:var(--e1);background:var(--card)}
.hotcard .hp{color:var(--deal-ink);background:var(--deal);display:inline-block;padding:2px 7px 1px;border-radius:5px;margin-top:4px}
.hotcard .hp s{color:rgba(29,22,0,.55)}
.hotcard .hu{margin-top:3px}
.badge.b-red{background:rgba(229,180,0,.18)!important;color:var(--warn-ink)!important}

/* ─────────────────────────────── ЧИПЫ И ЛЕНТЫ ─────────────────────────────── */
.chip{background:var(--card);border-color:transparent;box-shadow:var(--e1)}
.chip.on{background:var(--ink);color:var(--bg);box-shadow:var(--edge-hi),1px 2px 5px rgba(24,30,42,.22)}
[data-theme="dark"] .chip.on{background:#f2f3f5;color:#111214}
.chip.acc.on{background:var(--acc);color:#fff}
.search{background:var(--card);box-shadow:inset 0 1px 2px rgba(24,30,42,.08),inset 0 0 0 1px var(--hair2)}
[data-theme="dark"] .search{background:var(--el);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 0 0 1px var(--hair2)}

/* ─────────────────────────────── СТАТУСЫ ─────────────────────────────────── */
/* Было: у просроченной заявки красным залито ВСЁ — рамка, фон, текст, и 32 такие карточки подряд.
   Красный перестаёт что-либо значить. Стало: карточка обычная, беду несёт полоса у кромки
   и строка статуса; текст — чернилами (канон §7: цветом — только маркер). */
.card[style*="outline:2px solid rgba(255,59,48"]{outline:0!important;background:var(--card)!important;
  box-shadow:var(--e1),inset 4px 0 0 var(--bad)!important}
.offstrip.blink-overdue{background:transparent!important;border:0!important;padding:8px 0 0!important;
  color:var(--bad)!important;font-weight:720!important;font-size:13px!important;animation:none!important}
/* плашки-полосы: кнопка-полоса «Инкассация» разваливалась на две колонки — flex делал из
   текста и <b> соседние столбцы. Кнопка-полоса — блок текста, как обычный абзац. */
button.offstrip{display:block!important;line-height:1.45}
.offstrip{background:rgba(255,159,10,.10);border-color:rgba(255,159,10,.30);color:var(--warn-ink)}

/* ─────────────────────────────── ЛИСТЫ, ОКНА, ТОСТЫ ──────────────────────── */
.ovl{background:rgba(10,12,16,.38);animation-duration:var(--dur-sheet);animation-timing-function:var(--v-sheet-ease)}
.sheet{box-shadow:var(--e4);animation:sheetin var(--dur-sheet) var(--v-sheet-ease)}
@keyframes sheetin{from{transform:translateY(100%)}to{transform:none}}   /* лист выезжает из-за кромки, а не всплывает из воздуха */
.toast{animation:toastin var(--dur-toast) var(--v-toast-ease);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 12px 30px -6px rgba(0,0,0,.35)}

/* ─────────────────────────────── ПЕРЕХОДЫ ЭКРАНОВ ────────────────────────── */
/* Экран приходит ОТТУДА, куда нажали: вкладка правее — план сдвигается справа, левее — слева.
   Направление ставит motion.js (html[data-nav]) до перерисовки. Без него — прежний подъём. */
.page.pi{animation:pagein var(--dur-screen) var(--v-screen-ease)}
html[data-nav="fwd"] .page.pi{animation-name:pagefwd}
html[data-nav="back"] .page.pi{animation-name:pageback}
@keyframes pagefwd{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes pageback{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.page.pi>.card,.page.pi>.grid>.pcard{animation:cardin var(--dur-card) var(--v-card-ease) both}
@keyframes cardin{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* каталог при прокрутке: карточка «поднимается на площадку», входя в кадр — только там, где браузер
   ведёт это сам по прокрутке (без перехвата прокрутки и без JS) */
@supports (animation-timeline: view()){
  .grid>.pcard{animation:cardrise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes cardrise{from{opacity:.001;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
}

/* ─────────────────────────────── ШИРИНЫ ──────────────────────────────────── */
/* Было: на планшете и компьютере — макет телефона посреди пустого экрана, нарисованная «чёлка»
   закрывала поле поиска. Стало: рамки нет, приложение занимает окно. */
@media (min-width:760px){
  body{padding:0!important}
  .phone{max-width:none!important;height:100vh!important;height:100dvh!important;border-radius:0!important;
    background:transparent!important;padding:0!important;box-shadow:none!important}
  .phone::after{display:none!important}
  .screen{border-radius:0!important}
  .nav{padding-top:10px!important}
  .main>.page{max-width:760px;margin-left:auto;margin-right:auto;width:100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .sheet{max-width:640px;margin:0 auto 12px!important;border-radius:var(--r-lg)!important;width:calc(100% - 24px)!important}
  .ovl{align-items:flex-end}
  .toast{bottom:104px}
}
/* компьютер: вкладки — левая колонка, содержимое шире; каталог в 4–5 колонок */
@media (min-width:1100px){
  .screen{display:grid!important;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .screen>.nav{grid-column:2;grid-row:1}
  .screen>.main{grid-column:2;grid-row:2;min-height:0}
  .screen>.tabbar{grid-column:1;grid-row:1 / span 2;flex-direction:column;justify-content:flex-start;gap:6px;
    padding:18px 8px!important;box-shadow:inset -1px 0 0 var(--hair2)}
  .screen>.tabbar .tabwrap{flex:none}
  .screen>.tabbar .tab{min-height:64px;border-radius:14px;padding:8px 2px}
  .screen>.tabbar .tab.on{background:var(--acc-soft)}
  .screen>#sheet-host{grid-column:1 / span 2}
  .main>.page{max-width:1180px}
  .tabind{display:none!important}
  .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}

/* ─────────────────────────────── МЕНЬШЕ ДВИЖЕНИЯ ─────────────────────────── */
/* Не удаляем анимации, а сжимаем до 1 мс — события animationend по-прежнему приходят,
   листы закрываются (правило круга v164). Прокруточное проявление отключаем полностью. */
@media (prefers-reduced-motion: reduce){
  .page.pi,.page.pi>.card,.page.pi>.grid>.pcard,.sheet,.ovl,.toast,.btn,.chip,.pcard,.hotcard,.tab{
    animation-duration:1ms!important;transition-duration:1ms!important}
  .grid>.pcard{animation:none!important;opacity:1!important;transform:none!important}
}
html.v-noanim .grid>.pcard{animation:none!important}

/* ═════════════════════════ КРУГ 2 (разбор снимков круга 1) ═════════════════════════ */
/* панель из семи вкладок (руководитель): при 11 px «Дашборд» и «Аналитика» слипались */
.tabbar:has(> .tabwrap:nth-child(7)) .tab{font-size:10px;letter-spacing:-.025em}
/* пул менеджера: одно и то же пояснение («Состав… откроются после…», «В пуле виден только номер…»)
   стояло в КАЖДОЙ из 21 карточки. Оставляем его в первой слепой карточке, в остальных — только номер и кнопка */
.card:has(.sec-note[style*="padding:9px 0"]) ~ .card .sec-note[style*="padding:9px 0"],
.card:has(.sec-note[style*="padding:9px 0"]) ~ .card .sec-note[style="text-align:center"]{display:none}
/* бирка сцены с комаром — тот же жёлтый ценник, что на карточках (красный = беда, не выгода) */
.mq-tagswing svg path:first-of-type{fill:var(--deal)!important;stroke:var(--deal-edge)!important}
.mq-tagswing svg circle{stroke:var(--deal-edge)!important}
.mq-tagswing svg text{fill:var(--deal-ink)!important}
@media (min-width:760px){
  /* на широком экране места по высоте хватает: у самолёта своя полоса над «Горящими ценами»,
     баннер больше не ложится на подпись и названия товаров */
  .plane-band{height:48px}
  .plane-layer{top:0}
  /* кнопка тест-режима «Роль»: её место считалось от ширины телефона — на широком встаём в угол */
  #lvtp-fab{left:auto!important;right:16px!important;transform:none!important}
  #lvtp-fab:active{transform:translateY(1px)!important}
}

/* ═════════════════════════ ДОБОР: панели с зашитым светлым цветом ═════════════════════════ */
/* «⚙ Настроить экран» руководителя (lvBossTabsPanel) собрана инлайн-стилями #fff/#f4f5f8/#eaf3ff —
   в тёмной теме белый лист на тёмном экране (снимок исходника 23.09). Перекраска по токенам темы;
   и выезд листа той же пружиной, что у остальных листов (панель появлялась рывком). */
#boss-tabs-ov{animation:fadein var(--dur-sheet) var(--v-sheet-ease)}
#boss-tabs-ov > div{background:var(--card)!important;color:var(--ink)!important;box-shadow:var(--e4);
  animation:sheetin var(--dur-sheet) var(--v-sheet-ease)}
#boss-tabs-ov div[style*="#8a8a8e"]{color:var(--mut)!important}
#boss-tabs-ov button[style*="#f4f5f8"]{background:var(--press)!important;color:var(--ink)!important;border-color:var(--hair2)!important}
#boss-tabs-ov button[style*="#eaf3ff"]{background:var(--acc-soft)!important;color:var(--ink)!important;border-color:var(--acc)!important}
#boss-tabs-ov button[data-close]{background:var(--card)!important;color:var(--ink)!important;border-color:var(--hair)!important}
/* тест-панель ролей: та же беда в тёмной теме (белая карточка) */
[data-theme="dark"] .lvtp-card{background:var(--card)!important;color:var(--ink)!important}
[data-theme="dark"] .lvtp-sub{color:var(--mut)!important}
@media (prefers-reduced-motion: reduce){ #boss-tabs-ov,#boss-tabs-ov > div{animation-duration:1ms!important} }
/* BID-QUIET (v180): уже показанная ставка при перерисовке не въезжает заново — въезжает только новая */
.bid.seen{animation:none}
/* v180: «Отправить заявку поставщику» (lvSupplierShare) — тот же приём, что у «Настроить экран»: инлайн #fff/#f4f5f8
   давали белый лист в тёмной теме. Цвета каналов (MAX синий, Telegram голубой) — фирменные, не трогаются. */
#sup-share-ov{animation:fadein var(--dur-sheet) var(--v-sheet-ease)}
#sup-share-ov > div{background:var(--card)!important;color:var(--ink)!important;box-shadow:var(--e4);
  animation:sheetin var(--dur-sheet) var(--v-sheet-ease)}
#sup-share-ov div[style*="#8a8a8e"]{color:var(--mut)!important}
#sup-share-ov a[style*="#f4f5f8"]{background:var(--press)!important;color:var(--ink)!important}
#sup-share-ov button[data-close]{background:var(--card)!important;color:var(--ink)!important;border-color:var(--hair)!important}
@media (prefers-reduced-motion: reduce){ #sup-share-ov,#sup-share-ov > div{animation-duration:1ms!important} }

@supports (transition-timing-function: linear(0, 1)){
  :root{--v-press-ease:var(--spring-press);--v-release-ease:var(--spring-release);--v-select-ease:var(--spring-select);
    --v-card-ease:var(--spring-card);--v-sheet-ease:var(--spring-sheet);--v-screen-ease:var(--spring-screen);
    --v-toast-ease:var(--spring-toast);--v-success-ease:var(--spring-success);--v-hero-ease:var(--spring-hero)}
}
