/* Тема «Фуд-маркет» в духе ВкусВилла: мягкий фон, сочный зелёный, крупные
   скругления, выдача плиткой в две колонки с большим фото.
   Надстройка над базовыми theme/layout/components.css при <html data-theme="vv">
   (атрибут ставит index.html), другого оформления в приложении нет. */

[data-theme="vv"] {
  --bg: #f2f4ef;
  --text: #1d2a20;
  --hint: #8a938c;
  --card: #ffffff;
  --accent: #2fa84f;
  --accent-strong: #1f7a37;
  --accent-text: #ffffff;
  --accent-soft: #e5f4e8;
  --link: #1f7a37;
  --danger: #ee4b3e;
  --sale: #ffdc3c;
  --sale-text: #3b3000;
  --field: #eef1ea;
  --sep: #e7eae3;
  --shadow: 0 2px 10px rgba(30, 60, 35, .06);
  --radius: 20px;
  --nav-h: 66px;
  --header-h: 56px;
  /* матовое стекло в духе Додо: полупрозрачная белая подложка с размытием
     поверх цветного фона; выделение — белая непрозрачная плашка */
  --glass: rgba(255, 255, 255, .42);
  --glass-strong: rgba(255, 255, 255, .62);
  --glass-blur: blur(22px) saturate(160%);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .35);
  /* объёмное стекло круглых кнопок: светлая кромка, блик сверху, тень снизу */
  --glass-btn:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .75), rgba(255, 255, 255, .25) 55%, rgba(255, 255, 255, .4));
  /* карточка над полотном, как у Додо: почти белая, мягкая тень вниз и тонкая сверху */
  --raised: rgba(255, 255, 255, .86);
  --raised-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(20, 40, 25, .06), 0 10px 26px rgba(20, 40, 25, .11);
  --glass-btn-edge:
    inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -2px 4px rgba(20, 40, 25, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .6), 0 4px 12px rgba(20, 40, 25, .12);
}

/* фон — фактура под стеклом: на узоре видно, как шапка, меню и кнопки его размывают.
   Выбирается в настройках (js/background.js ставит data-bg на <html>); тот же
   data-bg у образцов в настройках подхватывает ту же переменную */
[data-theme="vv"] { --app-bg: url("../img/bg-products.svg") 0 0 / 104px 104px, linear-gradient(160deg, #f3f1df, #eef0e0 50%, #f4e9d8); }
[data-bg="products"] { --app-bg: url("../img/bg-products.svg") 0 0 / 104px 104px, linear-gradient(160deg, #f3f1df, #eef0e0 50%, #f4e9d8); }
[data-bg="brick"] { --app-bg: url("../img/bg-brick.svg") 0 0 / 136px 136px, linear-gradient(160deg, #f3f1df, #eef0e0 50%, #f4e9d8); }
[data-bg="rainbow"] { --app-bg: url("../img/bg-rainbow.svg") 0 0 / 136px 136px, linear-gradient(160deg, #f3f1df, #eef0e0 50%, #f4e9d8); }
[data-bg="mint"] { --app-bg: url("../img/bg-brick.svg") 0 0 / 136px 136px, linear-gradient(160deg, #e6f2dc, #d9ecdf 50%, #f6e6d2); }
[data-bg="dots"] { --app-bg: radial-gradient(circle, rgba(124, 196, 107, .55) 1.6px, transparent 2px) 0 0 / 16px 16px, linear-gradient(160deg, #f3f1df, #eef0e0 50%, #f4e9d8); }
[data-bg="grid"] { --app-bg: linear-gradient(rgba(47, 158, 68, .14) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, rgba(47, 158, 68, .14) 1px, transparent 1px) 0 0 / 18px 18px, #f4f6ec; }
[data-bg="mesh"] { --app-bg: linear-gradient(rgba(246, 248, 243, .5), rgba(246, 248, 243, .5)),
    radial-gradient(55% 40% at 8% 6%, rgba(70, 170, 90, .75), transparent 72%),
    radial-gradient(55% 40% at 100% 18%, rgba(255, 160, 90, .7), transparent 72%),
    radial-gradient(65% 45% at 85% 88%, rgba(60, 170, 150, .6), transparent 72%),
    radial-gradient(60% 45% at 0% 70%, rgba(215, 225, 90, .65), transparent 72%),
    radial-gradient(50% 35% at 50% 45%, rgba(255, 240, 210, .6), transparent 75%),
    #dfe8d8; }
[data-bg="peach"] { --app-bg: url("../img/bg-white.svg") 0 0 / 136px 136px, linear-gradient(160deg, #ffd9a8, #ffb3a0 50%, #ff9fbf); }
[data-bg="ocean"] { --app-bg: url("../img/bg-white.svg") 0 0 / 136px 136px, linear-gradient(160deg, #a8e6ff, #8fd3e8 45%, #a7f0c8); }
[data-bg="lavender"] { --app-bg: radial-gradient(60% 45% at 10% 10%, #c9b8ff, transparent 72%), radial-gradient(55% 45% at 95% 30%, #ffc2e0, transparent 72%), radial-gradient(65% 50% at 60% 95%, #b8e0ff, transparent 72%), #efe8fb; }
[data-bg="lemon"] { --app-bg: radial-gradient(60% 45% at 5% 15%, #fff07a, transparent 72%), radial-gradient(55% 45% at 100% 40%, #c8f08a, transparent 72%), radial-gradient(60% 50% at 30% 100%, #ffd37a, transparent 72%), #fbf7dc; }
[data-bg="sunset"] { --app-bg: radial-gradient(60% 45% at 0% 0%, #ff9f6b, transparent 72%), radial-gradient(60% 45% at 100% 20%, #ff7aa2, transparent 72%), radial-gradient(70% 50% at 50% 100%, #ffd36b, transparent 72%), #ffe7d6; }
[data-bg="night"] { --app-bg: url("../img/bg-night.svg") 0 0 / 136px 136px, linear-gradient(160deg, #13261a, #0f1f17 55%, #1c2a1d); }
[data-bg="midnight"] { --app-bg: radial-gradient(60% 45% at 0% 0%, #3b2d7a, transparent 72%), radial-gradient(60% 45% at 100% 30%, #1f4f7a, transparent 72%), radial-gradient(70% 50% at 50% 100%, #5a2a6a, transparent 72%), #12142a; }
[data-bg="forest"] { --app-bg: radial-gradient(60% 45% at 10% 10%, #2f7a3a, transparent 72%), radial-gradient(60% 45% at 100% 50%, #1f6a5a, transparent 72%), radial-gradient(60% 50% at 30% 100%, #4a6a1f, transparent 72%), #0e1a12; }
[data-bg="graphite"] { --app-bg: radial-gradient(circle, rgba(255, 255, 255, .14) 1.6px, transparent 2px) 0 0 / 16px 16px, linear-gradient(160deg, #26292b, #1b1d1f); }
[data-bg="neon"] { --app-bg: url("../img/bg-neon.svg") 0 0 / 104px 104px, linear-gradient(160deg, #1b1530, #141a26); }
[data-theme="vv"] body {
  background: var(--app-bg);
  background-attachment: fixed;
}

[data-theme="vv"] body {
  font-family: "Nunito", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 500;
}
[data-theme="vv"] button,
[data-theme="vv"] input,
[data-theme="vv"] textarea { font-family: inherit; }

/* тёмный фон: то, что лежит прямо на нём (заголовки, подписи плиток, пустые
   состояния), светлеет; карточки остаются светлым стеклом и не меняются */
[data-theme="vv"][data-bg-tone="dark"] .set-title,
[data-theme="vv"][data-bg-tone="dark"] .state,
[data-theme="vv"][data-bg-tone="dark"] .nt-hint,
[data-theme="vv"][data-bg-tone="dark"] .net-note,
[data-theme="vv"][data-bg-tone="dark"] #suggest .tile { color: #eef3ea; }

/* выбор фона в настройках: сетка круглых образцов */
.bg-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 12px 15px 15px; }
.bg-swatch {
  aspect-ratio: 1; border: none; border-radius: 50%; padding: 0; background: var(--app-bg);
  box-shadow: inset 0 0 0 1px rgba(20, 40, 25, .1), 0 2px 6px rgba(20, 40, 25, .1);
}
.bg-swatch.on { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--accent); }

/* ── Шапка и нижнее меню ── */
[data-theme="vv"] header {
  border-bottom: none; background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
[data-theme="vv"] header .brand { color: var(--accent-strong); font-weight: 900; font-size: 20px; }
/* надпись: Rubik, зелёный градиент (эко) — к оранжевой плитке с яблоком */
[data-theme="vv"] header .brand-name {
  font-family: "Rubik", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.3px;
  background: linear-gradient(90deg, #3fae4f, #9be04f); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="vv"] header .gear, [data-theme="vv"] header .avatar-btn {
  background: var(--glass-btn); box-shadow: var(--glass-btn-edge); color: var(--text);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}

/* меню — плавающая «стеклянная» таблетка: лента прокручивается под ней и
   просвечивает сквозь размытие, поэтому main тянется до самого низа */
[data-theme="vv"] main {
  bottom: 0;
  padding-bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom));
}
/* стекло — подложка ::before под всеми вкладками, кроме БЖУ: та вынесена
   справа отдельной круглой кнопкой */
[data-theme="vv"] nav.tabbar {
  left: 50%; right: auto; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 420px); height: 62px;
  padding: 7px 79px 7px 7px; gap: 6px; align-items: center;
  background: none; border: none; box-shadow: none;
}
[data-theme="vv"] nav.tabbar::before,
[data-theme="vv"] nav.tabbar::after {
  content: ""; position: absolute; inset: 0 72px 0 0; border-radius: 31px; pointer-events: none;
}
[data-theme="vv"] nav.tabbar::before {
  z-index: -1;
  /* то же жидкое стекло, что у шара «БЖУ»: блик сверху, отсвет снизу, фон просвечивает */
  background:
    radial-gradient(ellipse 70% 60% at 50% 0, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 75%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%),
    rgba(255, 252, 246, .38);
  -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(1.04);
  backdrop-filter: blur(26px) saturate(170%) brightness(1.04);
  box-shadow:
    0 12px 32px rgba(20, 40, 25, .18),
    inset 0 0 0 2px rgba(255, 255, 255, .85),
    inset 6px 0 10px rgba(120, 200, 255, .2), inset -6px 0 10px rgba(255, 120, 200, .18),
    inset 0 1.5px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 1px rgba(255, 255, 255, .45),
    inset 1px 0 1px rgba(255, 255, 255, .35),
    inset -1px 0 1px rgba(255, 255, 255, .35),
    inset 0 -10px 18px rgba(255, 255, 255, .12);
}
/* блики поверх стекла: светлая кромка сверху и косой отблеск слева */
[data-theme="vv"] nav.tabbar::after {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 42%),
    linear-gradient(115deg, transparent 8%, rgba(255, 255, 255, .45) 14%, transparent 22%,
                    transparent 70%, rgba(255, 255, 255, .18) 76%, transparent 82%);
  mix-blend-mode: soft-light;
}
/* преломление: фон под стеклом «плывёт» через SVG-фильтр #lg-refract из index.html.
   url() в backdrop-filter понимает только Chromium, класс refract ставит index.html */
.refract[data-theme="vv"] nav.tabbar::before {
  -webkit-backdrop-filter: url(#lg-refract) blur(26px) saturate(170%) brightness(1.04);
  backdrop-filter: url(#lg-refract) blur(26px) saturate(170%) brightness(1.04);
}
[data-theme="vv"] nav.tabbar button {
  flex: 0 0 48px; height: 48px; padding: 0 14px; border-radius: 24px;
  flex-direction: row; gap: 0; color: #3f4a42; background: transparent;
  transition: flex-grow .55s cubic-bezier(.2, .8, .2, 1), background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
/* иконка выбранной вкладки «пружинит» мягче, в такт плашке */
[data-theme="vv"] nav.tabbar button.active .ic { animation-duration: .55s; }
[data-theme="vv"] nav.tabbar button .ic .i { width: 22px; height: 22px; }
[data-theme="vv"] nav.tabbar button .lbl {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-size: 14px; font-weight: 800;
  transition: max-width .55s ease, opacity .35s ease .12s, margin .55s ease;
}
/* выбранная вкладка — белая плашка на стекле, как размер пиццы у Додо */
[data-theme="vv"] nav.tabbar button.active {
  flex: 1 0 auto; color: #fff; background: linear-gradient(160deg, #78d264, #2f9e44);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .35), 0 10px 18px -6px rgba(47, 158, 68, .6);
}
[data-theme="vv"] nav.tabbar:has([data-tab="nutrition"].active) button { flex-grow: 1; }
[data-theme="vv"] nav.tabbar button.active .lbl { max-width: 110px; opacity: 1; margin-left: 7px; }
[data-theme="vv"] nav.tabbar button .nav-badge { top: -3px; left: auto; right: -3px; margin: 0; }

[data-theme="vv"] nav.tabbar button[data-tab="nutrition"] {
  position: absolute; top: 0; right: 0; width: 62px; height: 62px; padding: 0;
  border-radius: 50%; overflow: visible;
  /* жидкое стекло: блик сверху, отсвет снизу, радужная кромка, внутри тлеет огонь */
  background:
    radial-gradient(ellipse 58% 26% at 50% 13%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 72%),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 50% 62%, rgba(255, 150, 40, .45), rgba(255, 150, 40, 0) 60%),
    rgba(255, 248, 240, .3);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), inset 4px 0 8px rgba(120, 200, 255, .25),
              inset -4px 0 8px rgba(255, 120, 200, .22), 0 12px 24px rgba(255, 120, 40, .28);
}
[data-theme="vv"] nav.tabbar button[data-tab="nutrition"] .lbl { display: none; }
/* без сдвига и «подпрыга» активной иконки: transform у .ic стал бы опорой для
   наклейки kcal, и она уехала бы на огонь */
[data-theme="vv"] nav.tabbar button[data-tab="nutrition"] .ic,
[data-theme="vv"] nav.tabbar button[data-tab="nutrition"].active .ic { transform: none; animation: none; }
[data-theme="vv"] nav.tabbar button[data-tab="nutrition"] .ic .i { width: 32px; height: 32px; margin-top: -4px;
  transform-origin: 50% 90%; animation: fireSway 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 140, 40, .55)); }
/* свечение за огнём — отдельный слой: анимация filter не уходит на видеокарту и
   перерисовывала бы шар в каждом кадре, а opacity и transform — бесплатно */
[data-theme="vv"] nav.tabbar button[data-tab="nutrition"] .ic::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(255, 140, 40, .5), rgba(255, 140, 40, 0) 42%);
  opacity: .5; animation: fireGlow 1.6s ease-in-out infinite;
}
/* огонёк колышется: чуть шире-ниже и обратно, свечение дышит в такт */
@keyframes fireSway {
  0%, 100% { transform: scale(1, 1) rotate(0); }
  30% { transform: scale(1.04, .95) rotate(-3deg); }
  60% { transform: scale(.97, 1.05) rotate(2deg); }
}
@keyframes fireGlow { 60% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="vv"] nav.tabbar button[data-tab="nutrition"] .ic .i,
  [data-theme="vv"] nav.tabbar button[data-tab="nutrition"] .ic::before { animation: none; }
}
/* наклейка «kcal», наклонно налеплена на низ шара */
[data-theme="vv"] nav.tabbar button[data-tab="nutrition"] .kcal {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%) rotate(-8deg);
  padding: 3px 8px; border-radius: 9px; white-space: nowrap;
  font-size: 11px; font-weight: 800; line-height: 1; color: #fff;
  background: linear-gradient(150deg, #ff9a3c, #ff4d2e);
  box-shadow: 0 4px 8px rgba(255, 80, 40, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .6);
}
[data-theme="vv"] nav.tabbar button[data-tab="nutrition"].active {
  box-shadow: 0 0 0 4px rgba(255, 150, 60, .22), inset 0 0 0 2px rgba(255, 255, 255, .9),
              inset 4px 0 8px rgba(120, 200, 255, .25), inset -4px 0 8px rgba(255, 120, 200, .22),
              0 12px 24px rgba(255, 120, 40, .34);
}
[data-theme="vv"] nav.tabbar button[data-tab="nutrition"].pop { animation: firePop .55s cubic-bezier(.3, 1.5, .5, 1); }
@media (prefers-reduced-motion: reduce) { [data-theme="vv"] nav.tabbar button[data-tab="nutrition"].pop { animation: none; } }
@keyframes firePop { 25% { transform: scale(1.12, .86); } 55% { transform: scale(.94, 1.08); } }

/* ── Поиск и чипы: поля без рамок на мягкой подложке, кнопки-«таблетки» ── */
[data-theme="vv"] .search input,
[data-theme="vv"] .link-add input {
  border: 2px solid transparent; background: var(--glass-strong); border-radius: 26px;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
}
[data-theme="vv"] .search input:focus,
[data-theme="vv"] .link-add input:focus { background: #fff; }
[data-theme="vv"] .search input:focus,
[data-theme="vv"] .link-add input:focus { border-color: var(--accent); }
[data-theme="vv"] .search button,
[data-theme="vv"] .link-add button { border-radius: 26px; font-weight: 800; }
/* «Найти» приподнята над фоном: мягкая цветная тень */
[data-theme="vv"] .search button { box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
[data-theme="vv"] .ac { border: none; border-radius: 22px; padding: 6px; box-shadow: 0 8px 28px rgba(30, 60, 35, .14); }
[data-theme="vv"] .ac-item { border-radius: 16px; font-weight: 800; }
[data-theme="vv"] .ac-typed { font-weight: 500; }

[data-theme="vv"] .chip,
[data-theme="vv"] .deal-chip,
[data-theme="vv"] .refine-chip,
[data-theme="vv"] .refresh-btn {
  border: none; background: var(--glass); color: var(--text);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge); font-weight: 700;
}
[data-theme="vv"] .chip.cat-mode.active,
[data-theme="vv"] .deal-chip.active,
[data-theme="vv"] .refine-chip.active {
  background: #fff; color: var(--text); box-shadow: 0 10px 18px -6px rgba(47, 158, 68, .55);
}
/* переключатель «кг | шт»: стеклянная дорожка, выбранное — белая плашка */
[data-theme="vv"] .seg { background: rgba(255, 255, 255, .35); box-shadow: inset 0 1px 2px rgba(20, 40, 25, .08); }
[data-theme="vv"] .seg-opt.on { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(20, 40, 25, .12); }
[data-theme="vv"] .refresh-btn { color: var(--link); }
[data-theme="vv"] .tile { font-weight: 800; }
[data-theme="vv"] .tile-ic {
  border-radius: 24px;
  /* сильно матовое стекло, как кнопки у Додо: молочная заливка поверх лёгкого тона плитки,
     фон под ней размыт; яркая кромка сверху-слева, мягкая тень внутри снизу */
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .28) 55%, rgba(255, 255, 255, .45)),
    color-mix(in srgb, var(--tile-bg) 70%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    inset 0 1.5px 0 #fff, inset 1.5px 0 0 rgba(255, 255, 255, .7),
    inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 -3px 8px rgba(20, 40, 25, .08),
    0 2px 4px rgba(20, 40, 25, .08), 0 12px 28px rgba(20, 40, 25, .18);
}
[data-theme="vv"] .tile-ic .i { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)); }
/* наведение: плитка чуть приподнимается, значок мягко «пружинит» крупнее и темнеет на тон */
[data-theme="vv"] .tile-ic { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease; }
[data-theme="vv"] .tile-ic .i { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), color .3s ease, filter .2s ease; }
@media (hover: hover) {
  [data-theme="vv"] .tile:hover .tile-ic {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1.5px 0 #fff, inset 1.5px 0 0 rgba(255, 255, 255, .7),
      inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 -3px 8px rgba(20, 40, 25, .08),
      0 4px 8px rgba(20, 40, 25, .1), 0 18px 34px rgba(20, 40, 25, .22);
  }
  [data-theme="vv"] .tile:hover .tile-ic .i { transform: scale(1.12); color: color-mix(in srgb, var(--tile-fg) 82%, #000); }
}

/* значок пустого экрана и ошибки — на зелёном «стикере», как у ВкусВилла */
[data-theme="vv"] .state > .i {
  width: 68px; height: 68px; padding: 18px; border-radius: 50%; opacity: 1;
  background: var(--accent-soft); color: var(--accent); stroke-width: 1.8;
}

/* ── Выдача поиска: плитка в две колонки ── */
[data-theme="vv"] #results {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
[data-theme="vv"] #results > :not(.card) { grid-column: 1 / -1; }

[data-theme="vv"] #results .card {
  flex-direction: column; align-items: stretch; gap: 8px;
  margin: 0; padding: 8px 8px 10px; border: none; border-radius: var(--radius);
}
/* самая выгодная — белая с цветной обводкой, как выбранная добавка у Додо */
[data-theme="vv"] #results .card.best { outline: none; background: #fff; box-shadow: 0 0 0 2px var(--accent), var(--raised-shadow); }
[data-theme="vv"] #results .card img {
  width: 100%; height: auto; aspect-ratio: 1; border-radius: 16px;
  object-fit: contain; background: rgba(255, 255, 255, .85); padding: 8px;
  /* белый фон упаковки и поля картинки приглушаются в один серый тон —
     получается ровная плитка, как на витрине, без «рамки в рамке» */
  filter: brightness(.965);
}
[data-theme="vv"] #results .card .info { display: flex; flex-direction: column; padding: 0 4px; }
/* цена — первой, как на ценнике в магазине */
[data-theme="vv"] #results .card .info > div:has(.price) { order: -1; margin-bottom: 2px; }
[data-theme="vv"] #results .card .name { font-size: 13.5px; line-height: 1.3; margin: 4px 0 2px; }
[data-theme="vv"] #results .card .store { order: 1; font-size: 12px; }
[data-theme="vv"] #results .card .store-link { order: 2; margin-top: 4px; }
[data-theme="vv"] #results .card .actions {
  flex-direction: row; align-self: stretch; gap: 6px; padding: 0 2px;
}
[data-theme="vv"] #results .card .add { flex: 1; }

/* ── Карточка товара (и в плитке, и в списках) ── */
[data-theme="vv"] .card {
  border: none; background: var(--raised); box-shadow: var(--raised-shadow);
}
[data-theme="vv"] .card .price { font-size: 19px; font-weight: 900; }
[data-theme="vv"] .card .tag {
  background: var(--accent-soft); color: var(--accent-strong);
  padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 800;
}
/* скидка — жёлтый ценник */
[data-theme="vv"] .card .badge {
  background: var(--sale); color: var(--sale-text);
  border-radius: 8px; padding: 2px 7px; font-weight: 900;
}
[data-theme="vv"] .add {
  border: none; border-radius: 16px; padding: 9px 12px; font-size: 12.5px; font-weight: 800;
  background: var(--accent); color: var(--accent-text);
}
[data-theme="vv"] .add.added { background: var(--accent-soft); color: var(--accent-strong); }
[data-theme="vv"] .bell {
  border: none; border-radius: 16px; padding: 6px 10px;
  background: var(--glass-btn); box-shadow: var(--glass-btn-edge);
}
[data-theme="vv"] .bell.on { background: color-mix(in srgb, #ff9500 16%, transparent); }
[data-theme="vv"] .nutri { border-radius: 16px; padding: 6px 9px; background: var(--accent-soft); color: var(--accent-strong); }
/* в плитке рядом с «В корзину» и колокольчиком «БЖУ» не влезает — ставим
   ярлыком в угол картинки, плитка не растёт */
[data-theme="vv"] #results .card { position: relative; }
[data-theme="vv"] #results .card .nutri {
  position: absolute; top: 14px; right: 14px; padding: 4px 8px; font-size: 11px;
  background: var(--accent-soft); color: var(--accent-strong);
  box-shadow: var(--shadow);
}

/* ── Скидки, корзина, рецепты, настройки: те же скругления и тени ── */
[data-theme="vv"] .watch-item,
[data-theme="vv"] .cart-group,
[data-theme="vv"] .rec-card,
[data-theme="vv"] .shop-card,
[data-theme="vv"] .saved-row,
[data-theme="vv"] .nt-day,
[data-theme="vv"] .set-group { border-radius: var(--radius); box-shadow: var(--shadow); }
[data-theme="vv"] .wh-panel { border-radius: 0 0 var(--radius) var(--radius); }
[data-theme="vv"] .watch-item.open { border-radius: var(--radius) var(--radius) 0 0; }
[data-theme="vv"] .w-new { color: var(--text); background: var(--sale); padding: 0 6px; border-radius: 8px; }
[data-theme="vv"] .deals-banner { background: var(--sale); color: var(--sale-text); border-radius: 16px; }
[data-theme="vv"] .cart-total-sum,
[data-theme="vv"] .cart-group-total,
[data-theme="vv"] .store-total { color: var(--accent-strong); font-weight: 900; }
[data-theme="vv"] .buy-item,
[data-theme="vv"] .rec-primary { border-radius: 16px; font-weight: 800; }
[data-theme="vv"] .open-store,
[data-theme="vv"] .rec-secondary,
[data-theme="vv"] .rec-photo { border-radius: 16px; border: none; background: var(--field); }
[data-theme="vv"] .nt-repeat,
[data-theme="vv"] .nt-over { border-radius: 16px; }
[data-theme="vv"] .nt-repeat { border: none; color: var(--accent-strong); }
[data-theme="vv"] .nt-modes { border-radius: 18px; box-shadow: var(--shadow); }
[data-theme="vv"] .nt-mode { border-radius: 14px; font-weight: 800; }
[data-theme="vv"] .nt-sec,
[data-theme="vv"] .nt-opt { border-radius: 16px; box-shadow: var(--shadow); }
[data-theme="vv"] .rec-input textarea { border-radius: 18px; box-shadow: var(--shadow); }
[data-theme="vv"] .ing-input { background: var(--field); border-radius: 12px; }
[data-theme="vv"] .opt-add { border: none; background: var(--accent); color: var(--accent-text); border-radius: 12px; }
[data-theme="vv"] .del-item { border: none; background: var(--field); }
[data-theme="vv"] .qty { background: var(--field); border-radius: 14px; }
[data-theme="vv"] .qty-btn { border-radius: 12px; color: var(--accent-strong); }

[data-theme="vv"] .set-title { color: var(--accent-strong); font-weight: 800; }
[data-theme="vv"] .net-toggle { border: none; font-weight: 700; }
[data-theme="vv"] .net-toggle.off { background: var(--field); }
[data-theme="vv"] .store-badge { border: none; background: var(--field); }

[data-theme="vv"] .empty-hero h2 { color: var(--accent-strong); font-weight: 900; }
[data-theme="vv"] .empty-hero .ic {
  background: var(--glass-btn); box-shadow: var(--glass-btn-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
[data-theme="vv"] .empty-hero .ic .i { width: 44px; height: 44px; }
[data-theme="vv"] .soon {
  background: var(--glass); box-shadow: var(--glass-edge); color: var(--text);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}

[data-theme="vv"] .net-row { border-bottom-color: var(--sep); }
[data-theme="vv"] .net-row .net-toggle { box-shadow: none; }
[data-theme="vv"] .pf-chip { border: none; background: var(--field); }
[data-theme="vv"] .pf-chip.on { background: var(--accent); }
[data-theme="vv"] .pf-col input { border: none; background: var(--field); border-radius: 12px; }

/* ── Скидки: карточка без обводки — фото на мягкой подложке, плашка скидки, лёгкий отклик ── */
[data-theme="vv"] .watch-item { padding: 12px; gap: 14px; transition: transform .15s ease, box-shadow .2s ease; }
[data-theme="vv"] .watch-item:active { transform: scale(.98); }
[data-theme="vv"] .watch-item img { width: 76px; height: 76px; border-radius: 16px; padding: 6px; background: var(--field); }
[data-theme="vv"] .wi-off {
  left: auto; right: -6px; top: -6px; bottom: auto; padding: 3px 7px; border-radius: 10px;
  background: var(--danger); box-shadow: 0 3px 8px rgba(238, 75, 62, .3);
}
[data-theme="vv"] .wi-store { display: flex; align-items: center; gap: 4px; }
[data-theme="vv"] .wi-name { font-weight: 600; line-height: 1.3; }
[data-theme="vv"] .wi-price { gap: 8px; }
[data-theme="vv"] .watch-item .w-new { font-size: 18px; padding: 1px 8px; border-radius: 10px; }
[data-theme="vv"] .buy-item { border-radius: 14px; transition: transform .12s ease; }
[data-theme="vv"] .buy-item:active { transform: scale(.94); }
[data-theme="vv"] .del-watch { width: 34px; height: 34px; border-radius: 50%; background: var(--field); display: grid; place-items: center; }

/* ── Рецепт: поле на стекле, карточки рецептов приподняты над полотном, как у Додо ── */
[data-theme="vv"] .rec-input textarea {
  border-radius: 22px; background: var(--glass-strong); box-shadow: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  padding: 14px 16px; transition: background-color .2s ease;
}
[data-theme="vv"] .rec-input textarea:focus { background: #fff; }
[data-theme="vv"] .rec-actions { gap: 10px; margin-top: 10px; }
[data-theme="vv"] .rec-photo,
[data-theme="vv"] .rec-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 24px; background: var(--glass-btn); box-shadow: var(--glass-btn-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  font-weight: 800;
}
[data-theme="vv"] .rec-photo { padding: 12px 18px; }
[data-theme="vv"] .rec-primary { border-radius: 24px; box-shadow: 0 8px 20px -8px rgba(40, 130, 60, .6); }

[data-theme="vv"] .set-title {
  text-transform: none; letter-spacing: 0; font-size: 20px; font-weight: 900;
  color: var(--text); margin: 22px 4px 12px;
}
[data-theme="vv"] .saved-list { gap: 10px; }
[data-theme="vv"] .saved-row {
  padding: 12px 12px 12px 12px; border-radius: 22px;
  background: var(--raised); box-shadow: var(--raised-shadow);
  transition: transform .15s ease;
}
[data-theme="vv"] .saved-row:active { transform: scale(.98); }
/* значок — в стеклянном кружке, название и число ингредиентов — двумя строками */
[data-theme="vv"] .saved-open {
  display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center;
  font-size: 15px; font-weight: 800; line-height: 1.25;
}
[data-theme="vv"] .saved-open .i {
  grid-row: span 2; width: 44px; height: 44px; padding: 11px; margin: 0; border-radius: 50%;
  color: var(--accent-strong);
  background: var(--glass-btn), color-mix(in srgb, var(--accent-soft) 70%, transparent);
  box-shadow: var(--glass-btn-edge);
}
[data-theme="vv"] .saved-cnt { margin: 2px 0 0; font-size: 12.5px; font-weight: 600; }
[data-theme="vv"] .saved-del {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-btn); box-shadow: var(--glass-btn-edge);
}

/* распознанный рецепт и подбор по сетям */
[data-theme="vv"] .rec-card,
[data-theme="vv"] .shop-card { border-radius: 24px; background: var(--raised); box-shadow: var(--raised-shadow); }
[data-theme="vv"] .rec-card { padding: 16px; }
[data-theme="vv"] .rec-title { font-size: 20px; font-weight: 900; }
[data-theme="vv"] .ing-input { border-radius: 14px; background: rgba(240, 244, 238, .9); padding: 11px 13px; }
[data-theme="vv"] .ing-del {
  width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-btn); box-shadow: var(--glass-btn-edge);
}
[data-theme="vv"] .ing-add { color: var(--accent-strong); font-weight: 800; }
[data-theme="vv"] .rec-modes { gap: 10px; }
[data-theme="vv"] .rec-secondary { padding: 13px; }

/* ── Скидки: чипы как у поиска, товары — приподнятые карточки, история цен — продолжение карточки ── */
[data-theme="vv"] .deal-chip {
  border: none; border-radius: 22px; padding: 10px 15px; font-weight: 800;
  background: var(--glass); box-shadow: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
[data-theme="vv"] .deal-chip.active { background: #fff; color: var(--text); box-shadow: 0 10px 18px -6px rgba(47, 158, 68, .55); }
[data-theme="vv"] .deal-chip.active .i { color: var(--accent); }
[data-theme="vv"] .watch-item { border-radius: 24px; background: var(--raised); box-shadow: var(--raised-shadow); margin-bottom: 12px; }
[data-theme="vv"] .watch-item img { background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 40, 25, .05); }
[data-theme="vv"] .watch-item.open { border-radius: 24px 24px 0 0; box-shadow: inset 0 1px 0 #fff; margin-bottom: 0; }
[data-theme="vv"] .wh-panel {
  border-radius: 0 0 24px 24px; background: var(--raised); box-shadow: 0 12px 26px rgba(20, 40, 25, .11);
  margin-bottom: 12px; padding: 4px 16px 14px;
}
[data-theme="vv"] .wh-row { border-top-color: rgba(20, 40, 25, .06); }
[data-theme="vv"] .del-watch { background: var(--glass-btn); box-shadow: var(--glass-btn-edge); }
[data-theme="vv"] .link-add button { border-radius: 26px; box-shadow: 0 8px 20px -8px rgba(40, 130, 60, .6); }

/* ── Корзина: группа сети — приподнятая карточка, счётчик и удалить — на стекле ── */
[data-theme="vv"] .cart-head { font-size: 20px; font-weight: 900; margin: 4px 4px 14px; }
[data-theme="vv"] .cart-group { border-radius: 26px; padding: 16px; background: var(--raised); box-shadow: var(--raised-shadow); margin-bottom: 14px; }
[data-theme="vv"] .cart-group-head { font-size: 16px; font-weight: 900; }
[data-theme="vv"] .cart-item { border-top-color: rgba(20, 40, 25, .06); padding: 10px 0; gap: 12px; }
[data-theme="vv"] .cart-item img { width: 56px; height: 56px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 40, 25, .05); }
[data-theme="vv"] .qty { background: rgba(240, 244, 238, .9); border-radius: 18px; padding: 3px; }
[data-theme="vv"] .qty-btn { width: 32px; height: 30px; border-radius: 15px; background: #fff; box-shadow: 0 1px 3px rgba(20, 40, 25, .12); }
[data-theme="vv"] .buy-item { border-radius: 18px; padding: 8px 14px; font-size: 13px; }
[data-theme="vv"] .del-item {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-btn); box-shadow: var(--glass-btn-edge);
}
[data-theme="vv"] .open-store {
  border-radius: 20px; padding: 12px; font-weight: 800; color: var(--accent-strong);
  background: var(--glass-btn), var(--accent-soft); box-shadow: var(--glass-btn-edge);
}
[data-theme="vv"] .cart-total { font-size: 18px; font-weight: 900; }

/* ── БЖУ: переключатель — стеклянная дорожка с белой плашкой, день и разделы — приподнятые карточки ── */
[data-theme="vv"] .nt-modes {
  padding: 5px; border-radius: 26px; background: var(--glass); box-shadow: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
[data-theme="vv"] .nt-mode { border-radius: 22px; padding: 11px 8px; font-size: 15px; font-weight: 800; }
[data-theme="vv"] .nt-mode.active { background: #fff; color: var(--accent-strong); box-shadow: 0 1px 2px rgba(20, 40, 25, .06), 0 6px 16px rgba(20, 40, 25, .12); }
[data-theme="vv"] .nt-day { border-radius: 28px; padding: 16px; background: var(--raised); box-shadow: var(--raised-shadow); margin-bottom: 14px; }
[data-theme="vv"] .nt-day::before { display: none; }
[data-theme="vv"] .nt-day-title { font-size: 20px; font-weight: 900; padding: 0 2px; }
/* «Сегодня» и «Осталось 1,335 ккал» — в одну строку и на 375 px */
[data-theme="vv"] .nt-day-nav { gap: 2px; }
[data-theme="vv"] .nt-day-step {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--glass-btn); box-shadow: var(--glass-btn-edge);
}
[data-theme="vv"] .nt-ring { --size: 124px; --w: 12px; filter: drop-shadow(0 6px 12px rgba(255, 90, 31, .18)); }
[data-theme="vv"] .nt-ring::after { background: #fff; box-shadow: inset 0 2px 6px rgba(20, 40, 25, .06); }
[data-theme="vv"] .nt-day-left { border-radius: 14px; padding: 5px 9px; font-weight: 800; }
[data-theme="vv"] .nt-mlabel { font-weight: 700; }
[data-theme="vv"] .nt-mrow .nt-bar { height: 9px; border-radius: 5px; }
[data-theme="vv"] .nt-sections { gap: 10px; }
[data-theme="vv"] .nt-sec {
  gap: 10px; padding: 12px; border-radius: 22px; font-size: 14.5px; font-weight: 800;
  background: var(--raised); box-shadow: var(--raised-shadow);
}
[data-theme="vv"] .nt-sec .i {
  width: 40px; height: 40px; padding: 9px; border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
[data-theme="vv"] .nt-meals { gap: 8px; margin-bottom: 12px; }
[data-theme="vv"] .nt-meals .refine-chip { gap: 4px; padding: 11px 2px 9px; border-radius: 20px; font-size: 13px; font-weight: 800; }
[data-theme="vv"] .nt-meals .refine-chip .i { width: 24px; height: 24px; }
[data-theme="vv"] .nt-meals .refine-chip.active { color: var(--accent-strong); }
[data-theme="vv"] .nt-repeat { border-radius: 22px; background: var(--glass-btn), color-mix(in srgb, var(--accent-soft) 70%, transparent); box-shadow: var(--glass-btn-edge); }
[data-theme="vv"] .nt-meal-card .store-head { font-size: 16px; font-weight: 900; }
[data-theme="vv"] .nt-entry { border-top-color: rgba(20, 40, 25, .06); }
[data-theme="vv"] .nt-del { width: 34px; height: 34px; padding: 0; flex-shrink: 0; border-radius: 50%; background: var(--glass-btn); box-shadow: var(--glass-btn-edge); }
[data-theme="vv"] #v-nutrition .set-title { font-size: 17px; }
[data-theme="vv"] .nt-ring-in .i { width: 22px; height: 22px; margin-bottom: 3px; }

/* ── БЖУ: ввод и быстрые записи — одной карточкой; внутри слои на светлой подложке, разделены линией ── */
[data-theme="vv"] .nt-log { padding: 16px; margin-bottom: 16px; border-radius: 28px; background: var(--raised); box-shadow: var(--raised-shadow); }
[data-theme="vv"] .nt-log > .set-title { margin: 0 2px 12px; }
[data-theme="vv"] .nt-log .refine-chip,
[data-theme="vv"] .nt-log .rec-photo {
  background: rgba(240, 244, 238, .95); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-theme="vv"] .nt-log .refine-chip.active { background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1.5px var(--accent); }
[data-theme="vv"] .nt-log .refine-chip.active .i { color: var(--accent); }
[data-theme="vv"] .nt-log .refine-chip.nt-quick.done { background: #e3f6e8; color: #1f9d55; box-shadow: inset 0 0 0 1.5px #3cc272; }
[data-theme="vv"] .nt-log .nt-meals { margin-bottom: 0; }
[data-theme="vv"] .nt-log #ntQuick:not(:empty),
[data-theme="vv"] .nt-log #ntLookups:not(:empty) { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(20, 40, 25, .07); }
[data-theme="vv"] .nt-log #ntQuick .set-title,
[data-theme="vv"] .nt-log #ntLookups .set-title { margin: 0 2px 10px; font-size: 14px; font-weight: 800; color: var(--hint); }
[data-theme="vv"] .nt-log .refine-row { margin-bottom: 0; padding-bottom: 2px; }
[data-theme="vv"] .nt-log .nt-repeat { margin: 0 0 12px; }
[data-theme="vv"] .nt-log .rec-input { margin: 0; }
[data-theme="vv"] .nt-meals.with-sport { gap: 5px; }
[data-theme="vv"] .nt-meals.with-sport .refine-chip { font-size: 12px; }
[data-theme="vv"] .nt-log .nt-sports { margin: 14px 0 12px; padding-top: 14px; border-top: 1px solid rgba(20, 40, 25, .07); }
[data-theme="vv"] .nt-log .set-group { background: rgba(240, 244, 238, .95); box-shadow: none; border-radius: 20px; }
[data-theme="vv"] .nt-log .set-row { border-bottom-color: rgba(20, 40, 25, .06); }
[data-theme="vv"] .nt-log .nt-field input,
[data-theme="vv"] .nt-log .nt-sport-text { background: #fff; border-color: transparent; }
[data-theme="vv"] .nt-log .nt-act-hint { margin: 12px 4px 0; }
/* дневник тренировок: сегменты интенсивности, упражнения и неделя — на той же светлой подложке */
[data-theme="vv"] .nt-log .nt-levels { margin-bottom: 12px; border-radius: 18px; background: rgba(240, 244, 238, .95); }
[data-theme="vv"] .nt-level { border-radius: 14px; }
[data-theme="vv"] .nt-level.active { background: #fff; color: var(--accent-strong); box-shadow: inset 0 0 0 1.5px var(--accent); }
[data-theme="vv"] .nt-log .nt-ex { border-radius: 20px; background: rgba(240, 244, 238, .95); }
[data-theme="vv"] .nt-log .nt-ex-name,
[data-theme="vv"] .nt-log .nt-set-in { background: #fff; border-color: transparent; }
[data-theme="vv"] .nt-log .nt-ex-hints .refine-chip { background: #fff; }
[data-theme="vv"] .nt-log #ntEx > .set-title { font-size: 14px; font-weight: 800; }
[data-theme="vv"] .nt-wk-cell { border-radius: 18px; background: rgba(240, 244, 238, .95); }
[data-theme="vv"] .nt-log #ntQuick + .rec-input { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(20, 40, 25, .07); }
[data-theme="vv"] .nt-log .rec-input textarea {
  background: rgba(240, 244, 238, .95); box-shadow: inset 0 1px 2px rgba(20, 40, 25, .05);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-theme="vv"] .nt-log .rec-input textarea:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); }
[data-theme="vv"] #v-nutrition .rec-primary { box-shadow: 0 8px 20px -8px rgba(255, 77, 46, .6); }
[data-theme="vv"] #v-nutrition .nt-note { margin: 0 6px; }