/* ---- THEME ---- */
    :root{
      --bg-base: linear-gradient(180deg, #0b1220, #0f1830 35%, #0b1220);
      --bg-1: radial-gradient(1200px 700px at 10% 10%, rgba(36,113,255,.55), transparent 60%),
              radial-gradient(1000px 800px at 90% 20%, rgba(255,74,109,.45), transparent 60%),
              radial-gradient(900px 700px at 30% 90%, rgba(108,43,217,.45), transparent 60%);
      --glass-bg: rgba(255,255,255, .10);
      --glass-border: rgba(255,255,255, .28);
      --txt-1: #f5f7ff; --txt-2: #d7def9; --txt-3: #aeb7d9;
      --btn-start: #2d77ff; --btn-end: #0db2ff; --btn-txt: #ffffff;
      --chip-bg: rgba(255,255,255,.14); --chip-border: rgba(255,255,255,.28);
      --card-radius: 22px; --gap: 16px; --shadow-1: 0 10px 30px rgba(0,0,0,.25);
    }
    @media (prefers-color-scheme: light){
      :root{
        --bg-base: linear-gradient(180deg, #f2f5ff, #ffffff);
        --glass-bg: rgba(255,255,255,.66);
        --glass-border: rgba(16,18,34,.12);
        --txt-1: #0c1222; --txt-2: #2a3559; --txt-3: #4c5a88;
        --chip-bg: rgba(255,255,255,.85); --chip-border: rgba(16,18,34,.08);
      }
    }

    /* ---- RESET ---- */
    *, *::before, *::after{ box-sizing: border-box; }
    html,body{ height:100%; }
    body{
      margin:0; font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", Segoe UI, Roboto, Inter, Arial, sans-serif;
      color: var(--txt-1); background: var(--bg-base) fixed;
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* ---- BACKDROP ---- */
    .bgfx{ position: fixed; inset: -10%; z-index: -1; background: var(--bg-1); filter: blur(48px) saturate(1.15); transform: scale(1.05); will-change: transform,filter; }

    /* ---- LAYOUT ---- */
    .app{ max-width: 880px; margin: 0 auto; padding: 22px; }
    .header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin: 8px 0 18px;
      padding: 14px 18px; border-radius: 28px; backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
      background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-1); }
    .logo{ font-size: 26px; font-weight: 700; letter-spacing:.2px; }
    .badge{ color: var(--txt-3); font-size: 14px; }
    .grid{ display: grid; grid-template-columns: 1fr; gap: var(--gap); }

:root{
  --pc-top-inset: 0px; /* выставим из JS */
  --pc-safe-top: max(env(safe-area-inset-top, 0px), var(--pc-top-inset, 0px));
}

.app{
  max-width: 880px;
  margin: 0 auto;
  padding: calc(44px + var(--pc-safe-top)) 22px 22px;
}

    .card{ position: relative; padding: 18px; border-radius: var(--card-radius); background: var(--glass-bg); border:1px solid var(--glass-border);
      backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); box-shadow: var(--shadow-1); }
    .card h2{ margin: 2px 4px 14px; font-size: 22px; letter-spacing:.2px }
    .muted{ color: var(--txt-2); }

    /* ---- SCAN ---- */
    .drop{ display:grid; grid-template-columns: 84px 1fr; gap:14px; align-items:center; padding:14px; border-radius: 16px; border:1px dashed var(--glass-border); background: rgba(255,255,255,.08); }
    .drop .slot{ width:84px; height:84px; display:grid; place-items:center; border-radius: 18px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.06); font-size: 34px; color: var(--txt-2); overflow: hidden; }
    .drop .slot img{ width:100%; height:100%; object-fit: cover; border-radius: 18px; display:block; }

    .btn{ appearance:none; border:0; border-radius:16px; padding:14px 18px; font-weight:600; background: linear-gradient(180deg, var(--btn-start), var(--btn-end)); color: var(--btn-txt);
      box-shadow: 0 6px 18px rgba(13,178,255,.35), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .06s ease, filter .1s ease, opacity .2s ease; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
    .btn:disabled{ opacity:.6; cursor:not-allowed; } .btn:active{ transform: translateY(1px) scale(.998); }
    .row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
    .row.equal .btn{ flex:1 1 0; text-align:center; }

/* единая полоса действий «Найденные продукты» */
.actions-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.actions-bar #manualItem{ flex:1 1 260px; }

/* главный CTA: чуть ярче и визуально «тяжелее» */
.btn-main{
  filter: saturate(1.25);
  box-shadow: 0 10px 26px rgba(13,178,255,.38), inset 0 1px 0 rgba(255,255,255,.28);
  /* прижимаем вправо, чтобы кнопка стояла на конце ряда */
  margin-left: auto;
}

/* малозаметная "Сбросить" */
.btn-ghost{
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--txt-3);
  box-shadow: none;
}
.btn-ghost:hover{ background: rgba(255,255,255,.06); color: var(--txt-2); }

/* на узких экранах — главный CTA на всю ширину ниже */
@media (max-width: 520px){
  .actions-bar .btn-main{ order: 4; flex: 1 1 100%; }
}

    /* ---- ITEMS ---- */
    .chips{ display:flex; flex-wrap:wrap; gap:10px; margin: 8px 0 6px; }
/* list-вид для найденных продуктов (только #items) */
#items{ display:block; gap:0; } /* переопределяем .chips */
#items .item-row{ display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--glass-border); }
#items .item-row:last-child{ border-bottom:0; }
#items .item-row .ico{ font-size:22px; width:28px; text-align:center; }
#items .item-row .name{ flex:1; font-weight:600; text-transform:capitalize; }
#items .item-row .qty{ color: var(--txt-2); min-width:78px; text-align:right; }
#items .item-row .del{ background:transparent; border:0; font-weight:700; color:var(--txt-3); cursor:pointer; margin-left:8px; }

#items .item-row .name.is-editing{
  cursor: text;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

/* inline-rename: нормальный input прямо в строке */
#items .item-row .name-input{
  flex: 1;
  min-width: 0;

  font: inherit;
  font-weight: 600;
  color: var(--txt-1);

  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 6px 10px;

  outline: none;
}
#items .item-row .name-input:focus{
  background: rgba(255,255,255,.10);
}

/* Shopping list looks like items */
#shoplist{ display:block; gap:0; }
#shoplist .item-row{ display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--glass-border); }
#shoplist .item-row:last-child{ border-bottom:0; }
#shoplist .item-row .name{ flex:1; font-weight:600; }
#shoplist .item-row .qty{ color: var(--txt-2); min-width:78px; text-align:right; }
#shoplist .item-row .del{ background:transparent; border:0; font-weight:700; color:var(--txt-3); cursor:pointer; margin-left:8px; }

/* Плавная анимация панели редактирования (в стиле Apple) */
#editBar{
  overflow: hidden;
  transition:
    height .26s cubic-bezier(.22,.61,.36,1),
    opacity .26s cubic-bezier(.22,.61,.36,1),
    transform .26s cubic-bezier(.22,.61,.36,1);
  will-change: height, opacity, transform;
}


    .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background: var(--chip-bg); border:1px solid var(--chip-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .chip button{ background: transparent; border:0; cursor:pointer; color: var(--txt-3); font-weight:700; }

    .input, textarea{ width:100%; border:1px solid var(--glass-border); background: rgba(255,255,255,.14); border-radius: 14px; padding: 12px 14px; color: var(--txt-1); outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
    textarea{ min-height: 84px; resize: vertical; }

    /* ---- FILTERS ---- */
    .filters{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 12px; }
    .filter-item{ display:flex; align-items:center; justify-content:space-between; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.08); border:1px solid var(--glass-border); }
    .filter-item label{ font-weight:600; color: var(--txt-2); cursor:pointer; }

    .switch{ position: relative; width: 56px; height: 32px; border-radius: 999px; flex:0 0 auto; background: rgba(255,255,255,.16); border: 1px solid var(--glass-border); cursor: pointer; }
    .switch input{ appearance:none; position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
    .switch .knot{ position:absolute; top:2px; left:2px; width:28px; height:28px; border-radius: 50%; background: linear-gradient(180deg, #ffffff, #e6f0ff); box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: left .18s ease; pointer-events:none; }
    .switch input:checked + .knot{ left:26px; }
    .switch input:checked ~ .bg{ position:absolute; inset:0; border-radius:999px; background: linear-gradient(90deg, var(--btn-start), var(--btn-end)); filter: saturate(1.2); opacity:.9; pointer-events:none; }

/* --- фикс кликов по тумблерам --- */
.switch { position: relative; touch-action: manipulation; }
.switch input{
  -webkit-appearance: none; appearance: none;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; z-index: 2; /* поверх декора */
}
.switch .knot, .switch .bg { pointer-events: none; }  /* пропускаем тап к input */
.switch .bg { position: absolute; inset: 0; border-radius: 999px; } /* всегда позиционирована */


    .actions{ display:flex; gap:12px; flex-wrap:wrap; }

    /* ---- RECIPES ---- */
    .recipes{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }
    .recipe{ overflow:hidden; }
    .recipe .img{ width:100%; height: 160px; border-radius: 14px; background: rgba(255,255,255,.2); border:1px solid var(--glass-border); display:block; object-fit: cover; }
    .meta{ display:flex; gap:10px; color: var(--txt-2); font-size: 14px; }
    .tag{ padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.14); border:1px solid var(--glass-border); font-size: 12px; }
    .list{ padding-left: 18px; }

    /* уменьшить зазор между заголовком и списком в карточке рецепта */
    .recipes .list{ margin-top: 8px; }          /* работает и для ul.list, и для ol.list */

#recipes .qa label{ display:block; margin: 8px 0 6px; }
#recipes .qa .input{ display:block; margin-bottom: 10px; }
/*#recipes .qa .btn{ margin-top: 3px; }*/
    .recipes ol.list li{ margin-bottom: 0.25em; }
    .recipes ol.list li:last-child{ margin-bottom: 0; }

    /* ---- BUSY ---- */
    .busy{ position: fixed; inset: 0; display:none; place-items:center; z-index: 50; }
    .busy.active{ display:grid; }
    .spinner{ width:68px; height:68px; border-radius: 50%; background: conic-gradient(from 0deg, var(--btn-start), var(--btn-end)); -webkit-mask: radial-gradient(circle 24px, transparent 96%, #000 100%), radial-gradient(circle, #000 67%, transparent 68%); mask: radial-gradient(circle 24px, transparent 96%, #000 100%), radial-gradient(circle, #000 67%, transparent 68%); animation: spin 1s linear infinite; filter: drop-shadow(0 6px 18px rgba(13,178,255,.6)); }
    @keyframes spin{ to{ transform: rotate(1turn); } }

    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

    /* ---- RESPONSIVE ---- */
    @media (max-width: 400px){ .drop{ grid-template-columns: 1fr; } }


/* Сомнительные находки — карточки с вариантами */
#uncertain .unc-card{
  display:flex; flex-direction:column; gap:8px;
  padding:10px 12px; border:1px solid var(--glass-border);
  border-radius:14px; background: var(--glass-bg);
}
/* собственный вариант внутри карточки */
#uncertain .own-wrap{ display:none; gap:8px; margin-top:6px; }
#uncertain .own-wrap .input{ flex:1; }

/* одинаковая ширина карточек "Сомнительных находок" */
#uncertain{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* все колонки равной ширины */
  gap: 12px;
}

/* убираем межкарточный margin, т.к. теперь используем grid-gap */
#uncertain .unc-card + .unc-card{ margin-top: 0; }

/*#uncertain .unc-card + .unc-card{ margin-top:8px; }*/
#uncertain .title{ font-weight:600; }
#uncertain .conf{ color: var(--txt-3); font-size:12px; }
#uncertain .opts{ display:flex; flex-wrap:wrap; gap:6px; }
#uncertain .opt{
  padding:6px 10px; border-radius:999px; border:1px solid var(--glass-border);
  background: rgba(255,255,255,.06); cursor:pointer;
}
#uncertain .opt.active{ background: rgba(255,255,255,.18); border-color: var(--chip-border); }
#uncertain .unc-actions{ display:flex; gap:8px; justify-content:flex-end; }
#uncertain .link{ background:transparent; border:0; color: var(--txt-3); cursor:pointer; }

/* --- увеличить расстояние в Q&A --- */
.qa h3 {
  margin-bottom: 12px;    /* отступ между заголовком и полем ввода */
}
.qa textarea {
  margin-bottom: 12px;    /* отступ между полем и кнопкой */
  display: block;         /* гарантирует, что отступ сработает */
}

#editBar .qty-ctrls{ display:flex; gap:6px; }
#editBar .step{
  border:1px solid var(--glass-border);
  background: rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 12px;
  font-weight:700;
  color: var(--txt-1);
  line-height:1;
  cursor:pointer;
}
#editBar .step:active{ transform: translateY(1px); }

button, .btn, .step {
  touch-action: manipulation;       /* запрещает зум и панорамирование */
  -webkit-user-select: none;        /* не выделять текст */
  -webkit-tap-highlight-color: transparent; /* убирает серый флеш при тапе */
}

/*
html, body {
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
*/

/* --- bottom sections & nav --- */
/*.sections{
  max-width: 880px; margin: 0 auto; padding: 0 22px 90px;   отступ под таббар 
}
.sections .tab{ display:none; }
.sections .tab.active{ display:block; }*/

/* --- full-screen screens --- */
.screen{ display:none; }
.screen.active{ display:block; }

/*.tabbar{
  position: fixed; left:0; right:0; bottom:0; z-index: 60;
  display:grid; grid-template-columns: repeat(4,1fr); gap:8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px)
  background: var(--glass-bg); border-top:1px solid var(--glass-border);
}
.tabbar button{
  appearance:none; border:1px solid var(--glass-border); background: rgba(255,255,255,.08);
  border-radius: 14px; padding: 10px 8px; color: var(--txt-1); font-weight: 600; cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.tabbar button.active{ background: linear-gradient(180deg, var(--btn-start), var(--btn-end)); color: var(--btn-txt); }
*/

/* --- Tabbar: glass capsule + single highlight (one canonical block) --- */
:root{
  --tabbar-h: calc(88px + env(safe-area-inset-bottom));
}

/* контейнер-капсула */
#tabbar{
  position: fixed;
  left: 0; right: 0;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(calc(100% - 22px), 880px);
  height: 76px;
  margin: 0 auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  align-items: center;
  gap: 0;

  border-radius: 9999px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.16);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  z-index: 50;
  isolation: isolate;
  --hl-gap: 1px; /* 0–2px обычно идеально */
  --hl-inset: 1px;   /* микро-воздух вокруг хайлайта */
  --hl-bleed: 6px;   /* насколько хайлайт залезает в padding капсулы */
}

/* мягкое внешнее свечение */
#tabbar::before{
  content:"";
  position:absolute; inset:-10px;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 50% 0%,
              rgba(255,255,255,.20), rgba(255,255,255,0) 60%);
  filter: blur(18px);
  z-index: -1;
}

@media (prefers-color-scheme: light){
  #tabbar{ background: rgba(255,255,255,.32); }
}

/* кнопки */
#tabbar button{
  appearance: none;
  border: 0;
  background: transparent !important;
  color: var(--txt-2);
  height: 100%;
  padding: 6px 4px;
  display: grid;
  grid-auto-flow: row;
  place-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font-weight: 600;
  position: relative;
  z-index: 1; /* поверх highlight */
}

/* подпись из aria-label */
#tabbar button::after{
  content: attr(aria-label);
  font-size: 11px;
  line-height: 1;
  opacity: .9;
}

/* иконки монохромные */
#tabbar .ico{ position: relative; line-height: 1; display: block; }
#tabbar .ico svg{ width: 24px; height: 24px; stroke: currentColor; opacity: 0.9; display:block; }

#tabbar button.active{ color: var(--txt-1); }
#tabbar button.active .ico svg{ opacity: 1; }

/* один общий highlight на контейнере */
#tabbar::after{
  content:"";
  position:absolute; left:0; top:0;
  width: var(--hl-w, 108px);
  height: var(--hl-h, 69px);

  border-radius:9999px;
  pointer-events:none;
  z-index:0;

  background: rgba(255,255,255,.22);
  border: 0;
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.08);

  transform: translate3d(var(--hl-x, 0px), var(--hl-y, 0px), 0) translate(-50%, -50%);
  opacity: 0;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .18s ease-out;
}

#tabbar.hl-on::after{ opacity: 1; }

/* лёгкий физический отклик */
#tabbar button:active{ transform: translateY(.5px) scale(.95); }

@media (max-width: 380px){
  #tabbar{ height: 72px; }
  #tabbar .ico svg{ width: 22px; height: 22px; }
  #tabbar button::after{ font-size: 11px; }
}

/* чтобы контент не уезжал под таббар */
.app{ padding-bottom: calc(22px + var(--tabbar-h)); }

html[data-theme="light"]{
  color-scheme: light;
  --bg-base: linear-gradient(180deg, #f2f5ff, #ffffff);
  --glass-bg: rgba(255,255,255,.66);
  --glass-border: rgba(16,18,34,.12);
  --txt-1: #0c1222; --txt-2: #2a3559; --txt-3: #4c5a88;
  --chip-bg: rgba(255,255,255,.85); --chip-border: rgba(16,18,34,.08);
}

html[data-theme="dark"]{
  color-scheme: dark;
  --bg-base: linear-gradient(180deg, #0b1220, #0f1830 35%, #0b1220);
  --glass-bg: rgba(255,255,255, .10);
  --glass-border: rgba(255,255,255, .28);
  --txt-1: #f5f7ff; --txt-2: #d7def9; --txt-3: #aeb7d9;
  --chip-bg: rgba(255,255,255,.14); --chip-border: rgba(255,255,255,.28);
}
/* === AMOLED: true black === */
html[data-theme="amoled"]{
  color-scheme: dark;
  /* абсолютный чёрный фон */
  --bg-base: linear-gradient(180deg, #000000, #050505 40%, #000000);
  --bg-1: none;           /* никаких цветных пятен */

  /* стекло минимально заметное, чтобы читалось */
  --glass-bg: rgba(255,255,255,.04);
  --glass-border: rgba(255,255,255,.12);

  --txt-1:#ffffff; --txt-2:#dfe6ff; --txt-3:#9aa3c1;

  /* чипы и кнопки оставим контрастными */
  --chip-bg: rgba(255,255,255,.06);
  --chip-border: rgba(255,255,255,.16);
  --btn-start:#00d1ff; --btn-end:#00ffa3; --btn-txt:#071013;
}

/* Всегда уважать HTML-атрибут hidden (иначе авторские display:* могут его перебить) */
[hidden]{
  display: none !important;
}

/* --- Recipes: empty state --- */
.btn-shortcut{
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.1;
  margin-left: auto;
}

.recipes-empty{
  margin-top: 10px;
  padding: 16px 14px;
  border-radius: 18px;
  text-align: center;
  border: 1px dashed var(--glass-border);
  background: rgba(255,255,255,.06);
  display: grid;
  gap: 12px;
}
.recipes-empty .row{ justify-content: center; }
.recipes-empty p{ margin: 0; }

/* --- Recipes: quick prefs --- */
.rx-quick{
  margin-top: 10px;
  margin-bottom: 12px;
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--glass-border);
  display: grid;
  gap: 10px;
}
.rx-notes{
  min-height: 44px;
  resize: none;
  margin-top: 10px;
}
.rx-gen-actions{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.rx-inv-hint{
  font-size: 12px;
  line-height: 1.2;
  opacity: .9;
}
.rx-gen-head{
  display: grid;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.rx-gen-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.rx-gen-title{
  font-weight: 900;
  letter-spacing: .01em;
}
.rx-gen-chev{
  width: 18px;
  height: 18px;
  opacity: .9;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .18s ease;
}
.rx-gen-chev svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}
.rx-gen-sub{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
}
.rx-gen-summary{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 2px;
}
.rx-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}
.rx-quick.is-collapsed #rxGenBody{ display: none; }
.rx-quick.is-collapsed #rxGenSummary{ display: flex; }
.rx-quick.is-collapsed .rx-gen-chev{ transform: rotate(-90deg); }

.rx-gen-body{
  display: grid;
  gap: 10px;
}

.rx-more{
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  padding: 10px 10px 8px;
}
.rx-more[open]{ background: rgba(255,255,255,.08); }
.rx-more-sum{
  cursor: pointer;
  font-weight: 900;
  color: var(--txt-2);
}
.rx-more-sum::marker{ color: var(--txt-2); }

.rx-stepper{
  display:flex;
  align-items:center;
  gap: 8px;
}
.rx-step{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.10);
  color: var(--txt-1);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.rx-step:active{ transform: scale(.98); }
.rx-step-val{
  width: 76px;
  text-align: center;
  font-weight: 900;
}

/* --- Recipes: controls panel (search/sort/filters/tags/meta) --- */
.rx-panel{
  margin-top: 10px;
  margin-bottom: 12px;
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--glass-border);
  display: grid;
  gap: 10px;
}
.rx-panel-head{
  display:grid;
  gap: 2px;
}
.rx-panel-title{
  font-weight: 900;
  letter-spacing: .01em;
}
.rx-panel-sub{
  font-size: 12px;
}
.rx-panel-top{
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 420px){
  .rx-panel-top{ grid-template-columns: 1fr; }
}
.rx-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-chip{
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.10);
  color: var(--txt-1);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
}
.tag-chip[aria-pressed="true"]{
  background: rgba(255,255,255,.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.tag-chip:active{ transform: scale(.98); }
.rx-meta{ font-size: 13px; color: var(--txt-2); }

/* на всякий случай глушим сам слой с пятнами */
html[data-theme="amoled"] .bgfx{
  background: none !important;
  filter: none !important;
}
/* === AMOLED: приглушённые кнопки === */
html[data-theme="amoled"] .btn{
  /* приглушённый «стеклянный» фон вместо неонового */
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06));
  color: #eaf0ff;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); /* убрали внешнее свечение */
  filter: none;
}

html[data-theme="amoled"] .btn:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255,255,255,.06);
}

html[data-theme="amoled"] .btn:focus-visible{
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 2px rgba(255,255,255,.10);
}

html[data-theme="amoled"] .btn:disabled{
  opacity: .45;
}
html[data-theme="amoled"] .switch input:checked ~ .bg{
  background: linear-gradient(90deg, rgba(0,210,255,.75), rgba(0,255,163,.75));
}
html[data-theme="amoled"] .switch .knot{
  background: linear-gradient(180deg,#1b1b1d,#101112);
}


/* === Forest (dark green) === */
html[data-theme="forest"]{
  color-scheme: dark;
  --bg-base: linear-gradient(180deg, #0b1712, #0e241a 35%, #0b1712);
  --bg-1:
    radial-gradient(1200px 700px at 12% 8%,  rgba(66, 170, 120,.35), transparent 60%),
    radial-gradient(1000px 800px at 90% 18%, rgba(36, 113, 255,.22), transparent 60%),
    radial-gradient(900px 700px  at 30% 88%, rgba(18, 140, 126,.28), transparent 60%);
  --glass-bg: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.22);
  --txt-1:#eafaf3; --txt-2:#cfe8da; --txt-3:#9cb7a8;
  --chip-bg: rgba(255,255,255,.12); --chip-border: rgba(255,255,255,.24);
  --btn-start:#2bb673; --btn-end:#0fb27a; --btn-txt:#ffffff;
}

/* === Latte (warm light) === */
html[data-theme="latte"]{
  color-scheme: light;
  --bg-base: linear-gradient(180deg, #faf4eb, #ffffff);
  --bg-1:
    radial-gradient(1200px 700px at 14% 12%, rgba(227,180,120,.28), transparent 60%),
    radial-gradient(1000px 800px at 84% 18%, rgba(255,182,155,.24), transparent 60%),
    radial-gradient(900px 700px  at 30% 88%, rgba(244,214,154,.28), transparent 60%);
  --glass-bg: rgba(255,255,255,.72);
  --glass-border: rgba(100,70,40,.12);
  --txt-1:#2a2119; --txt-2:#5a4a3d; --txt-3:#8a7a6d;
  --chip-bg: rgba(255,255,255,.86); --chip-border: rgba(100,70,40,.10);
  --btn-start:#c58b5f; --btn-end:#e0a96d; --btn-txt:#1d120b;
}

:root{ --ease-apple: cubic-bezier(.22,.61,.36,1); }

html.theme-anim, html.theme-anim *{
  transition:
    color .5s var(--ease-apple),
    background-color .5s var(--ease-apple),
    background .5s var(--ease-apple),     /* добавили */
    border-color .5s var(--ease-apple),
    box-shadow .5s var(--ease-apple),
    filter .5s var(--ease-apple);
}

/* Временный слой, который кросс-фейдит старый фон */
.theme-xfade{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;                 /* остаётся под контентом */
  background: var(--xfade-bg, transparent);
  opacity: 1;
  transition: opacity 0.9s var(--ease-apple);
}

.theme-xfade::after{
  content:"";
  position:absolute;
  inset:-10%;
  background: var(--xfade-bgfx, transparent);
  filter: blur(48px) saturate(1.15);
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce){
  html.theme-anim, html.theme-anim *{ transition:none !important; }
  .theme-xfade{ transition:none !important; }
}
/* Медленнее кросс-фейд для View Transitions */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .5s;
  animation-timing-function: var(--ease-apple);
}

/* Страховка: синхронизируем длительность всей группы */
::view-transition-group(root){
  animation-duration: .5s;
  animation-timing-function: var(--ease-apple);
}

/* Collapsible cards (Profile & Saved recipes) */
.card.coll h2, .card.coll h3{              /* заголовок-кнопка */
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; cursor:pointer; user-select:none;
  margin: 2px 4px 6px;      /* компактнее в закрытом состоянии */
}
.card.coll.open h2, .card.coll.open h3{ margin: 2px 4px 14px; }

.card.coll h2::after, .card.coll h3::after{
  content:"▾";
  font-size:16px; line-height:1; opacity:.9;
  transition: transform .26s var(--ease-apple);
}
.card.coll.open h2::after, .card.coll.open h3::after{ transform: rotate(180deg); }


#savedRecipes .card.recipe.coll {
  position: relative; /* чтобы позиционирование стрелки было относительно карточки */
}

#savedRecipes .card.recipe.coll h3::after {
  content: "▾";
  position: absolute;
  right: 24px;           /* от правого края */
  bottom: 18px;          /* от нижнего края */
  font-size: 18px;
  opacity: 0.9;
  transform: rotate(0deg);
  transition: transform 0.3s var(--ease-apple);
  pointer-events: none;  /* не мешает кликам по заголовку */
}

#savedRecipes .card.recipe.coll.open h3::after,
#savedRecipes .card.recipe.coll h3[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.card .coll-body{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform: translateY(-6px);
  will-change: max-height, opacity, transform;
  transition:
    max-height .28s var(--ease-apple),
    opacity .22s var(--ease-apple),
    transform .28s var(--ease-apple);
  display:none;
}

@media (prefers-reduced-motion: reduce){
  .card .coll-body{ transition:none !important; transform:none !important; }
  .card.coll h2::after{ transition:none !important; }
}

/* Header icons (profile cards) */
.h-left{ display:flex; align-items:center; gap:10px; }
.h-ico{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.h-ico svg{ width:18px; height:18px; stroke: currentColor; fill: none; opacity:.95; }

/* --- Pantry ("Всегда есть") --- */
.pantry-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 420px){
  .pantry-list{ grid-template-columns: 1fr; }
}
.pantry-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.08);
}
.pantry-item input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: currentColor;
}
.pantry-item span{ font-weight: 700; }
.pantry-add .input{ flex: 1; }

.missing{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:6px; margin:6px 0 10px;
}
.missing .cta{ margin-right:auto; }

.btn-chip {
  appearance: none;
  cursor: pointer;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.15));
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--txt-1);
  backdrop-filter: blur(6px);
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), inset 0 0 2px rgba(255,255,255,0.3);
}
.btn-chip:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,255,255,0.25));
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), inset 0 0 2px rgba(255,255,255,0.4);
  transform: translateY(-1px);
}
.btn-chip:active {
  transform: scale(0.97);
  background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.2));
  box-shadow: inset 0 0 3px rgba(0,0,0,0.15);
}


/* на узких экранах переносим кнопку на новую строку */
@media (max-width: 380px){
  .missing .cta{ flex-basis:100%; margin-left:0; order:2; }
}

.missing {
  display: flex;
  flex-direction: column; /* каждый элемент на новой строке */
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 6px;
}
.missing-action {
  text-align: left; /* чтобы визуально примыкало к контенту */
  /*margin-top: 2px;*/
}
.missing-action .btn-chip {
  margin-bottom: 12px;
}

/* === Apple-like reveal for recipes === */
@media (prefers-reduced-motion: no-preference){
  .recipes{
    perspective: 1200px;
    transform-style: preserve-3d;
  }

  /* стартовое состояние карточки */
  .card.recipe{
    opacity: 0;
    transform: translateY(14px) scale(.985);
    filter: saturate(.9);
    will-change: transform, opacity, filter;
  }

  /* целевое состояние */
  .card.recipe.is-visible{
    opacity: 1;
    transform: none;
    filter: none;
    transition:
      opacity .5s var(--ease-apple),
      transform .5s var(--ease-apple),
      filter .6s var(--ease-apple);
  }

  /* картинка чуть «выплывает» отдельно от карточки */
  .card.recipe .img{
    transform: translateY(4px) scale(1.02);
    opacity: .95;
    will-change: transform, opacity;
  }
  .card.recipe.is-visible .img{
    transition:
      transform .7s var(--ease-apple) .02s,
      opacity .7s var(--ease-apple) .02s;
    transform: none;
    opacity: 1;
  }

  /* глянцевый блик поверх изображения (очень деликатный) */
  .card.recipe .img{
    position: relative;
    overflow: hidden;
  }
  .card.recipe .img::after{
    content:"";
    position:absolute; inset:-20% -60%;
    background:
      linear-gradient(120deg,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,.16) 45%,
        rgba(255,255,255,0) 60%);
    transform: translateX(-40%) rotate(8deg);
    opacity: 0; pointer-events:none;
  }
  .card.recipe.is-visible .img::after{
    animation: imgSheen 1.2s var(--ease-apple) .18s both;
  }
  @keyframes imgSheen{
    0%   { transform: translateX(-45%) rotate(8deg); opacity: 0; }
    15%  { opacity: .55; }
    100% { transform: translateX(55%)  rotate(8deg); opacity: 0; }
  }

  /* небольшая 3D-подсказка (едва заметный наклон при появлении) */
  .card.recipe{
    transform-origin: 50% 80%;
  }
  .card.recipe.is-visible{
    transform: none; /* целевое состояние — плоское */
  }
}

/*
.card.recipe{ position: relative; }
.card.recipe .save-btn{
  position:absolute; top:0px; right:0px;
  border:1px solid var(--glass-border);
  background: rgba(255,255,255,0.18);
  border-radius: 20px; padding:8px;
  color: var(--txt-1); opacity:.95; cursor:pointer;
}
.card.recipe .save-btn[aria-pressed="true"]{
  background: linear-gradient(180deg, var(--btn-start), var(--btn-end));
  color: var(--btn-txt);
}
.card.recipe .save-btn svg{ display:block; }
*/

.card.recipe { position: relative; }

.card.recipe .save-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: none;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card.recipe .save-btn svg {
  display: block;
  width: 22px;
  height: 22px;
}

.card.recipe .save-btn svg path {
  fill: rgba(255,255,255,0.80);                /* ⭐ белая по умолчанию */
  transition: fill 0.2s ease;
}

/* при сохранении — подсветить саму звёздочку */
.card.recipe .save-btn[aria-pressed="true"] svg path {
  fill: rgba(255, 215, 0,1);     /* или можно: var(--accent) */
}

/* на iOS/телеграм-вебвью старых версий иногда щёлкает фильтр — смягчим */
@supports not (animation-timeline: scroll()){
  .card.recipe{ backface-visibility: hidden; }
}

/* если пользователь просит поменьше анимации */
@media (prefers-reduced-motion: reduce){
  .card.recipe{ opacity: 0; }
  .card.recipe.is-visible{ opacity: 1; transition: opacity .2s linear; }
}

/* keyboard-aware hide */
#tabbar { transition: transform .24s var(--ease-apple); }
#tabbar.hide-for-kb{
  transform: translateY(calc(100% + 24px));  /* уезжает за пределы */
}

/* === Share button рядом со ⭐ === */
.card.recipe { position: relative; }

/* ⭐ чуть влево, чтобы справа встала «Поделиться» */
.card.recipe .save-btn{
  position: absolute;
  top: 10px;
  right: 42px;  /* было: 10px */
  border: none; background: none; padding: 6px; cursor: pointer;
  display:flex; align-items:center; justify-content:center;
}

/* кнопка «Поделиться» — тот же минималистичный стиль */
.card.recipe .share-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  border: none; background: none; padding: 6px; cursor: pointer;
  display:flex; align-items:center; justify-content:center;
}
.card.recipe .share-btn svg{
  width: 22px; height: 22px; display:block;
  stroke: rgba(255,255,255,0.90); fill: none; stroke-width: 2;
  transition: opacity .15s ease;
}
.card.recipe .share-btn:active{ transform: translateY(1px) scale(.98); }

/* светлая тема — делаем иконку чуть темнее для контраста */
@media (prefers-color-scheme: light){
  .card.recipe .share-btn svg{ stroke: rgba(16,18,34,0.9); }
}

/* — Заголовок рецепта не заходит под кнопки действий — */
.card.recipe h3,
#savedRecipes .card.recipe.coll h3{
  padding-right: 50px;      /* ~2 иконки + отступы */
  overflow-wrap: anywhere;  /* переносить длинные слова/строки */
  word-break: break-word;   /* поддержка старых движков */
}

/* На очень узких экранах — ещё чуть запас справа */
@media (max-width: 360px){
  .card.recipe h3,
  #savedRecipes .card.recipe.coll h3{
    padding-right: 112px;
  }
}

/* Гарантируем, что кнопки лежат поверх текста и кликабельны */
.card.recipe .save-btn,
.card.recipe .share-btn{
  z-index: 2;
}

/* --- Snackbar (Undo) --- */
.snackbar{
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 14px);
  transform: translateX(-50%) translateY(10px);
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(calc(100% - 22px), 560px);
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.14);
  border: 1px solid var(--glass-border);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: var(--shadow-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease-apple), transform .18s var(--ease-apple);
  z-index: 70;
}
.snackbar.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.snackbar .snack-msg{ color: var(--txt-2); flex: 1; }
.snackbar .snack-act{
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.10);
  color: var(--txt-1);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

/* --- Local modal fallback (scan apply) --- */
.pc-modal{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 80;
  background: rgba(0,0,0,.35);
}
.pc-modal.show{ display: grid; }
.pc-modal .box{
  width: min(420px, calc(100% - 32px));
  padding: 16px;
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: var(--shadow-1);
}
.pc-modal .title{ font-weight: 800; font-size: 18px; margin: 0 0 6px; }
.pc-modal .text{ color: var(--txt-2); margin: 0; }
.pc-modal .actions{ display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }