/* CookItToday mini-app. Основа — Apple HIG: Inter, сгруппированные списки, стекло только на таб-баре.
   Своё — живое небо приёмов пищи: утро и день светлые (тёмный текст), вечер — ночное небо (белый текст).
   Цвета только из токенов; тёмная тема — по Telegram. Контраст текста не ниже 4.5:1 — проверяет tests/test_webapp_static.py. */
@font-face{font-family:InterMM;font-weight:100 900;font-display:swap;src:url('fonts/Inter-Cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:InterMM;font-weight:100 900;font-display:swap;src:url('fonts/Inter-Latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+2248,U+00D7,U+00F7,U+2713,U+25CF}

:root{
  color-scheme:light;
  --bg:#F2F2F7; --bg-0:rgba(242,242,247,0); --card:#FFFFFF; --fill:rgba(118,118,128,.12); --sep:rgba(60,60,67,.18);
  --label:#000000; --label2:#5C5C63; --label3:#8E8E93;
  --accent:#005BBF; --link:#005BBF; --on-accent:#FFFFFF; --tint:rgba(0,91,191,.12);
  --green:#248A3D; --green-ink:#1D7A35; --green-tint:rgba(36,138,61,.14);
  --orange-ink:#B23C00; --orange-tint:rgba(255,149,0,.16);
  --danger:#D70015; --ring:#D70015;
  --toast-bg:#1C1C1E; --toast-ink:#FFFFFF; --toast-act:#64B5FF;
  --knob:#FFFFFF; --switch-off:rgba(120,120,128,.24);
  --glass:linear-gradient(150deg,rgba(255,255,255,.84),rgba(255,255,255,.66)); --glass-edge:rgba(255,255,255,.9);
  --shadow:0 12px 32px rgba(20,30,90,.12),0 2px 6px rgba(20,30,90,.06);
  --scrim:rgba(0,0,0,.32);
  --r:22px; --pad:16px; --tap:44px; --vh:1vh;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F0F12; --bg-0:rgba(15,15,18,0); --card:#1C1C1F; --fill:rgba(120,120,128,.24); --sep:rgba(84,84,88,.6);
  --label:#F5F5F7; --label2:#AEAEB5; --label3:#6C6C72;
  --accent:#0A6BD6; --link:#5AAEFF; --on-accent:#FFFFFF; --tint:rgba(90,174,255,.16);
  --green:#30D158; --green-ink:#4CD964; --green-tint:rgba(48,209,88,.16);
  --orange-ink:#FF9F5A; --orange-tint:rgba(255,159,90,.16);
  --danger:#FF6961; --ring:#D70015;
  --toast-bg:#3A3A3C; --toast-ink:#FFFFFF; --toast-act:#7CC2FF;
  --knob:#FFFFFF; --switch-off:rgba(120,120,128,.40);
  --glass:linear-gradient(150deg,rgba(48,48,52,.88),rgba(30,30,33,.78)); --glass-edge:rgba(255,255,255,.12);
  --shadow:0 12px 32px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
  --scrim:rgba(0,0,0,.55);
}
/* приёмы пищи: рассвет → полдень → вечер */
.m-breakfast{--c1:#FFB340;--c2:#F08A00}
.m-lunch{--c1:#FF6961;--c2:#E5352B}
.m-dinner{--c1:#7D7AFF;--c2:#5856D6}
.m-shop{--c1:#3DCB64;--c2:#248A3D}
.m-prof{--c1:#4C9DFF;--c2:#005BBF}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);color:var(--label);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--label);font:400 17px/1.4 InterMM,-apple-system,system-ui,sans-serif;letter-spacing:.005em;-webkit-font-smoothing:antialiased;min-height:calc(var(--vh) * 100);overscroll-behavior-y:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
button:disabled{opacity:.5;cursor:default}
input,textarea{font:inherit;color:inherit}
a{color:var(--link)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
h1[tabindex="-1"]:focus-visible,h2[tabindex="-1"]:focus-visible,b[tabindex="-1"]:focus-visible{outline:none}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ti{display:inline-grid;place-items:center;width:24px;height:24px;flex:none}
.ti svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

#view{max-width:640px;margin:0 auto;padding:0 var(--pad) calc(112px + var(--safe-b))}
body.has-timers #view{padding-bottom:calc(166px + var(--safe-b))}
.screen{animation:in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* крупный заголовок, как в iOS */
.hero{padding:22px 4px 14px}
.hero h1{font:750 30px/1.15 InterMM}
.hero p{margin-top:6px;font-size:16px;color:var(--label2)}
.caption{margin:24px 16px 8px;font:600 13px/1.3 InterMM;color:var(--label2);text-transform:uppercase;letter-spacing:.05em}
label.caption{display:block}
.foot{margin:10px 16px 0;font-size:14px;line-height:1.4;color:var(--label2)}
.foot .ti{width:16px;height:16px;vertical-align:-3px}
.fhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:24px 4px 10px}
.fhead h2{font:700 20px/1.2 InterMM}
.fhead span{font-size:15px;color:var(--label2)}
.muted{font-size:15px;color:var(--label2)}
.empty{padding:40px 20px;text-align:center;color:var(--label2)}
.empty b{display:block;margin-bottom:6px;font:650 18px/1.3 InterMM;color:var(--label)}
.empty-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.boot-err .muted{margin-top:18px}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:var(--tap);padding:0 18px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:650 16px/1.15 InterMM;text-align:center}
.btn .ti{width:20px;height:20px}
.btn.grow{flex:1}
.btn.soft{background:var(--tint);color:var(--link)}
.btn.soft.on{background:var(--accent);color:var(--on-accent)}
.btn.round{width:var(--tap);padding:0}
.btn.small{padding:0 14px;font-size:15px}
.btn.big{min-height:56px;font-size:17px}
.btn.round.big{width:56px}
.btn:active,.cta:active{opacity:.82}
.cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin:18px 0 6px;padding:0 16px;border-radius:16px;background:var(--accent);color:var(--on-accent);font:650 17px/1.2 InterMM;text-align:center}
.cta .ti{width:22px;height:22px}
.cta.soft{background:var(--tint);color:var(--link)}
.cta:disabled{opacity:.42}
.linkbtn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;margin-top:10px;border-radius:16px;color:var(--link);font:600 16px/1.2 InterMM;text-align:center}
.linkbtn .ti{width:20px;height:20px}
.linkbtn.small{min-height:var(--tap);margin-top:6px;font-size:15px}
.linkbtn.danger{color:var(--danger)}
.linkbtn.inline{display:inline;width:auto;min-height:0;margin:0;padding:0;border-radius:0;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.spin .ti{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- «Сегодня»: одно блюдо на живом небе ---------- */
.home-head{padding:18px 4px 14px}
.greet{font:750 28px/1.15 InterMM}
.home-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:6px;font-size:15px;color:var(--label2)}
.dayseg{display:flex;flex:none;border-radius:999px;background:var(--fill)}
.dayseg button{min-height:var(--tap);padding:0 16px;border-radius:999px;font:600 15px/1 InterMM;color:var(--label2);transition:background .2s,color .2s}
.dayseg button.on{background:var(--card);color:var(--label);box-shadow:0 2px 6px rgba(0,0,0,.12)}

/* небо: днём светлое у горизонта (тёмный текст), вечером ночное (белый текст) */
.hero-meal{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(440px,calc(var(--vh) * 62));padding-top:128px;overflow:hidden;isolation:isolate;
  border-radius:32px;color:var(--ink);background:linear-gradient(180deg,var(--s1) 0%,var(--s1) var(--g1),var(--s2) var(--g2));
  box-shadow:0 24px 48px -22px var(--s3);touch-action:pan-y}
.sky-breakfast{--s1:#FF9966;--s2:#FFE6C7;--s3:rgba(240,120,70,.5);--g1:12%;--g2:78%;--ink:#3A1806;--chip:rgba(255,255,255,.62);--cta:#3A1806;--cta-ink:#FFF4E8;--alt:rgba(255,255,255,.7)}
.sky-lunch{--s1:#4AA3F0;--s2:#D9F0FF;--s3:rgba(31,127,224,.42);--g1:12%;--g2:78%;--ink:#0A2540;--chip:rgba(255,255,255,.62);--cta:#0A2540;--cta-ink:#FFFFFF;--alt:rgba(255,255,255,.7)}
.sky-dinner{--s1:#6B5CD6;--s2:#1D1A4B;--s3:rgba(43,36,120,.55);--g1:0%;--g2:70%;--ink:#FFFFFF;--chip:rgba(255,255,255,.14);--cta:#FFFFFF;--cta-ink:#1D1A4B;--alt:rgba(255,255,255,.16)}
[data-theme="dark"] .sky-breakfast{--s1:#A9542F;--s2:#3B1E14;--s3:rgba(0,0,0,.5);--g1:0%;--g2:66%;--ink:#FFFFFF;--chip:rgba(255,255,255,.14);--cta:#FFFFFF;--cta-ink:#3B1E14;--alt:rgba(255,255,255,.16)}
[data-theme="dark"] .sky-lunch{--s1:#2A6FB8;--s2:#0E2742;--s3:rgba(0,0,0,.5);--g1:0%;--g2:66%;--ink:#FFFFFF;--chip:rgba(255,255,255,.14);--cta:#FFFFFF;--cta-ink:#0E2742;--alt:rgba(255,255,255,.16)}
[data-theme="dark"] .sky-dinner{--s1:#4B3FA8;--s2:#120F33;--s3:rgba(0,0,0,.5);--g2:66%}
.sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-body{position:relative;z-index:1;padding:22px 20px 20px}
.hero-title{font:750 30px/1.12 InterMM;text-wrap:balance;overflow-wrap:anywhere}
.hero-title .ti{width:24px;height:24px;margin-left:6px;vertical-align:-2px}
.hero-sub{margin-top:8px;font:500 16px/1.35 InterMM}
.hero-note{margin-top:8px;font-size:16px}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hero-meta>span{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:30px;padding:0 11px;border-radius:999px;background:var(--chip);font:600 14px/1.2 InterMM}
.hero-meta .ct{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hero-meta .ti{width:16px;height:16px}
.hero-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.hero-more{display:flex;gap:10px}
.hero-cta{width:100%;min-height:50px;background:var(--cta);color:var(--cta-ink);font-size:17px}
.hero-alt{background:var(--alt);color:var(--ink)}

/* появление — только при входе на экран, а не при каждой перерисовке */
.screen .hero-meal{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.screen .hero-body>*{animation:up-in .6s cubic-bezier(.2,.8,.2,1) both}
.screen .hero-body>:nth-child(2){animation-delay:.08s}
.screen .hero-body>:nth-child(3){animation-delay:.16s}
.screen .hero-body>:nth-child(4){animation-delay:.24s}
.hero-meal.from-right{animation:in-right .5s cubic-bezier(.2,.8,.2,1) both}
.hero-meal.from-left{animation:in-left .5s cubic-bezier(.2,.8,.2,1) both}
.hero-meal.from-right .hero-body>*,.hero-meal.from-left .hero-body>*{animation:up-in .45s cubic-bezier(.2,.8,.2,1) both}
.hero-meal.swap .hero-body>*{animation:swap-in .55s cubic-bezier(.2,.8,.2,1) both}

/* солнце, лучи, облака, луна, звёзды */
.sun{position:absolute;right:-30px;top:16px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,#FFF8DD 0 33%,rgba(255,238,178,.8) 34% 47%,rgba(255,222,150,0) 70%);animation:glow 6s ease-in-out infinite}
.screen .sun{animation:sunrise 1.8s cubic-bezier(.2,.8,.2,1) both,glow 6s ease-in-out 1.8s infinite}
.sky-lunch .sun{right:26px;top:26px;width:136px;height:136px}
.screen .sky-lunch .sun{animation:pop 1s cubic-bezier(.2,.8,.2,1) both,glow 6s ease-in-out 1s infinite}
.rays{position:absolute;right:-111px;top:-65px;width:312px;height:312px;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.18) 0 5deg,rgba(255,255,255,0) 5deg 16deg);
  -webkit-mask:radial-gradient(circle,transparent 31%,#000 33%,transparent 71%);mask:radial-gradient(circle,transparent 31%,#000 33%,transparent 71%);
  animation:spin 80s linear infinite}
.screen .rays{animation:fade-in 1.4s ease .6s both,spin 80s linear infinite}
.cloud{position:absolute;left:0;height:30px;border-radius:999px;background:rgba(255,255,255,.9);animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.cloud::before{left:16px;top:-20px;width:42px;height:42px}
.cloud::after{left:46px;top:-12px;width:30px;height:30px}
.moon{position:absolute;right:38px;top:30px;width:92px;height:92px;border-radius:50%;box-shadow:inset -20px 12px 0 0 #FFF3CF;
  filter:drop-shadow(0 0 24px rgba(255,240,200,.45));animation:float 7s ease-in-out infinite}
.screen .moon{animation:pop 1.1s cubic-bezier(.2,.8,.2,1) both,float 7s ease-in-out 1.1s infinite}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.3;animation:twinkle 3.2s ease-in-out infinite}
[data-theme="dark"] .cloud{background:rgba(255,255,255,.3)}
[data-theme="dark"] .hero-body{text-shadow:0 1px 10px rgba(0,0,0,.35)}
/* небо не крутится вечно: через 20 секунд и в фоне анимации на паузе */
body.calm .sky *,body.paused *{animation-play-state:paused!important}

@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes up-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes swap-in{from{opacity:0;transform:translateY(10px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes in-right{from{opacity:.4;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes in-left{from{opacity:.4;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes sunrise{from{opacity:.2;transform:translateY(140px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes glow{50%{transform:scale(1.04);filter:brightness(1.06)}}
@keyframes fade-in{from{opacity:0}}
@keyframes drift{from{transform:translateX(-140px)}to{transform:translateX(460px)}}
@keyframes twinkle{50%{opacity:1}}
@keyframes float{50%{transform:translateY(-6px)}}

/* завтрак / обед / ужин — переключатель с линзой */
.daybar{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:12px;padding:4px;border-radius:24px;background:var(--card)}
.dayitem{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;min-height:64px;padding:10px 10px 10px 12px;border-radius:20px;text-align:left}
.dayitem b{display:flex;align-items:center;gap:6px;font:650 14px/1.2 InterMM;color:var(--label2);transition:color .3s}
.dayitem b .ti{width:15px;height:15px;color:var(--green-ink)}
.dayitem .dot{flex:none;width:8px;height:8px;border-radius:50%;background:linear-gradient(var(--c1),var(--c2))}
.dayitem .tt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;font-size:13px;line-height:1.3;color:var(--label2);overflow-wrap:anywhere}
.dayitem.on b,.dayitem.on .tt{color:var(--label)}
.daylens{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 16px) / 3);border-radius:20px;background:var(--bg);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.daybar[data-at="lunch"] .daylens{transform:translateX(calc(100% + 4px))}
.daybar[data-at="dinner"] .daylens{transform:translateX(calc(200% + 8px))}

.quiet{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin-top:10px;padding:12px 16px;border-radius:20px;background:var(--card);font-size:15px;text-align:left}
.quiet .ti{width:20px;height:20px;color:var(--label2)}
.quiet .txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;min-width:0}
.card.ask{margin-top:12px}
.card.ask h2{font:700 18px/1.25 InterMM}
.card.ask .muted{margin-top:4px}
.ask-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ask-opts .btn{padding:0 14px;font-size:15px}

/* ---------- рецепты ---------- */
.search{position:relative;display:flex;align-items:center;gap:8px;min-height:var(--tap);margin:4px 0;padding:0 0 0 12px;border-radius:12px;background:var(--fill);color:var(--label2)}
.search:focus-within{box-shadow:0 0 0 2px var(--link)}
.search>.ti{width:18px;height:18px}
.search input{flex:1;min-width:0;min-height:var(--tap);border:0;outline:0;background:none;font-size:17px;color:var(--label)}
.search input::placeholder{color:var(--label2)}
.search input::-webkit-search-cancel-button{display:none}
.sclear{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:12px;color:var(--label2)}
.sclear .ti{width:18px;height:18px}
.search:not(.has-q) .sclear{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.chip-btn{min-height:var(--tap);padding:0 16px;border-radius:999px;background:var(--card);color:var(--label);font:600 15px/1.2 InterMM;transition:background .2s,color .2s}
.chip-btn.on{background:var(--label);color:var(--bg)}
.chips.czs{flex-wrap:nowrap;margin:2px calc(-1 * var(--pad)) 4px;padding:0 var(--pad) 2px;overflow-x:auto;scroll-padding:0 var(--pad);scrollbar-width:none}
.chips.czs::-webkit-scrollbar{display:none}
.czs .chip-btn{display:inline-flex;align-items:center;flex:none;white-space:nowrap}
/* флаг кухни: svg 30×20 из icons.js; тонкая обводка — чтобы белые флаги (Япония, Грузия) не сливались с карточкой */
.flag{display:inline-block;flex:none;width:21px;height:14px;margin-right:7px;border-radius:3px;box-shadow:0 0 0 .5px var(--sep);vertical-align:-2px;overflow:hidden}
.flag.home{display:inline-grid;place-items:center;width:16px;height:16px;box-shadow:none;color:var(--label2)}
.flag.home .ti{width:16px;height:16px}
.chip-btn.on .flag.home,.tagsel button.on .flag.home{color:inherit}
.meta.cz,.sh-sub .cz,.fr-meta .cz{display:inline-flex;align-items:center}
.meta.cz .flag{width:18px;height:12px;margin-right:6px}
.tagsel .flag{margin-right:0}
.chip-btn .n{margin-left:6px;font-weight:500}
/* категории как в доставке: круглые плитки с иллюстрациями (cats.js), ряд листается вбок; рисунок чуть выходит за круг */
.cats{display:flex;gap:2px;margin:12px calc(-1 * var(--pad)) 2px;padding:4px calc(var(--pad) - 6px) 4px;overflow-x:auto;scroll-padding:0 var(--pad);scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{display:flex;flex:none;flex-direction:column;align-items:center;gap:6px;min-width:84px;padding:0 3px 2px;color:var(--label)}
.cat-art{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:var(--fill);transition:box-shadow .2s,transform .15s}
.cat-art svg{width:80px;height:80px;margin-top:-6px}
.cat-l{font:600 13px/1.2 InterMM;letter-spacing:-.015em;text-align:center;white-space:nowrap}
.chips.rfs{margin-top:8px}
.cat.on .cat-art{box-shadow:0 0 0 2.5px var(--accent)}
.cat.on .cat-l{color:var(--link)}
button.cat:active .cat-art{transform:scale(.95)}
.slider{display:flex;gap:10px;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);scrollbar-width:none}
.slider::-webkit-scrollbar{display:none}
.slider .tile{flex:0 0 min(70%,260px);scroll-snap-align:start}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:14px;border-radius:22px;background:var(--card);text-align:left;transition:transform .15s}
button.tile:active{transform:scale(.985)}
.tile .t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:650 16px/1.25 InterMM;overflow-wrap:anywhere}
.tile .sym{margin-bottom:4px}
.tile .bottom{margin-top:auto}
.tile.wide{width:100%}
.rcard{min-height:160px}
.rcard .sym{width:36px;height:36px;border-radius:11px}
.meta{font-size:13px;color:var(--label2)}
.cov{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:2px 8px;border-radius:999px;background:var(--green-tint);color:var(--green-ink);font:600 13px/1.2 InterMM}
.cov .ti{width:14px;height:14px}
.cov.season{background:var(--orange-tint);color:var(--orange-ink)}
.sym{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:var(--on-accent);background:linear-gradient(180deg,var(--c1,#4C9DFF),var(--c2,#005BBF))}
.sym .ti{width:58%;height:58%}
.sym.lg{width:48px;height:48px;border-radius:14px}

/* ---------- списки и шторки ---------- */
.card{padding:16px;border-radius:var(--r);background:var(--card)}
.group{overflow:hidden;border-radius:var(--r);background:var(--card)}
.row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 16px;text-align:left}
.row+.row::before,.sh-more>*+*::before{content:"";position:absolute;top:0;right:0;left:16px;height:.5px;background:var(--sep)}
.row .txt{display:flex;flex-direction:column;flex:1;min-width:0}
.row .t{font:500 17px/1.3 InterMM;overflow-wrap:anywhere}
.row .s{margin-top:2px;font-size:14px;line-height:1.35;color:var(--label2)}
.row .val{flex:none;max-width:45%;font-size:16px;color:var(--label2);text-align:right}
.row>.ti:last-child{width:20px;height:20px;color:var(--label3)}
.row .t.link{color:var(--link)}
.row .rico{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--tint);color:var(--link)}
.row .rico .ti{width:18px;height:18px}
.row.stack{flex-direction:column;align-items:stretch;gap:10px}
.row.act>.ti:first-child{width:22px;height:22px;color:var(--link)}
.mark{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%}
.mark .ti{width:16px;height:16px}
.mark.ok{background:var(--green-tint);color:var(--green-ink)}
.mark.buy{background:var(--orange-tint);color:var(--orange-ink)}
.mark.base{background:var(--fill);color:var(--label2)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 16px 8px;font-size:14px;color:var(--label2)}
.legend>span{display:inline-flex;align-items:center;gap:6px}
.legend .mark{width:22px;height:22px}
.legend .mark .ti{width:13px;height:13px}
.row.check .box{display:grid;place-items:center;flex:none;width:26px;height:26px;border:2px solid var(--label3);border-radius:50%;color:var(--on-accent)}
.row.check .box .ti{width:15px;height:15px;opacity:0}
.row.check.on .box{border-color:var(--green);background:var(--green)}
.row.check.on .box .ti{opacity:1}
.row.check.on .t{color:var(--label2);text-decoration:line-through}

.steps{display:flex;flex-direction:column;gap:8px;list-style:none}
.step{padding:14px 16px;border-radius:18px;background:var(--card)}
.step .k{display:block;margin-bottom:6px;font:650 14px/1.2 InterMM;color:var(--link)}
.step p{font-size:16px;line-height:1.45}

.sheet-back{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim);animation:fade .25s}
.sheet-back[hidden]{display:none}
.sheet{position:relative;width:100%;max-width:640px;max-height:calc(var(--vh) * 92);overflow-y:auto;overscroll-behavior:contain;padding:16px var(--pad) calc(24px + var(--safe-b));border-radius:28px 28px 0 0;background:var(--bg);animation:up .34s cubic-bezier(.2,.8,.2,1)}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(100%)}}
.sh-head{display:flex;align-items:flex-start;gap:12px;padding-left:4px}
.sh-titles{flex:1;min-width:0;padding-top:2px}
.sh-head h2{font:750 22px/1.2 InterMM;overflow-wrap:anywhere}
.sh-head h2 .ti{width:20px;height:20px;margin-left:6px;vertical-align:-2px;color:var(--link)}
.sh-sub{margin-top:4px;font-size:15px;line-height:1.35;color:var(--label2)}
.sh-x{display:grid;place-items:center;flex:none;width:var(--tap);height:var(--tap);margin:-6px -8px 0 0;border-radius:50%;color:var(--label2)}
.sh-x .ti{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--fill)}
.sheet .caption:first-of-type{margin-top:20px}
.sheet .card{margin-top:14px}
.sheet .savestate{margin:12px 4px 2px}
.sheet>.muted{margin:8px 4px 12px}
.note{margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--orange-tint);color:var(--orange-ink);font-size:15px}
.safety{display:flex;align-items:flex-start;gap:8px;margin:14px 4px 0;font-size:15px;line-height:1.35;color:var(--green-ink)}
.safety .ti{width:18px;height:18px;margin-top:1px}
.sh-why{margin:10px 4px 0;font-size:15px;color:var(--label2)}
.macros{margin:14px 4px 0;font-size:14px;line-height:1.5;color:var(--label2)}
.macros b{font-weight:650;color:var(--label)}
.sh-more{display:flex;flex-direction:column;margin-top:18px;overflow:hidden;border-radius:var(--r);background:var(--card)}
.sh-more>*{position:relative}
.done-line{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;font-weight:600;color:var(--green-ink)}
.done-line .ti{width:22px;height:22px}
.sh-sticky{position:sticky;bottom:calc(-24px - var(--safe-b));z-index:3;margin:16px calc(-1 * var(--pad)) calc(-24px - var(--safe-b));padding:14px var(--pad) calc(14px + var(--safe-b));background:linear-gradient(to top,var(--bg) 78%,var(--bg-0))}
.sh-sticky .cta{margin:0}
.put-pick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.put-pick .segp{flex:1 1 auto}
.sh-row{display:flex;gap:8px}
.rate-row .btn{min-height:48px}
.prose p{font-size:15px;line-height:1.5}
.prose p+p{margin-top:10px}

/* сегменты, чипы, варианты */
.segp{display:flex;flex-wrap:wrap;gap:4px;padding:3px;border-radius:14px;background:var(--fill)}
.segp button{flex:1 1 auto;min-height:var(--tap);padding:0 12px;border-radius:11px;font:600 15px/1.2 InterMM;color:var(--label2);text-align:center}
.segp button.on{background:var(--card);color:var(--label);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.tagsel{display:flex;flex-wrap:wrap;gap:8px}
.tagsel button{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 16px;border-radius:999px;background:var(--card);color:var(--label);font:500 15px/1.2 InterMM}
.tagsel button .ti{width:18px;height:18px}
.card .tagsel button,.group .tagsel button{background:var(--fill)}
.tagsel button.on,.card .tagsel button.on,.group .tagsel button.on{background:var(--label);color:var(--bg)}
.tagsel.tight{gap:6px}
.tagsel.tight button{padding:0 13px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:12px 16px;border-radius:18px;background:var(--card);text-align:left;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s,transform .15s}
.opt:active{transform:scale(.98)}
.opt.on{box-shadow:inset 0 0 0 2px var(--accent)}
.opt .oi{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--tint);color:var(--link)}
.opt .oi .ti{width:22px;height:22px}
.opt .txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.opt b{font:650 17px/1.25 InterMM;color:var(--label)}
.opt .txt span{font-size:14px;line-height:1.3;color:var(--label2)}
.opt .tick{display:grid;place-items:center;flex:none;width:26px;height:26px;border:2px solid var(--label3);border-radius:50%;color:var(--on-accent)}
.opt .tick .ti{width:15px;height:15px;opacity:0}
.opt.on .tick{border-color:var(--accent);background:var(--accent)}
.opt.on .tick .ti{opacity:1}

/* ---------- продукты ---------- */
.field{display:block;width:100%;min-height:var(--tap);padding:11px 14px;border:0;outline:0;border-radius:12px;background:var(--fill);color:var(--label);font-size:17px;line-height:1.35;resize:none}
.field:focus{box-shadow:0 0 0 2px var(--link)}
.field::placeholder{color:var(--label2)}
.add-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#photoBtn{cursor:pointer}
.cta.soft[data-act="fresh"]{margin:12px 0 0}
.pchips{display:flex;flex-wrap:wrap;gap:8px}
.pchip{display:inline-flex;align-items:center;gap:0;min-height:var(--tap);padding-left:14px;border-radius:999px;background:var(--fill);font:500 15px/1.2 InterMM}
.px{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;color:var(--label2)}
.px .ti{width:16px;height:16px}
.qchip{display:inline-flex;align-items:center;gap:4px;min-height:var(--tap);padding:0 16px 0 12px;border-radius:999px;background:var(--card);font:500 15px/1.2 InterMM}
.qchip .ti{width:16px;height:16px;color:var(--link)}

/* ---------- профиль ---------- */
.savestate{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 4px 6px;font-size:14px;color:var(--label2)}
.savestate .ti{width:16px;height:16px}
.savestate.saved{color:var(--green-ink)}
.savestate.error{color:var(--danger)}
.switch{position:relative;flex:none;width:51px;height:31px;border-radius:999px;background:var(--switch-off);box-shadow:inset 0 0 0 1px var(--sep);transition:background .2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--knob);box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .25s}
.switch.on{background:var(--green);box-shadow:none}
.switch.on::after{transform:translateX(20px)}
.stepper{display:flex;align-items:center;flex:none;border-radius:12px;background:var(--fill)}
.stepper button{display:grid;place-items:center;width:var(--tap);height:var(--tap);color:var(--label)}
.stepper button .ti{width:18px;height:18px}
.stepper b{min-width:40px;font:650 17px/1 InterMM;text-align:center}
.row input[type=time]{flex:none;min-height:var(--tap);padding:0 10px;border:0;outline:0;border-radius:10px;background:var(--fill);color:var(--label);font:500 17px/1 InterMM}
.row input[type=time]:focus{box-shadow:0 0 0 2px var(--link)}
.card.tzfix{margin-top:10px}
.card.tzfix p{margin-bottom:10px;font-size:15px;color:var(--label2)}
.avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,#E07A00,#B85C00);color:#fff;font:700 16px/1 InterMM}
.avatar.add{background:var(--tint);color:var(--link)}
.avatar .ti{width:19px;height:19px}

/* ---------- онбординг ---------- */
body.onb #view{padding-bottom:calc(150px + var(--safe-b))}
.onb-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;margin:0 calc(-1 * var(--pad));padding:8px var(--pad) 6px;background:var(--bg)}
.onb-back{display:grid;place-items:center;flex:none;width:var(--tap);height:var(--tap);margin-left:-8px;border-radius:50%;color:var(--link)}
.progress{display:flex;flex:1;gap:4px}
.progress i{flex:1;height:4px;border-radius:2px;background:var(--fill);transition:background .3s}
.progress i.on{background:var(--accent)}
.q{padding:12px 4px 18px}
.q h1{font:750 28px/1.15 InterMM;text-wrap:balance}
.q p{margin-top:8px;font-size:16px;color:var(--label2)}
.onb-foot{position:fixed;left:0;right:0;bottom:0;z-index:6;padding:14px var(--pad) calc(14px + var(--safe-b));background:linear-gradient(to top,var(--bg) 75%,var(--bg-0))}
.onb-foot .cta{max-width:608px;margin:0 auto}
.hint{margin:0 0 8px;font-size:14px;color:var(--label2);text-align:center}
.welcome{padding:36px 4px 10px}
.welcome .badge{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;background:linear-gradient(180deg,#FFB340,#F08A00);color:#fff}
.welcome .badge .ti{width:40px;height:40px}
.welcome h1{margin-top:22px;font:750 32px/1.12 InterMM;text-wrap:balance}
.welcome .lead{margin-top:10px;font-size:17px;color:var(--label2)}
/* согласие на обработку данных — отдельная отметка, нажимается вся строка */
.agree{display:flex;align-items:flex-start;gap:12px;margin-top:24px;padding:14px 16px;border-radius:18px;background:var(--card);cursor:pointer}
.agree p{font-size:15px;line-height:1.4;color:var(--label)}
.agree .box{display:grid;place-items:center;flex:none;width:26px;height:26px;border:2px solid var(--label3);border-radius:8px;color:var(--on-accent)}
.agree .box .ti{width:16px;height:16px;opacity:0}
.agree.on .box{border-color:var(--accent);background:var(--accent)}
.agree.on .box .ti{opacity:1}
.lnk{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.legal-note{margin:12px 4px 0;font-size:14px;line-height:1.4;color:var(--label2)}

/* ---------- таб-бар: стекло только здесь ---------- */
.lg-bar{position:fixed;left:50%;bottom:calc(12px + var(--safe-b));z-index:10;display:grid;grid-template-columns:repeat(5,1fr);width:min(440px,calc(100% - 12px));height:64px;padding:3px;transform:translateX(-50%);
  border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);box-shadow:var(--shadow),inset 0 1px 1px var(--glass-edge)}
.lg-bar[hidden]{display:none}
.tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;border-radius:999px;color:var(--label2);font:600 12px/1.1 InterMM;letter-spacing:0;text-align:center}
.tab .ti{width:24px;height:24px}
.tab>span:last-child{white-space:nowrap} /* без многоточия: на 320 px «Продукты» занимает ячейку целиком */
.tab[aria-current="page"]{color:var(--link)}
.lens{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 5);border-radius:999px;background:var(--tint);transition:transform .38s cubic-bezier(.16,1,.3,1)}
.lg-bar[data-at="week"] .lens{transform:translateX(100%)}
.lg-bar[data-at="recipes"] .lens{transform:translateX(200%)}
.lg-bar[data-at="pantry"] .lens{transform:translateX(300%)}
.lg-bar[data-at="profile"] .lens{transform:translateX(400%)}

/* ---------- таймеры: видны на любом экране ---------- */
.tbar{position:fixed;left:50%;bottom:calc(86px + var(--safe-b));z-index:9;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:min(440px,calc(100% - 12px));transform:translateX(-50%)}
.tbar[hidden]{display:none}
.tpills{display:flex;flex:none;flex-wrap:wrap;gap:8px}
.tpills:empty{display:none}
.tpill{display:inline-flex;align-items:center;max-width:100%;border-radius:999px;background:var(--card);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.tpill .tgo{display:inline-flex;align-items:center;gap:6px;min-width:0;min-height:var(--tap);padding:0 2px 0 12px;font:600 15px/1 InterMM;color:var(--label)}
.tpill .tgo .ti{width:18px;height:18px;color:var(--link)}
.tpill b{font-variant-numeric:tabular-nums}
.tpill small{max-width:150px;overflow:hidden;font-size:13px;color:var(--label2);white-space:nowrap;text-overflow:ellipsis}
.tpill .tx{display:grid;place-items:center;flex:none;width:var(--tap);height:var(--tap);border-radius:50%;color:var(--label2)}
.tpill .tx .ti{width:16px;height:16px}
.tpill.ring{background:var(--ring);animation:ring .9s ease-in-out infinite}
.tpill.ring .tgo,.tpill.ring .ti,.tpill.ring small,.tpill.ring .tx{color:#fff}
@keyframes ring{50%{transform:scale(1.05)}}

/* ---------- всплывашка снизу, у места действия ---------- */
#toast{position:fixed;left:50%;bottom:calc(88px + var(--safe-b));z-index:90;display:flex;align-items:center;gap:4px;width:max-content;max-width:calc(100% - 24px);min-height:48px;padding:6px 18px;
  border-radius:16px;background:var(--toast-bg);color:var(--toast-ink);box-shadow:var(--shadow);font:600 15px/1.3 InterMM;
  opacity:0;visibility:hidden;transform:translate(-50%,16px);transition:opacity .25s,transform .3s cubic-bezier(.22,1,.36,1),visibility .3s}
#toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
#toast .tt{flex:1;padding:6px 0}
#toast .ta{flex:none;min-height:var(--tap);margin-right:-12px;padding:0 14px;border-radius:12px;color:var(--toast-act);font-weight:700}
body.has-timers:not(.sheet-open) #toast{bottom:calc(140px + var(--safe-b))}
body.onb #toast{bottom:calc(96px + var(--safe-b))}

/* ---------- режим готовки ---------- */
.cook{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;gap:12px;max-width:640px;margin:0 auto;padding:calc(12px + var(--safe-t)) var(--pad) calc(16px + var(--safe-b));overflow:hidden;background:var(--bg)}
.cook[hidden]{display:none}
.cook-top{display:flex;align-items:center;gap:12px}
.cook-x{display:grid;place-items:center;flex:none;width:var(--tap);height:var(--tap);border-radius:50%;background:var(--fill)}
.cook-x .ti{width:20px;height:20px}
.cook-title{display:flex;flex-direction:column;min-width:0}
.cook-title span{font-size:14px;color:var(--label2)}
.cook-title b{overflow:hidden;font:650 17px/1.25 InterMM;white-space:nowrap;text-overflow:ellipsis}
.cook-progress{flex:none}
.resume{font-size:15px;color:var(--label2)}
.cook-stage{position:relative;display:flex;flex:1;flex-direction:column;min-height:0}
/* до краёв экрана: въезжающий шаг обрезается краем экрана, а не полями; по горизонтали не скроллится */
.cook-body{flex:1;min-height:0;margin:0 calc(-1 * var(--pad));padding:8px calc(var(--pad) + 4px) 4px;overflow:hidden auto;touch-action:pan-y}
/* смена шага: старый уезжает и гаснет, новый въезжает с другой стороны — заголовок, текст и таймеры лесенкой */
.cook-body.in>*{animation:up-in .45s cubic-bezier(.2,.8,.2,1) both}
.cook-body.next>*{animation:step-in-next .48s cubic-bezier(.2,.8,.2,1) .08s both}
.cook-body.prev>*{animation:step-in-prev .48s cubic-bezier(.2,.8,.2,1) .08s both}
.cook-body.in>:nth-child(2),.cook-body.next>:nth-child(2),.cook-body.prev>:nth-child(2){animation-delay:.13s}
.cook-body.in>:nth-child(3),.cook-body.next>:nth-child(3),.cook-body.prev>:nth-child(3){animation-delay:.18s}
.cook-body.out-next,.cook-body.out-prev{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cook-body.out-next{animation:step-out-next .26s cubic-bezier(.4,0,1,1) both}
.cook-body.out-prev{animation:step-out-prev .26s cubic-bezier(.4,0,1,1) both}
@keyframes step-in-next{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
@keyframes step-in-prev{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:none}}
@keyframes step-out-next{45%{opacity:0}to{opacity:0;transform:translateX(-30%)}}
@keyframes step-out-prev{45%{opacity:0}to{opacity:0;transform:translateX(30%)}}
/* прогресс: новый отрезок заливается слева, при шаге назад — стекает */
.cook-progress i{position:relative;overflow:hidden}
.cook-progress i.on{background:var(--fill)}
.cook-progress i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform:scaleX(0);transform-origin:left}
.cook-progress i.on::after{transform:none}
.cook-progress i.fill::after{animation:seg-fill .5s cubic-bezier(.2,.8,.2,1) both}
.cook-progress i.drain::after{animation:seg-drain .3s cubic-bezier(.4,0,.2,1) both}
@keyframes seg-fill{from{transform:scaleX(0)}to{transform:none}}
@keyframes seg-drain{from{transform:none}to{transform:scaleX(0)}}
.cook-k{font:650 15px/1.2 InterMM;color:var(--link)}
.cook-text{margin-top:14px;font:600 26px/1.32 InterMM;text-wrap:pretty}
.cook-timers{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.cook-list{display:flex;flex-direction:column;margin-top:14px;overflow:hidden;border-radius:var(--r);background:var(--card)}
.cook-ing{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;text-align:left}
.cook-ing+.cook-ing::before{content:"";position:absolute;top:0;right:0;left:54px;height:.5px;background:var(--sep)}
.cook-ing .box{display:grid;place-items:center;flex:none;width:26px;height:26px;border:2px solid var(--label3);border-radius:50%;color:var(--on-accent)}
.cook-ing .box .ti{width:15px;height:15px;opacity:0}
.cook-ing.on .box{border-color:var(--green);background:var(--green)}
.cook-ing.on .box .ti{opacity:1}
.cook-ing .box{transition:background .2s,border-color .2s}
.cook-ing.just .box{animation:tick-pop .34s cubic-bezier(.22,1,.36,1)}
.cook-ing.just .box .ti{animation:pop .26s cubic-bezier(.2,.8,.2,1) .04s both}
@keyframes tick-pop{40%{transform:scale(.82)}to{transform:none}}
.cook-ing .t{flex:1;min-width:0;font:500 17px/1.3 InterMM;transition:color .2s}
.cook-ing.on .t{color:var(--label2)}
.cook-ing .v{font-size:15px;color:var(--label2);text-align:right}
.cook-nav{display:flex;flex:none;gap:10px}

/* ---------- неделя ---------- */
.card.lock{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.card.lock>.ti{width:24px;height:24px;color:var(--green-ink)}
.card.lock .txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1;min-width:0}
.card.lock .txt b{font:650 16px/1.3 InterMM}
.card.lock .txt>span{font-size:14px;color:var(--label2)}
.card.lock .btn{margin-top:10px}
.week-shop{flex-direction:row;align-items:center;gap:14px;margin-bottom:6px}
.week-shop .txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.week-shop b{font:650 17px/1.25 InterMM}
.week-shop small{font-size:14px;color:var(--label2)}
.week-shop>.ti{width:20px;height:20px;color:var(--label3)}
.wday{margin-top:20px}
.wday-head{display:flex;align-items:center;gap:8px;margin:0 6px 8px;font:700 17px/1.2 InterMM}
.wtag{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:600 13px/1 InterMM}
.wtag.soft{background:var(--tint);color:var(--link)}
.wday-head{flex-wrap:wrap;row-gap:6px}
.wtag.hol{gap:4px;min-width:0;background:var(--tint);color:var(--link)}
.wtag.hol .ti{flex:none;width:14px;height:14px}
.wtag.hol .ct{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wmeal .dot{flex:none;width:10px;height:10px;border-radius:50%;background:linear-gradient(var(--c1),var(--c2))}
.wmeal .s{margin:0 0 2px;font-size:13px;color:var(--label2)}
.wmeal .t{font-size:16px}
.wmeal.cooked .t{color:var(--label2)}
.wmeal:active{background:var(--fill)}

/* меньше движения: убираем декоративное, оставляем смысловые смены состояния */
@media (prefers-reduced-motion:reduce){
  .screen,.screen .hero-meal,.screen .hero-body>*,.hero-meal.from-left,.hero-meal.from-right,.hero-meal .hero-body>*,.cook-body>*,.cook-ing .box,.cook-ing .box .ti,.cook-progress i::after,.sheet,.sheet-back,.sky *,.tpill.ring{animation:none!important}
  .hero-meal.swap .hero-body>*{animation:fade-in .3s both!important}
  .cook-body.next>*,.cook-body.prev>*{animation:fade-in .25s both!important}
  .lens,.daylens,.switch,.switch::after{transition:none}
  #toast{transform:translate(-50%,0);transition:opacity .2s,visibility .2s}
}