/* Toast & Nav */
/* Пробелы вокруг «+» в calc() обязательны по спецификации: calc(66px+10px)
   для браузера невалиден, правило целиком отбрасывается, bottom становится
   auto — и тост уезжал под самый верх экрана, где в установленном PWA его
   закрывает системная строка состояния (status-bar-style: black-translucent).
   Из-за этого не было видно НИ ОДНОГО уведомления во всём приложении. */
/* скрытый тост уводим не только сдвигом: сдвига мало — он оставался лежать поверх нижнего меню */
.toast{position:fixed;bottom:calc(var(--nh) + 10px);left:50%;transform:translateX(-50%) translateY(60px);background:var(--color-toast-surface);color:var(--color-text-on-accent);padding:8px 15px;border-radius:var(--radius-chip);font-size:12.5px;transition:transform .3s,opacity .3s,visibility 0s linear .3s;z-index:600;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;transition:transform .3s,opacity .3s,visibility 0s}
/* Пробовали фиолетовую навигацию — не прижилась, вернули белую. */
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:var(--nh);background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;z-index:200}
.nb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:var(--color-text-muted-2);font-size:10.5px;font-weight:500;border:none;background:none;font-family:var(--ff);padding-bottom:4px;position:relative;transition:color .15s}
/* Ховеры и нажатия из макета. Ховер — только там, где есть настоящий курсор:
   на телефоне :hover залипает после тапа, поэтому под @media (hover:hover). */
@media (hover:hover){
  .ic:hover,.dc:hover,.f-card:hover,.instr-card:hover,.profcard:hover,.kitcard:hover,.patcard:hover,.tplcard:hover,.familyOpt:hover{transform:translateY(-1px)}
  .rc:hover{background:var(--color-surface-hover)}
  .svb:hover,.loginBtn:hover:not(.sec),.kitadd:hover{background:var(--color-accent-hover)}
}
.ic,.dc,.f-card,.instr-card,.profcard,.kitcard,.patcard,.tplcard,.familyOpt{transition:transform .15s,box-shadow .15s}
.nb.active{color:var(--color-accent-text);font-weight:600}.nbic{font-size:21px;line-height:1;transition:filter .15s}
/* Полоски-индикатора в макете нет: активная вкладка выделяется цветом,
   а неактивные иконки приглушаются. */
.nb:not(.active) .nbic{filter:grayscale(.7) opacity(.75)}
.nbbdg{position:absolute;top:5px;right:calc(50% - 19px);background:var(--color-badge-count);color:var(--color-text-on-accent);font-size:9.5px;font-weight:700;border-radius:var(--radius-badge);padding:1px 5px;min-width:15px;text-align:center}
.empty{text-align:center;padding:36px 20px;color:var(--color-text-muted)}
/* ── Раздел «Еда» ── */
.foodtab{flex:1;min-width:fit-content;padding:8px 6px;border:none;background:transparent;border-radius:11px;font-family:var(--ff);font-size:12.5px;font-weight:600;color:var(--color-text-muted);cursor:pointer;transition:all .15s}
.foodtab.active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-card)}
.foodpanel{display:none;padding:14px 20px 18px}.foodpanel.active{display:block}
/* сетка: дни вертикально, 3 колонки (завтрак/обед/ужин) — читается на телефоне без зума */
/* класс называется fgrid, а не fg: короткий .fg уже занят группой поля в формах (см. выше) */
.fgrid{display:grid;grid-template-columns:50px 1fr 1fr 1fr;gap:4px}
.fg-h{font-size:10.5px;color:var(--color-text-muted);text-align:center;padding-bottom:2px}
.fg-d{font-size:11.5px;color:var(--color-text-muted);display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.fg-d b{font-weight:700;color:var(--color-text);font-size:12.5px}
.fg-d.today b{color:var(--color-accent-text)}
.fg-c{min-height:44px;border-radius:var(--radius-badge);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;text-align:center;padding:3px 2px;line-height:1.25;color:var(--color-text);border:1px solid transparent}
.fg-c .fw{font-size:9px;opacity:.6;margin-top:1px}
.fg-c.no{border:1px dashed var(--color-border);color:var(--color-text-placeholder);background:transparent}
.fg-c.gap{background:var(--color-food-gap-surface);color:var(--color-danger-text-strong);font-weight:600;border-color:var(--color-food-gap-border)}
.fg-ck{grid-column:1/-1;background:var(--color-food-cook-surface);border:1px solid var(--color-food-cook-border);border-radius:var(--radius-badge);padding:7px 9px;margin:1px 0 4px;font-size:11.5px;color:var(--color-food-cook-text);line-height:1.5}
.fg-ck b{font-weight:700}
.fg-busy{grid-column:1/-1;font-size:10.5px;color:var(--color-destructive);padding:0 2px 3px}
.f-hero{background:var(--color-tint);border-radius:var(--radius-card);padding:15px 16px;margin-bottom:14px}
.f-btn{flex:1;background:var(--bg2);border:1px solid var(--color-border-input);border-radius:var(--radius-control);padding:9px;font-size:12.5px;cursor:pointer;font-family:var(--ff);color:var(--color-text)}
.f-card{background:var(--color-surface);border-radius:var(--radius-card);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-card)}
.f-warn{background:var(--color-danger-surface);border-radius:var(--radius-card);padding:14px 16px;font-size:12.5px;color:var(--color-danger-text);margin-top:12px;line-height:1.5}