/* Fridgingo 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-KK.woff2') format('woff2');unicode-range:U+0301,U+0400-04FF,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;
  --fav:#D61F4E; --fav-tint:rgba(214,31,78,.12);
  --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;
  --fav:#FF6B8B; --fav-tint:rgba(255,107,139,.16);
  --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%;touch-action:manipulation} /* двойной тап не зумит, щипок — можно */
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}

/* приём пищи: блюдо из меню и рядом варианты другой основы — одинаковые белые карточки, листаются вбок, чипсы основ над ними */
.dish-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:20px 4px 0}
.dish-head h2{font:750 24px/1.2 InterMM;letter-spacing:-.01em}
.dish-head span{flex:none;font-size:15px;color:var(--label2)}
.opt-chips{margin-top:10px;overflow-x:auto;flex-wrap:nowrap;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding:0 var(--pad);scrollbar-width:none}
.opt-chips::-webkit-scrollbar{display:none}
.odot{flex:none;width:10px;height:10px;margin-right:7px;border-radius:50%;background:var(--ob)}
.chip-btn.on .odot{box-shadow:0 0 0 2px var(--bg)}
[data-theme="dark"] .odot{filter:brightness(2.2) saturate(1.2)} /* тёмные цвета основ на тёмном чипсе не видно */
.drow{display:flex;gap:12px;margin:12px calc(-1 * var(--pad)) 0;padding:0 var(--pad) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);scrollbar-width:none;overscroll-behavior-x:contain}
.drow::-webkit-scrollbar{display:none}
.drow>.opt-card{flex:0 0 calc(100% - 44px);min-width:0;scroll-snap-align:start} /* соседняя карточка выглядывает — видно, что листается */
.drow.one>.opt-card{flex-basis:100%}
.drow:not(.one)>.dish-now{touch-action:auto}
.b-chicken{--ob:#2E2A6B}.b-fish{--ob:#0E5A64}.b-meat{--ob:#7A1F2B}.b-veg{--ob:#1F5135}.b-eggs{--ob:#8A4A06}
.b-soup{--ob:#9A6A00}.b-curd{--ob:#7C2D5B}.b-porridge{--ob:#6B4A1A}.b-pancakes{--ob:#9A3412}.b-other{--ob:#334155}.b-now{--ob:var(--accent)}
/* карточка — яркая, цвет по основе блюда (--t из Art.TILE); текст и кнопка тёмные — читаются на любом из цветов, в обеих темах */
.dish{display:flex;flex-direction:column;padding:14px 16px 16px;border-radius:28px;background:var(--t,#A79BFF);color:#2B2B33}
.dish-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.dish-slot,.dish-in{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:999px;background:#FFFFFF;color:#2B2B33;font:700 14px/1.2 InterMM;white-space:nowrap}
.dish-slot .dot{flex:none;width:9px;height:9px;border-radius:50%;background:linear-gradient(var(--c1),var(--c2))}
.dish-in .ti{width:16px;height:16px}
.dish-in.done{color:#1D7A35}
.dish-art{height:clamp(112px,calc(var(--vh) * 16),168px);margin:2px -8px 0} /* на низком экране картинка меньше — кнопка видна без прокрутки */
.dish-art svg{display:block;width:100%;height:100%}
.dish-base{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;min-height:28px;max-width:100%;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.6);font:700 14px/1.2 InterMM}
.dish-base .ti{width:16px;height:16px}
.dish-title{margin-top:8px;font:800 21px/1.15 InterMM;letter-spacing:-.015em;text-wrap:balance;overflow-wrap:anywhere} /* целиком: карточки в ряду тянутся по самой высокой */
.dish-sub{margin-top:6px;font-size:15px;color:rgba(43,43,51,.86)}
.dish-have{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:15px;color:rgba(43,43,51,.86)}
.dish-have .ti{width:17px;height:17px;flex:none}
.dish-have .flag{flex:none}
.dish-cta{width:100%;min-height:52px;margin-top:auto;background:#2B2B33;color:#FFFFFF;font-size:17px}
.dish>:nth-last-child(2){margin-bottom:16px} /* отступ над кнопкой, сама кнопка прижата к низу — у всех карточек на одной линии */
.screen .dish-now{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.dish-now.from-right{animation:in-right .45s cubic-bezier(.2,.8,.2,1) both}
.dish-now.from-left{animation:in-left .45s cubic-bezier(.2,.8,.2,1) both}
.dish-now.swap{animation:swap-in .5s cubic-bezier(.2,.8,.2,1) both}
.opt-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:380px;padding:20px;border-radius:28px;background:var(--card);color:var(--link);text-align:center}
.opt-more .ti{width:56px;height:56px;padding:14px;border-radius:50%;background:var(--tint)}
.opt-more b{font:700 19px/1.2 InterMM;color:var(--label)}
.opt-more span{font-size:15px;color:var(--label2)}
.opt-wait{min-height:380px;border-radius:28px;background:var(--fill);animation:opt-pulse 1.1s ease-in-out infinite alternate}
@keyframes opt-pulse{from{opacity:.5}to{opacity:1}}
.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:100%;height:100%;overflow:visible} /* рисунок вписан в круг через viewBox (cats.js) */
.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}
.rmore{display:flex;width:100%;margin-top:12px}

/* «Рецепты»: поиск с микрофоном внутри, подборки дня большими баннерами (листаются вбок), «Все рецепты» внизу */
.search{min-height:52px;padding-right:4px;border-radius:16px}
.smic{display:grid;place-items:center;flex:none;width:var(--tap);height:var(--tap);border-radius:12px;background:var(--accent);color:var(--on-accent)}
.smic .ti{width:22px;height:22px}
.cols{display:flex;gap:12px;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;overscroll-behavior-x:contain}
.cols::-webkit-scrollbar{display:none}
.col{--cc:#A3350A;position:relative;display:flex;flex:0 0 calc(100% - 44px);flex-direction:column;align-items:flex-start;height:min(440px,calc(var(--vh) * 60));padding:22px;
  overflow:hidden;isolation:isolate;border-radius:28px;color:#FFFFFF;text-align:left;scroll-snap-align:start}
.col::before{content:"";position:absolute;right:-130px;bottom:-150px;z-index:-2;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.08)}
.col::after{content:"";position:absolute;left:-60px;top:-70px;z-index:-2;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.07)}
.c-orange{background:#C2410C}.c-green{--cc:#1F5135;background:#1F5135}.c-wine{--cc:#7A1F2B;background:#7A1F2B}.c-indigo{--cc:#2D3A8C;background:#2D3A8C}
.col-n{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.18);font:650 14px/1.2 InterMM}
.col-n .ti{width:16px;height:16px}
.col-n .flag{width:21px;height:14px;border-radius:2px}
.col-t{max-width:270px;margin-top:18px;font:850 clamp(34px,11vw,46px)/.98 InterMM;letter-spacing:-.035em;text-wrap:balance}
.col-s{max-width:200px;margin-top:12px;font:500 16px/1.35 InterMM}
.col-art{position:absolute;right:-46px;bottom:56px;z-index:-1;width:min(270px,62%);aspect-ratio:1}
.col-art svg{width:100%;height:100%}
.col-cta{display:inline-flex;align-items:center;gap:8px;min-height:52px;margin-top:auto;padding:0 22px;border-radius:999px;background:#FFFFFF;color:var(--cc);font:750 17px/1 InterMM}
.col-cta .ti{width:20px;height:20px}
.col:active{transform:scale(.99)}
.cdots{display:flex;justify-content:center;gap:6px;margin-top:12px}
/* активная точка — пилюля: ширина встаёт сразу, а сама пилюля вырастает из точки трансформом (без анимации ширины) */
.cdots i{width:8px;height:8px;border-radius:4px;background:var(--label3);opacity:.45;transition:opacity .25s}
.cdots i.on{width:22px;background:var(--label);opacity:1;animation:dot-on .3s cubic-bezier(.22,1,.36,1)}
@keyframes dot-on{from{transform:scaleX(.36)}}
.fhead.col2{flex-direction:column;align-items:flex-start;gap:2px}
.fhead p{font-size:15px;color:var(--label2)}
.rall{display:flex;width:100%;min-height:56px;margin-top:24px;font-size:17px}
.rback{display:flex;align-items:center;gap:12px;margin:14px 0 4px}
.rback h2{min-width:0;font:750 20px/1.2 InterMM;overflow-wrap:anywhere}
.rhome{padding:0 14px 0 8px}
.rq-fix{margin:10px 4px 0;font-size:15px;line-height:1.4;color:var(--label2)}
.rq-fix b{color:var(--label)}
/* поиск нашёл только то, что семье нельзя: пояснение над выдачей и пометка на карточке */
.rq-no{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--warn-bg,#FFF1D6);color:var(--warn-ink,#7A4B00)}
.rq-no .ti{flex:none;width:18px;height:18px;margin-top:1px}
.rcard .rno{display:flex;gap:4px;align-items:flex-start;color:var(--warn-ink,#9A5B00);font-weight:600}
.rcard .rno .ti{flex:none;width:14px;height:14px;margin-top:2px}
[data-theme="dark"] .rq-no{--warn-bg:#3A2C10;--warn-ink:#FFCF7A}
[data-theme="dark"] .rcard .rno{--warn-ink:#FFCF7A}
.rq-f{display:inline-flex;align-items:center;gap:6px}
.rq-f .ti{width:16px;height:16px}
/* добавки к приёму пищи под главным блюдом: «+ Первое», «+ Салат», «+ Десерт» */
.courses{margin-top:12px}
.courses .group+.course-add{margin-top:10px}
.course{position:relative;display:flex;align-items:center}
.course+.course::before{content:"";position:absolute;top:0;right:0;left:16px;height:.5px;background:var(--sep)}
.course .row{flex:1;min-width:0;padding-right:4px}
.course.cooked .t{color:var(--label2)}
.course-x{display:grid;place-items:center;flex:none;width:var(--tap);height:var(--tap);margin-right:4px;border-radius:50%;color:var(--label3)}
.course-x .ti{width:18px;height:18px}
.course-add{display:flex;flex-wrap:wrap;gap:8px}
.course-add .btn{padding:0 16px;font-size:15px}
.course-add .ti{width:18px;height:18px}
.wmeal.extra .dot{opacity:.45}
.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}
.rcard .rpic{display:block;align-self:stretch;margin:-14px -14px 4px;aspect-ratio:4 / 3;max-width:none;border-radius:22px 22px 0 0;overflow:hidden;background:var(--t)}
.rcard .rpic svg{display:block;width:100%;height:100%}
.rcard .rpic~.fav-mark{background:#FFFFFF}
.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-pic{height:clamp(120px,calc(var(--vh) * 21),180px);margin:0 0 14px;border-radius:24px;overflow:hidden;background:var(--t)} /* картинка блюда наверху рецепта */
.sh-pic svg{display:block;width:100%;height: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)}
/* любимые: сердечко в шапке рецепта, метка на карточке, первый фильтр в «Рецептах» */
.sh-fav,.sh-share{display:grid;place-items:center;flex:none;width:var(--tap);height:var(--tap);margin:-6px -6px 0 0;border-radius:50%;color:var(--label2)}
.sh-fav .ti,.sh-share .ti{width:30px;height:30px;padding:5px;border-radius:50%;background:var(--fill);transition:color .2s,background .2s}
.sh-fav.on .ti{background:var(--fav-tint);color:var(--fav)}
.sh-share .ti{padding:6px}
.sh-fav.on .ti svg,.fav-mark .ti svg,.rfs .chip-btn .ti svg{fill:currentColor}
.sh-fav.pop .ti{animation:fav-pop .4s cubic-bezier(.22,1,.36,1)}
@keyframes fav-pop{40%{transform:scale(1.3)}to{transform:none}}
.fav-mark{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--fav-tint);color:var(--fav)}
.fav-mark .ti{width:16px;height:16px}
.rfs .chip-btn .ti{width:18px;height:18px;margin-right:6px;color:var(--fav)}
.fhead .linkbtn.inline{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}
.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}
/* под рецептом с главной — ещё блюда той же основы, лентой */
.sh-alts{margin-top:18px}
/* «Что купить» внизу рецепта и в списках покупок: скопировать / отправить в чат одним сообщением */
.sh-buy{margin-top:18px}
.buy-acts{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 4px}
.buy-acts .btn{flex:1 1 130px;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px}
.buy-acts .ti{width:18px;height:18px}
/* «Отправить в WhatsApp» (24.10): в Казахстане списки шлют там — кнопка первой, во всю ширину. Зелёный WhatsApp:
   в светлой теме — тёмный зелёный с белым текстом, в тёмной — фирменный с тёмным текстом (оба ≥ 4.5:1) */
.buy-acts .btn.wa{flex-basis:100%}
.btn.wa{background:#0E7A43;color:#FFFFFF}
:root[data-theme="dark"] .btn.wa{background:#25D366;color:#06200F}
/* «Пригласите друга — месяц Pro вам обоим»: карточка в профиле и шторка из подписки */
.card.invite{margin-top:12px}
.card.invite h2{display:flex;align-items:center;gap:8px;font:700 18px/1.25 InterMM;text-wrap:balance}
.card.invite h2 .ti{flex:none;width:22px;height:22px;color:var(--accent)}
.invite .muted{margin-top:6px;line-height:1.4}
.inv-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.inv-acts .btn{min-height:var(--tap);padding:0 12px}
.inv-acts .btn.wide{grid-column:1/-1}
.inv-acts .ti{width:20px;height:20px}
.inv-count{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:15px;line-height:1.35;color:var(--label2)}
.inv-count .ti{flex:none;width:20px;height:20px}
/* строка в две строки — значок в начале текста, всё по центру */
.sh-sticky .pw-inv{display:block;min-height:var(--tap);margin-top:4px;padding:10px 8px;text-wrap:balance}
.sh-sticky .pw-inv .ti{display:inline-block;margin-right:6px;vertical-align:-4px}
.alts-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
.alts-row::-webkit-scrollbar{display:none}
.alt-card{flex:0 0 152px;display:flex;flex-direction:column;scroll-snap-align:start;overflow:hidden;border-radius:18px;background:var(--card);text-align:left;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.alt-card.wait{height:178px;background:var(--fill)}
.alt-pic{display:block;height:100px;background:var(--t)}
.alt-pic svg{display:block;width:100%;height:100%}
.alt-card b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:8px 10px 0;font:650 14px/1.25 InterMM}
.alt-card small{margin:3px 10px 10px;font-size:13px;color:var(--label2)}
.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}
.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)}
/* «Продукты»: строка ввода с камерой и микрофоном; маленький холодильник-сводка (до 8 продуктов и «+N»); ниже — список по отделам */
.paddbar{display:flex;align-items:center;gap:6px;min-height:56px;padding:6px 6px 6px 14px;border-radius:20px;background:var(--card)}
.paddbar input{flex:1;min-width:0;min-height:44px;border:0;background:none;color:var(--label);font:500 16px/1.2 InterMM;outline:none}
.paddbar input::placeholder{color:var(--label3)}
.paddbar:focus-within{box-shadow:0 0 0 2px var(--accent)}
.pb{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--fill);color:var(--label);cursor:pointer}
.pb .ti{width:21px;height:21px}
.pb.add{background:var(--tint);color:var(--link)}
.pb.mic{background:#2B2B33;color:#FFFFFF}
.fcard{display:flex;align-items:center;gap:14px;margin-top:12px;padding:12px;border-radius:24px;background:#7CC4FF;color:#2B2B33}
.pfridge{flex:none;width:148px;padding:5px;border:2.2px solid #2B2B33;border-radius:16px;background:#F4F7FB}
/* полки — фоном через всю ширину: ряд 38px, из них 4px — белая полка */
.pshelves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:38px;min-height:76px;border:1.4px solid #2B2B33;border-radius:10px;overflow:hidden;
  background:repeating-linear-gradient(to bottom,#DCEBF7 0 34px,#FFFFFF 34px 38px)}
.fmini{display:grid;place-items:center;height:34px}
.fmini svg{width:29px;height:29px}
.fmini.more{font:800 13px/1 InterMM;color:#2B2B33}
.pfhead{min-width:0}
.pfhead h2{font:800 18px/1.2 InterMM}
.pfhead p{margin-top:3px;font-size:14px;line-height:1.3;color:rgba(43,43,51,.84)}
.pchip{padding-left:6px}
.pchip .pi{flex:none;width:30px;height:30px;margin-right:4px}
.pchip .pi svg,.qchip .qi svg,.cpics svg{display:block;width:100%;height:100%}
.cookban{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:10px 12px;border-radius:22px;background:var(--card);text-align:left}
.cpics{display:flex;flex:none}
.cpics>span{width:46px;height:40px;margin-right:-10px;border-radius:12px;background:var(--t);border:2px solid var(--card);overflow:hidden}
.cpics .cchef{display:grid;place-items:center;background:var(--tint);color:var(--link)}
.cookban .txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;margin-left:12px}
.cookban b{font:700 16px/1.2 InterMM}
.cookban small{font-size:14px;color:var(--label2)}
.cookban>.ti{width:20px;height:20px;color:var(--label3)}
.qchip{padding:0 14px 0 6px}
.qchip .qi{width:32px;height:32px}

/* ---------- профиль ---------- */
.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)}
/* истории первого входа: картинка из onbart.js, точки, заголовок, пояснение; свайп и «Далее» листают */
.story{display:flex;flex-direction:column;align-items:center;padding:20px 4px 150px;text-align:center}
.story-art{display:grid;place-items:center;width:min(240px,70vw);aspect-ratio:1;margin-top:8px}
.story-art svg{width:100%;height:100%}
.story-art .badge{display:grid;place-items:center;width:96px;height:96px;border-radius:28px;background:linear-gradient(180deg,#FFB340,#F08A00);color:#fff}
.story-art .badge .ti{width:52px;height:52px}
.story-dots{display:flex;gap:6px;margin-top:18px}
.story-dots i{width:8px;height:8px;border-radius:4px;background:var(--fill);transition:background .25s}
.story-dots i.on{width:22px;background:var(--accent);animation:dot-on .3s cubic-bezier(.22,1,.36,1)}
.story h1{margin-top:18px;font:750 28px/1.15 InterMM;text-wrap:balance}
.story .lead{max-width:440px;margin-top:10px;font-size:18px;line-height:1.45;color:var(--label2);text-wrap:pretty}
.story-free{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 14px;border-radius:999px;background:var(--tint);color:var(--link);font:600 15px/1.2 InterMM}
.story-free .ti{width:18px;height:18px}
.story .agree,.story .legal-note{text-align:left}
.onb-foot .linkbtn{display:block;margin:6px auto 0}
/* первый вход (24.10): один экран — язык, шеф с «Как это работает», «Кто будет есть?», согласие → «Показать моё меню» */
.onb-start{padding-top:6px}
.onb-start .onb-langs{margin:0 0 4px}
.onb-hello{display:flex;align-items:flex-end;gap:6px}
.onb-chef{flex:none;width:84px;margin:0 0 -4px -8px}
.onb-say{--sb:var(--card);position:relative;flex:1;min-width:0;margin-bottom:26px;padding:11px 14px 2px;border-radius:18px;background:var(--sb);box-shadow:0 4px 16px rgba(0,0,0,.08);animation:say-in .35s cubic-bezier(.22,1,.36,1) .4s both}
.onb-say::before{content:"";position:absolute;bottom:16px;left:-7px;border:8px solid transparent;border-left:0;border-right-color:var(--sb)}
.onb-say p{font:650 16px/1.3 InterMM;color:var(--label);text-wrap:balance}
.onb-how{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:-6px;padding:0 6px;border-radius:12px;color:var(--link);font:600 15px/1.2 InterMM}
.onb-how .ti{width:18px;height:18px}
[data-theme="dark"] .onb-say{--sb:#3A3A3C}
.onb-start .q{padding:6px 4px 14px}
.onb-start .agree{margin-top:14px;padding:12px 14px}
.onb-start .legal-note{scroll-margin-bottom:150px} /* после ответа согласие и ссылки на документы — над кнопкой, не под ней */
.onb-start .agree p{font-size:14px}
.onb-foot.hinted{background:linear-gradient(to top,var(--bg) calc(100% - 8px),var(--bg-0))} /* подсказка над кнопкой — на сплошном фоне, а не поверх текста под ней */
.onb-say.kept{animation:none}
@media (prefers-reduced-motion:reduce){.onb-say{animation:none}}
/* карточки первого дня и подписка */
.card.ask h2{display:flex;align-items:center;gap:8px}
.card.ask h2 .ti{flex:none;width:22px;height:22px;color:var(--accent)}
.quiet.trial .ti:first-child{color:var(--accent)}
.card.paywall{margin-top:4px;text-align:center}
.card.paywall .badge{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:20px;background:linear-gradient(180deg,#FFD25E,#F0A500);color:#fff}
.card.paywall .badge .ti{width:34px;height:34px}
.card.paywall h2{margin-top:12px;font:750 22px/1.2 InterMM;text-wrap:balance}
.card.paywall .muted{margin-top:6px}
.stars{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.stars .ti{width:1em;height:1em;color:#F5B300;fill:#F5B300}
.perks{display:grid;gap:12px;margin:16px 0 4px;padding:0;list-style:none;text-align:left}
.perks li{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1.35}
.perks .ti{flex:none;width:24px;height:24px;color:var(--accent)}
.sh-head.m-pro .sym{background:linear-gradient(180deg,#FFD25E,#F0A500);color:#fff}
/* freemium (24.10.2026): пункт Pro, ради которого открыли подписку; что бесплатно всегда; замки на Pro-местах */
.perks li.hl{margin:-6px -10px;padding:6px 10px;border-radius:14px;background:var(--tint);font-weight:650}
.pw-free{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--fill);font-size:15px;line-height:1.4;text-align:left}
.pw-free .ti{flex:none;width:20px;height:20px;color:var(--accent)}
.pro-pill{display:inline-flex;align-items:center;gap:3px;flex:none;padding:3px 8px;border-radius:999px;background:var(--fill);color:var(--label2);font:650 12px/1.2 InterMM}
.pro-pill .ti{width:12px;height:12px}
.dayseg .ti{width:14px;height:14px;margin-left:4px;vertical-align:-2px}
.opt-lock .ti{color:var(--label2);background:var(--fill)}
.quiet.pro-lock .ti:first-child{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-music.hint{box-shadow:0 0 0 2px var(--accent);animation:mtip 1.6s cubic-bezier(.22,1,.36,1) .8s 3}
@keyframes mtip{from{box-shadow:0 0 0 2px var(--accent),0 0 0 2px rgba(0,91,191,.45)}to{box-shadow:0 0 0 2px var(--accent),0 0 0 14px rgba(0,91,191,0)}}
.cook-say .cook-mtip{display:flex;width:fit-content;margin-top:8px}
@media (prefers-reduced-motion:reduce){.cook-music.hint{animation:none}}
.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}
/* сверху шага ещё и сцена (cookfx) — таймеры четвёртые и не должны выезжать раньше текста */
.cook-body.in>:nth-child(n+4),.cook-body.next>:nth-child(n+4),.cook-body.prev>:nth-child(n+4){animation-delay:.23s}
.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 .t small{display:block;margin-top:2px;font:400 14px/1.3 InterMM;color:var(--label2)} /* примечание: «Подойдёт и оливковое» */
.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}
/* «Неделя»: покупки — яркая плашка с корзинкой продуктов; у каждого блюда — его картинка на цвете основы */
.shopban{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:6px;padding:12px 14px;border-radius:24px;background:#FFC93C;color:#2B2B33;text-align:left}
.shopban .bag{position:relative;flex:none;width:66px;height:52px}
.shopban .bag>span{position:absolute;width:40px;height:40px;left:calc(var(--i) * 12px);top:calc(var(--i) * 3px);transform:rotate(calc(-12deg + var(--i) * 12deg))}
.shopban .bag svg{width:100%;height:100%}
.shopban .txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.shopban b{font:800 17px/1.2 InterMM}
.shopban small{font-size:14px;color:rgba(43,43,51,.82)}
.shopban>.ti{width:20px;height:20px}
.wthumb{flex:none;width:60px;height:50px;border-radius:14px;overflow:hidden;background:var(--t)}
.wthumb svg{display:block;width:100%;height:100%}
.wmeal .s{display:flex;align-items:center;gap:6px}
.wmeal .s .dot{width:8px;height:8px}
.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,.sh-fav .ti,.sheet,.sheet-back,.sky *,.tpill.ring,.opt-wait,.screen .dish-now,.dish-now.from-left,.dish-now.from-right{animation:none!important}
  .hero-meal.swap .hero-body>*,.dish-now.swap{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}
  .cdots i.on,.story-dots i.on{animation:none}
  #toast{transform:translate(-50%,0);transition:opacity .2s,visibility .2s}
}

/* админ-панель (видна только ADMIN_IDS) */
.adm-head{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.adm-head p{flex-basis:100%}
.adm-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpi{padding:14px 16px;border-radius:var(--r);background:var(--card)}
.kpi b{display:block;font:750 26px/1.1 InterMM;font-variant-numeric:tabular-nums}
.kpi span{display:block;margin-top:4px;font-size:14px;color:var(--label2)}
.adm-chart{display:block;width:100%;height:auto;overflow:visible}
.adm-chart .a{fill:var(--tint)}
.adm-chart .n{fill:var(--accent)}
.adm-chart text{font:500 12px InterMM;fill:var(--label2)}
.adm-legend{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:14px;color:var(--label2)}
.adm-legend i{display:inline-block;width:12px;height:12px;border-radius:3px}
.adm-legend i.n{background:var(--accent)}
.adm-legend i.a{margin-left:10px;background:var(--tint)}
.adm-funnel{display:grid;gap:12px}
.adm-funnel .f{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:15px}
.adm-funnel .bar{grid-column:1/-1;height:8px;border-radius:4px;background:var(--fill);overflow:hidden}
.adm-funnel .bar i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.adm-funnel .v{color:var(--label2);font-variant-numeric:tabular-nums}
.adm-dist{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.adm-dist span{padding:4px 10px;border-radius:999px;background:var(--fill);font-size:14px;color:var(--label2)}
.adm-dist b{font-weight:600;color:var(--label)}
.adm-card .caption{margin:14px 0 8px}
.adm-card .caption:first-child{margin-top:0}
.adm-id{font-size:13px;color:var(--label2)}
/* админка: список пользователей по страницам (поиск, фильтр подписки, порядок) */
.adm-usort{margin:8px 0 6px}
.adm-found{margin:8px 2px}
.adm-more{width:100%;min-height:var(--tap);margin-top:10px}
/* админка: блогеры — вывод звёзд, карточки с выплатой, ссылки */
.adm-pt{margin-bottom:10px}
.adm-pt .s,.adm-made .s,.adm-rate{display:block;font-size:14px;line-height:1.35;color:var(--label2)}
.adm-pt-h{display:flex;justify-content:space-between;gap:10px;font-size:17px}
.adm-pt-h span{color:var(--label2);white-space:nowrap}
.adm-pt-m{margin:10px 0;font-size:15px}
.adm-pt-m b{font-variant-numeric:tabular-nums}
.adm-pay{width:100%;min-height:var(--tap);margin-bottom:10px}
.adm-pt-b,.adm-link-b{display:flex;flex-wrap:wrap;gap:8px}
.adm-form{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.adm-form label{display:grid;gap:4px;flex:1 1 120px;min-width:0}
.adm-form label.grow{flex:3 1 200px}
.adm-made{margin:0 0 14px;box-shadow:0 0 0 2px var(--tint)}
.adm-link{display:grid;gap:6px;margin-top:12px}
.adm-link code{padding:10px 12px;border-radius:12px;background:var(--fill);font-size:14px;overflow-wrap:anywhere}

/* «Поведение» (обезличенная статистика): фильтр периода, время на экранах, куда нажимают */
.adm-seg{flex-wrap:nowrap;margin:0 0 14px}
.adm-seg button{min-width:0;padding:0 6px;font-size:14px}
.adm-pc{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--tap);margin:0 0 14px}
.adm-filt{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.beh-bar{display:block;height:6px;margin-top:6px;border-radius:3px;background:var(--fill);overflow:hidden}
.beh-bar i{display:block;height:100%;border-radius:3px;background:var(--tint)}
.beh-scr .val small,.beh-clicks .val small{display:block;font-size:12px;color:var(--label2);text-align:right}
.beh-clicks{margin-bottom:10px;border-radius:var(--r);background:var(--card)}
.beh-clicks summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--tap);padding:10px 16px;list-style:none;cursor:pointer;font-size:15px}
.beh-clicks summary::-webkit-details-marker{display:none}
.beh-clicks summary .ti{flex:none;width:20px;height:20px;color:var(--label2);transition:transform .2s}
.beh-clicks[open] summary .ti{transform:rotate(180deg)}
.beh-clicks .group{margin:0}
.beh-map{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 32px);min-height:var(--tap);margin:0 16px 10px}
/* тепловая карта админа (stats.js): слой поверх экрана, числа на кнопках, панель сверху */
.ht-layer{z-index:900;pointer-events:none;mix-blend-mode:multiply}
[data-theme="dark"] .ht-layer{mix-blend-mode:screen}
.ht-badge{z-index:910;padding:2px 7px;border-radius:999px;background:#E5484D;color:#fff;font:700 12px/1.4 InterMM;white-space:nowrap;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.ht-bar{position:fixed;z-index:920;left:12px;right:12px;top:calc(8px + var(--safe-t, 0px));display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-radius:16px;background:rgba(20,20,24,.88);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.ht-t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.ht-t b{font:700 14px/1.3 InterMM}
.ht-t span{opacity:.8}
.ht-bar button{flex:none;display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 10px;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font:600 14px InterMM}
.ht-bar button[aria-pressed="true"]{background:#fff;color:#141418}
.ht-bar .ti{width:20px;height:20px}
.row .btn.small{flex:none;min-height:var(--tap)}
/* маскот-шеф (mascot.js): метка <div class="chef" data-chef> оживает сама; ширину задаёт контейнер */
.chef{display:block;width:112px;margin:0 auto;pointer-events:none}
.chef svg{display:block;width:100%;height:auto}
.empty .chef{width:96px;margin:-16px auto 10px}
.chef.wait{animation:chef-in .35s ease .6s both}
.chef.wait[data-chef-on="kept"]{animation:none}
@keyframes chef-in{from{opacity:0;transform:translateY(10px)}}
[data-theme="dark"] .chef [data-p^="foot"]{fill:#7A8291}
[data-theme="dark"] .chef [data-p="shadow"]{fill:#000;opacity:.4}
@media (prefers-reduced-motion:reduce){.chef.wait{animation:none}}
.chef.wait{margin-top:28px}
.chef.wait+.empty{padding-top:8px}
.story-art{position:relative}
/* шеф в шапке экрана: голова и плечи в круге, колпак выглядывает над ним; по нажатию — пузырь с фразой */
.home-head,.hero{position:relative}
.hchef{position:absolute;top:8px;right:0;z-index:3;--cs:64px}
.home-head .hchef{top:0;--cs:56px}
.home-head.with-chef .home-sub{margin-top:12px}
.with-chef>h1,.with-chef>p{padding-right:76px}
.home-head.with-chef .greet{padding-right:64px}
.hc-btn{display:block;padding:0;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;-webkit-tap-highlight-color:transparent}
.hc-btn:active .chef.bust{transform:scale(.94)}
.chef.bust{position:relative;width:var(--cs);height:calc(var(--cs) * 1.18);margin:0;overflow:hidden;border-radius:0 0 calc(var(--cs) / 2) calc(var(--cs) / 2);transition:transform .15s}
.chef.bust::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--cs);border-radius:50%;background:#FFE3A1}
.chef.bust svg{position:relative;width:calc(var(--cs) * 1.5)!important;margin:calc(var(--cs) * -.05) 0 0 calc(var(--cs) * -.25)}
[data-theme="dark"] .chef.bust::before{background:#5A4A22}
.say{--sb:var(--card);position:absolute;top:4px;right:calc(100% + 10px);width:max-content;max-width:min(250px,calc(100vw - 120px));padding:10px 14px;border-radius:18px;background:var(--sb);color:var(--label);font:600 15px/1.3 InterMM;text-align:left;box-shadow:0 6px 22px rgba(0,0,0,.16);opacity:0;visibility:hidden;transform:translateX(10px) scale(.85);transform-origin:right 18px;transition:opacity .18s,transform .3s cubic-bezier(.22,1,.36,1),visibility .18s;pointer-events:none}
.say::after{content:"";position:absolute;top:14px;right:-7px;border:8px solid transparent;border-right:0;border-left-color:var(--sb)}
.say.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.say.kept{transition:none}
.say small{display:block;margin-top:4px;font:600 12px/1.3 InterMM;color:var(--label2)}
/* событие дня на «Сегодня»: повод сверху, шеф сбоку рассказывает (пузырь с хвостиком к нему), ниже — блюдо к поводу */
.dayev{position:relative;margin:2px 0 14px;padding:14px 14px 12px;border-radius:24px;background:linear-gradient(140deg,#FFE7B3,#FFC978);color:#2B2B33;overflow:hidden;isolation:isolate}
.dayev.k-season{background:linear-gradient(140deg,#DDF5C8,#A9E28B)}
.dayev.k-holiday{background:linear-gradient(140deg,#FFD6CC,#FF9F8A)}
.ev-body{padding-right:96px}
.ev-cap{font:700 12px/1.2 InterMM;letter-spacing:.04em;text-transform:uppercase;opacity:.65}
.ev-t{margin-top:4px;font:750 20px/1.2 InterMM;text-wrap:balance}
.ev-say{position:relative;margin-top:10px;padding:10px 12px;border-radius:16px;background:#FFFFFFE6;font:500 15px/1.35 InterMM;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ev-say::after{content:"";position:absolute;right:-8px;bottom:16px;border:8px solid transparent;border-right:0;border-left-color:#FFFFFFE6}
.ev-chefbtn{position:absolute;right:0;top:40px;width:100px;height:130px;padding:0 4px;display:flex;align-items:flex-start;justify-content:center;-webkit-tap-highlight-color:transparent}
.ev-chefbtn:active .ev-chef{transform:scale(.95)}
.dayev .ev-chef{width:92px;margin:6px 0 0;transition:transform .15s}
.ev-say b{display:block;margin-bottom:2px;font:700 12px/1.2 InterMM;color:#B25E00}
.ev-hint{margin-top:6px;font:600 12px/1.3 InterMM;opacity:.6}
.ev-go{position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;padding:8px 12px 8px 8px;border-radius:16px;background:#2B2B33;color:#fff;text-align:left}
.ev-go .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.ev-go small{font:600 12px/1.2 InterMM;opacity:.7}
.ev-go b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:650 15px/1.3 InterMM}
.ev-go .ti{flex:none;width:18px;height:18px}
.ev-pic{flex:none;width:52px;height:40px;border-radius:12px;overflow:hidden;background:var(--t)}
.ev-pic svg{display:block;width:100%;height:100%}
.ev-x{position:absolute;top:2px;right:2px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#2B2B33}
.ev-x::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#FFFFFF8C;z-index:-1}
.ev-x .ti{width:16px;height:16px}
/* граммовка шага: сколько чего добавить прямо сейчас */
.cook-ings{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding:0;list-style:none}
.cook-ings li{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;padding:7px 12px;border-radius:12px;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.06);font:500 15px/1.25 InterMM}
.cook-ings .n{overflow-wrap:anywhere}
.cook-ings b{flex:none;font-weight:700;color:var(--link);white-space:nowrap}
/* событие дня свёрнуто — полоска: голова шефа, повод, «развернуть» */
.dayev-mini{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin:2px 0 14px;padding:6px 14px 6px 16px;border-radius:18px;background:linear-gradient(140deg,#FFE7B3,#FFC978);color:#2B2B33;text-align:left}
.dayev-mini.k-season{background:linear-gradient(140deg,#DDF5C8,#A9E28B)}
.dayev-mini.k-holiday{background:linear-gradient(140deg,#FFD6CC,#FF9F8A)}
.dayev-mini .chef.head{margin:0}
.dayev-mini .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.dayev-mini small{font:700 12px/1.2 InterMM;letter-spacing:.04em;text-transform:uppercase;opacity:.65}
.dayev-mini b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 15px/1.3 InterMM}
.dayev-mini .ti{flex:none;width:18px;height:18px}
/* шеф под шагом готовки — с советом или парой слов */
.cook-chef{display:flex;align-items:flex-end;gap:6px;margin-top:22px}
.cook-chef .chef{flex:none;width:84px;margin:0 0 -4px -8px}
.cook-say{--sb:var(--card);position:relative;flex:1;margin-bottom:44px;padding:11px 14px;border-radius:18px;background:var(--sb);font:500 16px/1.35 InterMM;box-shadow:0 4px 16px rgba(0,0,0,.08);animation:say-in .35s cubic-bezier(.22,1,.36,1) .2s both}
.cook-say::before{content:"";position:absolute;bottom:14px;left:-7px;border:8px solid transparent;border-left:0;border-right-color:var(--sb)}
[data-theme="dark"] .say,[data-theme="dark"] .cook-say{--sb:#3A3A3C}
.cook-say b{display:block;margin-bottom:2px;font:700 13px/1.2 InterMM;color:var(--link)}
@keyframes say-in{from{opacity:0;transform:translateX(-8px) scale(.9)}}
/* шеф во всплывашке — одна голова */
.chef.head{--hs:34px;flex:none;width:var(--hs);height:var(--hs);margin:0 6px 0 -10px;overflow:hidden}
.chef.head svg{width:calc(var(--hs) * 1.364)!important;margin:calc(var(--hs) * -.109) 0 0 calc(var(--hs) * -.182)}
/* красный от злости шеф — «красные флаги»: перекрашиваем кожу поверх цветов рисунка */
.chef.red [data-p="skull"],.chef.red [data-p^="lid"],.chef.red [data-p^="low"],.chef.red [data-p^="hand"]>circle{fill:#F0765F}
.chef.red [data-p="ears"] circle,.chef.red [data-p="nose"]{fill:#D4523B}
.chef.red [data-p^="arm"]{stroke:#F0765F}
.cook-flag{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px 10px 10px;border-radius:16px;background:#FFE4DE;color:#8E1B0F;animation:flag-in .45s cubic-bezier(.22,1,.36,1) .1s both}
.cook-flag .chef.head{--hs:52px;margin:0;border-radius:50%;background:#FFC9BE}
.cook-flag p{font:600 15px/1.35 InterMM}
.cook-flag b{display:block;margin-bottom:1px;font:800 12px/1.2 InterMM;letter-spacing:.04em;text-transform:uppercase;color:#D3301C}
[data-theme="dark"] .cook-flag{background:#3D1F1A;color:#FFC2B6}
[data-theme="dark"] .cook-flag .chef.head{background:#5C2A22}
[data-theme="dark"] .cook-flag b{color:#FF8A75}
@keyframes flag-in{from{opacity:0;transform:translateY(-6px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.cook-flag{animation:none}}
.card.paywall .pw-chef{width:108px;margin:-4px auto 0}
@media (prefers-reduced-motion:reduce){.say,.say.on{transition:opacity .15s;transform:none}.cook-say{animation:none}}
.onb-langs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 12px}
.onb-langs button{min-height:44px;padding:0 12px;border-radius:999px;background:var(--fill);color:var(--label2);font:600 14px/1 InterMM}
.onb-langs button.on{background:var(--tint);color:var(--link);box-shadow:inset 0 0 0 2px var(--accent)} /* --cta есть только у неба «Сегодня» — здесь выбранный язык был без подложки */
@media (max-width:359px){.onb-langs{gap:4px}.onb-langs button{padding:0 8px;font-size:13px}} /* четыре языка — в одну строку и на 320 px */
.story-chef{position:absolute;left:-16%;bottom:-6%;width:38%;margin:0}