/* YumNyam. Стили страницы рецепта взяты из одобренного прототипа
   design/prototype-recipe.html — имена классов сохранены, чтобы сверять один в один.
   Ниже, отдельным блоком, стили главной. */

:root{
    --ground:#F5FAF7; --card:#FFFFFF; --mint:#B9D4C6; --mint-soft:#E6F0EA;
    --mustard:#E0B23C; --mustard-soft:#FBEFD2; --mustard-ink:#7A5A00;
    --pumpkin:#E3942A; --pumpkin-soft:#FBF0E1; --pumpkin-ink:#7D5117;
    --orange:#DF6B33; --orange-soft:#FBEAE2; --orange-ink:#8C3D14;
    --tomato:#D8483B; --tomato-soft:#FBE5E4; --tomato-ink:#A8342A;
    --tomato-deep:#C93F32;   /* заливка под белым текстом: 4.95:1 */
    /* Главная: зелёная глазурь. Белый текст на ней — 6.7:1, акцент под белым — 4.8:1 */
    --glaze:#2F6650; --on-glaze:#FFFFFF; --glaze-accent:#C4492C;
    --star:#F2B138;          /* вспышка за предметом в плитке */
    --ink:#1B2E25; --muted:#7E8F86; --line:#DDEBE3;
    --sans:'Geologica',system-ui,-apple-system,'Segoe UI',sans-serif;
    /* Заголовки — Comfortaa (выбор владельца 22 сентября): округлый, под пластилиновый
       логотип. Интерфейс и тексты остаются на Geologica. Максимальный вес у него 700. */
    --display:'Comfortaa','Geologica',system-ui,sans-serif;
    --maxw:720px;
  }
  *{box-sizing:border-box}
  body{background:var(--ground);color:var(--ink);font-family:var(--sans);margin:0;
       font-variation-settings:'SHRP' 25;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:16px;padding-block:0 48px}

  /* шапка */
  .bar{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line)}
  .bar__in{max-width:var(--maxw);margin:0 auto;padding:11px 16px;display:flex;align-items:center;gap:10px}
  .logo{font-weight:800;font-size:16px;letter-spacing:-.03em;white-space:nowrap;color:var(--ink);
        text-decoration:none}
  .field{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--ground);
         border:1.5px solid var(--line);border-radius:999px;padding:8px 13px}
  .field span:nth-child(2){flex:1;font-size:12.5px;color:var(--muted);white-space:nowrap;
         overflow:hidden;text-overflow:ellipsis}
  .login{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;text-decoration:none}
  .ctx{background:var(--mint-soft);border-bottom:1px solid var(--line)}
  .ctx__in{max-width:var(--maxw);margin:0 auto;padding:9px 16px;display:flex;align-items:center;
           gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--ink)}
  .ctx__btn{font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:999px;
            background:var(--tomato);color:#fff;text-decoration:none;white-space:nowrap}

  /* заголовок */
  h1{font-family:var(--display);font-size:clamp(26px,6vw,36px);font-weight:700;
    letter-spacing:-.02em;line-height:1.14;
     margin:26px 0 8px;text-wrap:balance}
  .meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px;
        font-variant-numeric:tabular-nums;margin-bottom:18px}
  .meta b{color:var(--ink);font-weight:600}
  /* Цвет метки закреплён за кухней и идёт шкалой от мягкого к жгучему:
     горчица → тыква → апельсин → помидор (таблица в tech-stack.md, backend/kuhni.js).
     Метки делаются подложкой: сплошная заливка остаётся только у главной кнопки,
     иначе помидорная метка спорит с помидорной кнопкой за внимание. */
  [data-k="1"]{--k-soft:var(--mustard-soft); --k-ink:var(--mustard-ink)}
  [data-k="2"]{--k-soft:var(--pumpkin-soft); --k-ink:var(--pumpkin-ink)}
  [data-k="3"]{--k-soft:var(--orange-soft);  --k-ink:var(--orange-ink)}
  [data-k="4"]{--k-soft:var(--tomato-soft);  --k-ink:var(--tomato-ink)}

  .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
  .tag{font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:999px}
  .tag--c{background:var(--k-soft,var(--mustard-soft));color:var(--k-ink,var(--mustard-ink))}
  .tag--t{background:var(--mint-soft);color:var(--ink)}
  .shot{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;display:block;
        margin-bottom:26px;max-width:100%}

  /* порции */
  .portions{background:var(--card);border:1px solid var(--line);border-radius:20px;
            padding:16px 18px;margin-bottom:8px}
  .portions__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .portions__l{font-size:13px;font-weight:600}
  .pbtns{display:flex;gap:6px}
  .pbtn{font:inherit;font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;
        border:1.5px solid var(--line);background:var(--ground);color:var(--ink);cursor:pointer;
        font-variant-numeric:tabular-nums;transition:background .15s,border-color .15s,color .15s}
  .pbtn:hover{border-color:var(--mint)}
  .pbtn:focus-visible{outline:2px solid var(--tomato);outline-offset:2px}
  .pbtn[aria-pressed="true"]{background:var(--tomato);border-color:var(--tomato);color:#fff}
  .ilist{display:flex;flex-direction:column}
  .irow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
        padding:7px 0;font-size:15px;font-variation-settings:'SHRP' 0;line-height:1.5}
  .irow+.irow{border-top:1px solid var(--line)}
  .iq{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
  .hints{display:flex;flex-direction:column;gap:8px;margin-top:14px}
  .hint{display:flex;gap:9px;padding:11px 13px;background:var(--mustard-soft);border-radius:14px;
        font-size:12.5px;line-height:1.5;color:var(--mustard-ink);font-variation-settings:'SHRP' 0}
  .hint__i{font-weight:800;flex:none}
  .note{font-size:11.5px;color:var(--muted);margin:10px 2px 28px;line-height:1.5}

  /* шаги */
  h2{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:0 0 14px}
  .steps{display:flex;flex-direction:column;gap:14px;margin-bottom:30px;padding:0;list-style:none;
         counter-reset:s}
  .step{display:flex;gap:12px;font-size:15px;line-height:1.7;font-variation-settings:'SHRP' 0;
        font-weight:400}
  .step::before{counter-increment:s;content:counter(s);flex:none;width:24px;height:24px;
        border-radius:50%;background:var(--tomato);color:#fff;font-size:12px;font-weight:700;
        display:flex;align-items:center;justify-content:center;margin-top:3px;
        font-variation-settings:'SHRP' 25}

  /* блок «а другое» */
  .more{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px}
  .more__t{font-size:15px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
  .more__s{font-size:12.5px;color:var(--muted);margin:0 0 14px}
  .more__b{display:flex;gap:8px;flex-wrap:wrap}
  .mbtn{font:inherit;font-size:13px;font-weight:600;padding:11px 15px;border-radius:999px;
        border:1.5px solid var(--line);background:var(--ground);color:var(--ink);cursor:pointer}
  .mbtn:hover{border-color:var(--mint)}
  .mbtn:focus-visible{outline:2px solid var(--tomato);outline-offset:2px}
  .mbtn--go{background:var(--mint);border-color:var(--mint)}
  .said{margin-top:14px;padding:13px;border-radius:14px;background:var(--mint-soft);
        font-size:13px;line-height:1.55;display:none}
  .said[data-on="1"]{display:block}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

  /* полоса обещаний */
  .perks{background:var(--card);border-bottom:1px solid var(--line)}
  .perks__in{max-width:var(--maxw);margin:0 auto;padding:12px 16px;display:grid;
             grid-template-columns:repeat(4,1fr);gap:0}
  .perk{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
        padding:0 6px;position:relative}
  .perk+.perk::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
        background:var(--line)}
  .perk svg{width:22px;height:22px;flex:none}
  .perk span{font-size:11.5px;line-height:1.3;font-weight:600;color:var(--ink);
        font-variation-settings:'SHRP' 0;text-wrap:balance}
  @media (max-width:430px){
    .perks__in{grid-template-columns:repeat(2,1fr);gap:12px 0}
    .perk:nth-child(3)::before{display:none}
  }

/* ── главная ───────────────────────────────────────────────────────────── */
/* Общее оформление YumNyam. Палитра и типографика — из memory-bank/tech-stack.md:
   мята с тёплой градацией, Geologica с осью остроты SHRP, острых углов нет нигде. */
*{box-sizing:border-box}
img{max-width:100%;display:block}

/* Шапка: логотип с подписью словами, поле ввода, «Войти». Разделов нет — каталог в подвале. */
@media (min-width:860px){ .шапка__поле{display:flex} }

/* ── чего не было в прототипе: там список продуктов и карточки рисовал скрипт,
      у нас они приходят в HTML, поэтому нужны свои правила ────────────────── */
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;
  font-size:13px;font-weight:400;font-variation-settings:'SHRP' 0;color:var(--ink)}
.field input::placeholder{color:var(--muted)}
.field button{border:0;background:var(--ink);color:var(--card);cursor:pointer;font:inherit;
  font-size:13px;width:28px;height:28px;border-radius:50%;flex:none}
.field button:hover{background:var(--tomato)}

.irow{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;font-weight:300;font-variation-settings:'SHRP' 0}
.irow:last-child{border-bottom:0}
.irow i{margin-left:auto;font-style:normal;font-weight:500;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.irow--bg{color:var(--muted)}
.ilist__sep{padding:14px 0 4px;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}

.shot--empty{display:flex;align-items:center;justify-content:center;background:var(--mint-soft);
  color:var(--muted);font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}

.vlist{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-top:14px}
.vcard{display:block;background:var(--ground);border:1px solid var(--line);border-radius:16px;
  padding:14px 16px;text-decoration:none;color:var(--ink);transition:border-color .2s ease}
.vcard:hover{border-color:var(--mint)}
.vcard__c{display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--k-ink,var(--pumpkin))}
.vcard b{display:block;margin:6px 0 4px;font-size:14.5px;font-weight:700;line-height:1.3}
.vcard small{color:var(--muted);font-size:12px;font-weight:500}

/* Выход в инструмент с поисковой страницы — главный урок GoVibester */
.wide{display:block;margin-top:30px;background:var(--tomato);color:#fff;text-align:center;
  text-decoration:none;font-weight:600;font-size:15px;padding:17px 22px;border-radius:999px}
.wide:hover{background:var(--orange)}

/* Плашка прототипа: страница-образец не должна выглядеть как готовый рецепт */
.proto{background:var(--mustard-soft);color:var(--mustard-ink);text-align:center;
  padding:9px 16px;font-size:12px;font-weight:600;line-height:1.4;
  font-variation-settings:'SHRP' 0}

/* ── главная ──────────────────────────────────────────────────────────────
   Фон мятный, а не светлый: на главной одна-две картинки, которые мы
   контролируем, и цвет работает. На рецептах фон светлый — там сотни разных
   фотографий, и мята начнёт с ними спорить (tech-stack.md). */
/* Главная — зелёная глазурь, как эмалированная посуда (выбор владельца 23 сентября).
   Мятный фон и кремовые подложки отвергнуты: второй — типовой «ИИ-бежевый». */
body.home{background:var(--glaze);color:var(--on-glaze)}
.home h1,.home .row__t,.home .found__n,.home .found__more{color:var(--on-glaze)}
.home .login{color:var(--on-glaze)}

.home .bar{background:transparent;border-bottom:0}
.home .bar .logo-img{display:none}
.logo-img{display:block;height:40px;width:auto}

.hero{min-height:calc(100vh - 70px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0;padding:0 20px 48px;text-align:center}
/* Логотип с анимацией (design/logo-animation.html): пузырьки поднимаются из рагу,
   сам логотип неподвижен и лежит поверх них — они выходят из-под приоткрытой крышки.
   Пропорции 720/611 держат пузырьки над рагу; собьёшь их — полезут из крышки. */
.hero__logo{width:auto;height:min(clamp(240px,51vw,480px), 60svh);aspect-ratio:720/611;
  margin-bottom:clamp(8px,2vw,16px);position:relative}
.stage{position:relative}
.stage .logo{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.stage .bub{position:absolute;border-radius:50%;opacity:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 32% 28%,
    rgba(255,255,255,1) 0%, rgba(255,255,255,.92) 42%,
    rgba(255,246,228,.72) 70%, rgba(255,232,196,.42) 100%);
  box-shadow:inset -2px -3px 6px rgba(160,90,40,.22),
    inset 2px 3px 5px rgba(255,255,255,.9), 0 2px 5px rgba(120,60,20,.18);
  animation:пузырёк var(--d,3s) cubic-bezier(.35,.08,.6,1) var(--t,0s) infinite}
@keyframes пузырёк{
  0%  {opacity:0;  transform:translate(0,6px) scale(.3)}
  10% {opacity:1;  transform:translate(0,0) scale(1)}
  40% {            transform:translate(var(--sway,8px), calc(var(--up,124px) * -.37)) scale(1.1)}
  70% {opacity:.85;transform:translate(calc(var(--sway,8px) * -.8), calc(var(--up,124px) * -.69)) scale(1.2)}
  100%{opacity:0;  transform:translate(0, calc(var(--up,124px) * -1)) scale(1.4)}
}
/* «анимация шепчет»: при системной настройке «уменьшить движение» пузырьков нет вовсе */
@media (prefers-reduced-motion: reduce){
  .stage .bub{animation:none !important;opacity:0 !important}
}
.hero h1{font-family:var(--display);margin:0 0 clamp(20px,3vw,30px);
  font-size:clamp(27px,5.2vw,44px);font-weight:700;
  line-height:1.18;letter-spacing:-.015em;text-wrap:balance}

.ask{display:flex;align-items:center;gap:8px;width:100%;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:5px 5px 5px 16px}
.ask input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;
  font-weight:400;font-variation-settings:'SHRP' 0;font-size:16px;color:var(--ink);padding:13px 0}
.ask input::placeholder{color:var(--muted)}
.ask__icon{border:0;background:transparent;cursor:pointer;line-height:0;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;color:#5E7168;transition:color .15s ease,background .15s ease;flex:none}
.ask__icon:hover{color:var(--ink);background:var(--mint-soft)}
.ask__go{border:0;cursor:pointer;background:var(--glaze-accent);color:#fff;font:inherit;font-weight:600;
  font-size:14.5px;padding:11px 22px;border-radius:999px;white-space:nowrap;
  transition:background .16s ease}
.ask__go:hover{background:var(--orange)}
.soon{margin:10px 0 0;font-size:12.5px;font-weight:500;color:#41544A}

/* Пока ответа нет — первый экран во весь рост, инструмент и ничего лишнего.
   Как только блюда найдены, шапка сжимается: награда должна быть видна без прокрутки. */
.hero:has(.found:not([hidden])){min-height:auto;justify-content:flex-start;padding-top:18px}
.hero:has(.found:not([hidden])) .hero__logo{height:clamp(96px,21vw,166px)}
.hero:has(.found:not([hidden])) h1{font-size:clamp(19px,3.2vw,26px);margin-bottom:clamp(12px,2vw,18px)}

/* Клавиатура: фокус виден всегда, но только при управлении с клавиатуры */
:focus-visible{outline:2.5px solid var(--tomato);outline-offset:2px;border-radius:4px}
.pill:focus-visible,.btn:focus-visible,.ask__go:focus-visible{outline-offset:3px}

/* Блок поиска: белая карточка с подписью внутри */
.box{width:min(620px,100%);border-radius:24px;padding:15px 15px 17px}
.box--find{background:var(--card);box-shadow:0 8px 26px rgba(27,46,37,.09)}
.box--pick{background:transparent;border:0;padding:6px 0 0;margin-top:6px}
.box--pick .row__t{color:var(--on-glaze);opacity:.85}

.ask__label{margin:0 0 10px;font-size:13.5px;font-weight:600;color:#41544A}

/* Ряды кнопок с живыми числами. Число прижато к подписи — это и есть наш ответ
   размытым ИИ-выдачам: конкретная цифра вместо «вот несколько идей». */
.row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;
  width:min(680px,100%);margin:0 auto}
.row+.row{margin-top:12px;padding-top:12px;border-top:1px solid rgba(27,46,37,.07)}
.row__t{width:100%;font-size:12.5px;font-weight:600;color:#5E7168;margin-bottom:4px;
  letter-spacing:.01em}
.pill{border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;
  font-weight:600;font-size:13.5px;padding:9px 14px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:border-color .15s ease}
.pill:not(.pill--on):hover{border-color:var(--mint)}
.pill i{font-style:normal;font-size:11px;font-weight:700;color:var(--k-ink,#5E7168);
  background:var(--mint-soft);border-radius:999px;padding:2px 6px;
  font-variant-numeric:tabular-nums}
.pill--on,.pill--on:hover{background:var(--ink);color:var(--card);border-color:var(--ink)}
.pill--on i{color:var(--card);background:rgba(255,255,255,.18)}

/* Два входа, а не один: поиск и кнопки равнозначны, и это должно быть видно сразу */
/* «или» лежит тарелкой между двумя входами: белый круг с ободком по краю */
/* Бегущая лента: обещание наискось, как вывеска. Две одинаковые дорожки едут встык,
   сдвиг ровно на ширину одной — шва не видно. */
.tape{position:relative;left:50%;width:106vw;translate:-50% 0;margin:22px 0 6px;
  background:var(--glaze-accent);color:#fff;rotate:-3.2deg;overflow:hidden;
  display:flex;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.tape__run{display:flex;align-items:center;gap:18px;padding:11px 9px;flex:none;
  animation:лента 22s linear infinite}
.tape__run span{font-size:14px;font-weight:600;letter-spacing:.06em}
.tape__run i{font-style:normal;font-size:9px;opacity:.75}
@keyframes лента{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion: reduce){ .tape__run{animation:none} }

/* «или» — нарисованная надпись (Higgsfield): пузырьковый леттеринг, которого нет
   ни в одном шрифте с кириллицей. Фон вырезан, лежит прямо на зелёном. */
.orsep{display:flex;justify-content:center;margin:22px 0 16px}
.orsep img{width:clamp(180px,48vw,330px);height:auto;display:block;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.22))}

/* Плитки первого шага — по референсу владельца: крупная иллюстрация на пастельной
   подложке, подпись слева внизу, честное число в углу. Иллюстрации в стиле логотипа,
   пластилиновые; пока файла нет, плитка живёт и без картинки. */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%}
/* Плитка должна читаться как кнопка на телефоне, где ховера нет: тонкий контур
   даёт границу нажимаемого, а подпись оформлена пилюлей — привычная форма кнопки. */
/* Кант серебряный: не ровная белая линия, а перелив от яркого к приглушённому —
   так кромка выглядит металлической, а не нарисованной. */
.tile{position:relative;cursor:pointer;font:inherit;color:var(--on-glaze);
  border:1.5px solid transparent;border-radius:22px;padding:6px 8px 10px;
  /* внутренний слой обязан быть непрозрачным: иначе серебряный градиент каймы
     просвечивает на всю площадь и плитка выглядит залитой */
  background:
    linear-gradient(var(--glaze), var(--glaze)) padding-box,
    linear-gradient(150deg, rgba(255,255,255,.95), rgba(255,255,255,.4) 38%,
                    rgba(255,255,255,.7) 62%, rgba(255,255,255,.98)) border-box;
  display:grid;gap:6px;justify-items:center;text-align:center;
  transition:transform .16s ease,filter .16s ease}
.tile:hover{transform:translateY(-3px);filter:brightness(1.08)}
.tile:active{transform:scale(.97)}

/* Появление — простое проявление, без пружин и волн (правка владельца). */
.tile{animation:проявиться .32s ease-out backwards}
@keyframes проявиться{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .tile{animation:none} }
}
/* Вспышка — неровная многолучевая звезда. Предмет лежит на ней внахлёст и выходит
   за края: так он читается объёмным, а не наклейкой (референс владельца). */
.tile__star{position:absolute;left:50%;top:6px;width:74%;aspect-ratio:1;translate:-50% 0;
  color:var(--star);pointer-events:none}
.tile__star svg{width:100%;height:100%;display:block}
/* Подложка у всех плиток одна: различает иллюстрация, а не цвет. Пять разных
   пастельных плиток — это и есть та пестрота, от которой мы уходим. */
.tile__ph{position:relative;z-index:1;aspect-ratio:1.28;display:flex;align-items:center;
  justify-content:center}
.tile__ph img{width:86%;height:100%;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(27,46,37,.18))}
.tile__n{position:relative;z-index:2;font-weight:700;font-size:14px;line-height:1;
  font-family:var(--display);color:var(--glaze);background:var(--on-glaze);
  border-radius:999px;padding:9px 18px;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.tile i{position:absolute;z-index:2;top:9px;right:9px;font-style:normal;font-size:14px;
  font-weight:700;background:var(--card);color:var(--ink);border-radius:999px;min-width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 8px;
  box-shadow:0 2px 8px rgba(27,46,37,.12);font-variant-numeric:tabular-nums}
.tile--on{background:
    linear-gradient(color-mix(in srgb, #fff 12%, var(--glaze)),
                    color-mix(in srgb, #fff 12%, var(--glaze))) padding-box,
    linear-gradient(150deg, #fff, rgba(255,255,255,.75) 45%, #fff) border-box}
.tile--on .tile__n{background:var(--glaze-accent);color:#fff}
.tile--on i{background:var(--on-glaze);color:var(--glaze)}

.steps{width:100%}
.steps .row__t{color:rgba(255,255,255,.88)}

/* «Выбери за меня»: окно на матовом стекле. Фон под ним размывается, чтобы человек
   видел, откуда пришёл, но не отвлекался. Движение тихое — одна короткая волна. */
.glass{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(27,46,37,.28);backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);animation:стекло .22s ease-out}
.glass[hidden]{display:none}
@keyframes стекло{from{opacity:0}to{opacity:1}}
.glass__box{position:relative;width:min(420px,100%);background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.7);border-radius:26px;padding:16px 16px 18px;
  box-shadow:0 24px 60px rgba(27,46,37,.22);animation:окно .24s cubic-bezier(.2,.9,.3,1)}
@keyframes окно{from{transform:translateY(10px) scale(.98)}to{transform:none}}
.glass__x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;cursor:pointer;
  border-radius:50%;background:transparent;font-size:22px;line-height:1;color:#5E7168}
.glass__x:hover{background:var(--mint-soft);color:var(--ink)}
.glass__dish{display:block;text-decoration:none;color:var(--ink)}
.glass__ph{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;
  border-radius:18px;overflow:hidden;background:var(--mint-soft);margin-bottom:12px}
.glass__ph img{width:100%;height:100%;object-fit:cover}
.glass__c{display:block;font-size:12px;font-weight:600;color:var(--k-ink,var(--pumpkin))}
.glass__box b{display:block;font-family:var(--display);font-weight:700;font-size:21px;
  line-height:1.2;margin:4px 0 5px}
.glass__box small{display:block;font-size:12.5px;font-weight:500;color:#5E7168}
.glass__btns{display:flex;gap:8px;margin-top:16px}
.glass__btns .btn{flex:1}
@media (prefers-reduced-motion: reduce){
  .glass,.glass__box{animation:none}
}

/* Найдено N — и сразу три блюда, без промежуточных экранов */
.found{margin-top:26px;width:min(680px,100%);text-align:left}
.found__n{margin:0;font-size:15px;font-weight:600;line-height:1.45}
.found__more{margin:6px 0 0;font-size:13.5px;font-weight:500;color:#41544A}
.found__more b{font-weight:700}
.link{border:0;background:transparent;font:inherit;font-weight:600;font-size:13.5px;
  color:var(--tomato);cursor:pointer;padding:0;text-decoration:underline}

.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-top:14px}

/* Карточка блюда по референсу: фотография лежит на цветной подложке, цвет —
   по кухне (та же шкала от мягкого к жгучему, что у меток). Подпись под ней. */
.card{display:block;background:var(--card);border-radius:20px;padding:8px 8px 14px;
  text-decoration:none;color:var(--ink);border:1px solid var(--line);
  transition:border-color .18s ease,transform .18s ease}
.card:hover{border-color:var(--mint);transform:translateY(-2px)}

/* Появление блюд должно быть заметно: карточки выскакивают по очереди, а строка
   «Найдено N» коротко подпрыгивает — иначе человек не поймёт, что список обновился.
   Анимация стартует сама, потому что карточки пересоздаются при каждой перерисовке. */
.card{animation:проявиться .32s ease-out backwards}
.found__n{animation:проявиться .32s ease-out}
@media (prefers-reduced-motion: reduce){ .card,.found__n{animation:none} }
.card__ph{display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  background:var(--mint-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.card__ph img{width:100%;height:100%;object-fit:cover}
.card__empty{font-size:12px;font-weight:500;color:#7E8F86}
.card__c{display:block;padding:0 4px;font-size:12px;font-weight:600;
  color:var(--k-ink,var(--pumpkin))}
.card b{display:block;padding:0 4px;margin:5px 0 4px;font-size:15px;font-weight:700;line-height:1.28}
.card small{display:block;padding:0 4px;font-size:12.5px;font-weight:500;color:#5E7168}
.card em{display:block;padding:2px 4px 0;font-size:12px;font-weight:500;font-style:normal;
  color:#62756C}

@media (max-width:560px){
  /* Оба блока должны помещаться в первый экран телефона вместе с лого */
  .hero{padding:0 16px 26px}
  .hero__logo{height:202px;margin-bottom:4px}
  .hero h1{margin-bottom:16px;font-size:25px}
  .box{padding:13px 13px 15px;border-radius:20px}
  .box--pick .row__t{margin-bottom:0}
  .pill{padding:8px 12px;font-size:13px}
  .orsep{margin:22px 0 14px}
}

@media (max-width:520px){
  /* Фото слева на всю высоту, текст справа: три вертикальные карточки заняли бы три экрана */
  .card{display:grid;grid-template-columns:104px 1fr;grid-template-rows:auto auto auto;
    column-gap:12px;align-content:center;padding:10px}
  .card__ph{grid-column:1;grid-row:1 / 4;margin-bottom:0;align-self:center;border-radius:14px}
  .card__c{grid-column:2;grid-row:1;align-self:end;padding:0}
  .card b{grid-column:2;grid-row:2;margin:3px 0;padding:0}
  .card small{grid-column:2;grid-row:3;align-self:start;padding:0}
}

.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.btn{border:0;cursor:pointer;font:inherit;font-weight:600;font-size:14.5px;
  transition:background .16s ease,color .16s ease;
  padding:13px 20px;border-radius:999px;text-align:center;text-decoration:none}
.btn--main{background:var(--tomato-deep);color:#fff}
.btn--main:hover{background:var(--orange)}
.btn--soft{background:var(--mint-soft);color:var(--ink)}
.btn--soft:not(.pill--on):hover{background:var(--mint)}
.opts{margin-top:14px}

/* Готовый пример: человек видит, что получит, ещё не сделав ни клика */
.sample{display:flex;align-items:center;gap:14px;margin-top:clamp(30px,5vw,46px);max-width:430px;
  background:var(--card);border-radius:20px;padding:13px 20px 13px 13px;text-align:left;
  text-decoration:none;color:inherit;box-shadow:0 8px 24px rgba(27,46,37,.08)}
.sample i{width:52px;height:52px;border-radius:50%;flex:none;background:var(--mustard-soft)}
.sample small{display:block;font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.4}
.sample b{display:block;font-weight:700;font-size:16.5px;margin-top:3px;line-height:1.25}

@media (max-width:560px){
  /* Одна строка целиком: значок, поле, значок, круглая кнопка со стрелкой.
     Текстовая кнопка тут не помещается и разрывает пилюлю на два этажа. */
  .ask{gap:2px;padding:5px 5px 5px 10px}
  .ask input{font-size:15px;padding:12px 0}
  .ask__icon{width:38px;height:38px}
  .ask__go{width:44px;height:44px;padding:0;font-size:0;flex:none;
    display:inline-flex;align-items:center;justify-content:center}
  .ask__go::after{content:"";width:11px;height:11px;border:2px solid #fff;
    border-left:0;border-bottom:0;transform:rotate(45deg) translate(-2px,2px)}
  .hero{min-height:auto;padding-top:14px}
}

.foot{background:var(--ground);border-top:1px solid var(--line);padding:30px clamp(16px,4vw,40px);
  font-size:12.5px;color:var(--muted)}
.home .foot{background:transparent;border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.72)}
.home .foot a,.home .foot b{color:rgba(255,255,255,.92)}
.foot__cols{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  max-width:1100px;margin:0 auto}
.foot b{display:block;color:var(--ink);font-weight:600;font-size:13px;margin-bottom:7px}
.foot a{display:inline-block;margin:0 10px 6px 0;color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}

/* Логотип-картинка: подпись рядом нужна — не все понимают, что он кликабелен
   и ведёт в инструмент, а не в каталог (урок GoVibester) */
.logo{display:flex;align-items:center;gap:8px}
.logo img{display:block;height:40px;width:auto}
.logo__hint{font-size:11.5px;font-weight:500;color:var(--muted);white-space:nowrap}
@media (max-width:430px){ .logo__hint{font-size:10.5px;max-width:64px;white-space:normal;line-height:1.15} }