/* ==========================================================
   Истра — дизайн-система «Fresh Care»
   Светлая тёплая бумага, лаймовый акцент, чернильные пилюли,
   крупные скруглённые карточки. Всё считано с референса
   медицинского приложения; правила старой системы Ventriloc
   для этого проекта отменены (архив — .claude/backup-…).

   Главное: брат — дислексик. Поэтому режим «читать легче»
   включён по умолчанию, фон не чисто белый, курсива нет,
   строки короткие, интервалы широкие, у каждого раздела иконка.
   ========================================================== */

:root{
  /* --- фирменные --- */
  --lime:#a9e06a;         /* заливка: чипы, кольца, галочки */
  --lime-deep:#4e7a2e;    /* тот же зелёный, но читаемый текстом */
  --lime-soft:#e7f6d3;    /* мягкая зелёная подложка */

  /* --- роли (имена оставлены прежними: на них завязан app.js) --- */
  --graphite:#14181a;     /* чернила: текст, тёмные кнопки */
  --white:#fbfbf7;        /* страница — тёплая бумага, не чистый белый */
  --ash:#edefe7;          /* карточка */
  --fog:#f6f7f2;          /* вложенная поверхность */
  --ivory:#e7f6d3;        /* акцентный блок (зелёная заливка) */
  --steel:#4c5652;        /* второй уровень текста */
  --slate:#7f8a84;        /* подписи */
  --mist:#e2e5dd;         /* линии, дорожки */
  --ember:#a9e06a;        /* акцент-заливка (бывший оранжевый) */
  --brass:#4e7a2e;        /* акцент-текст и линии графиков */
  --alert:#e0562f;        /* только тревога: перебор, ошибка, красная зона */
  /* шкала нагрузки дня: слева спокойный зелёный, справа тревожный красный */
  --load1:#7cc243; --load2:#a5cd3c; --load3:#cfcb33; --load4:#eab628;
  --load5:#ef8f2c; --load6:#e4652f; --load7:#d33c2f;

  --card:#ffffff;         /* белая карточка поверх бумаги */
  --btn-bg:#14181a;       /* главная кнопка */
  --btn-fg:#fbfbf7;
  --tabs-bg:#ffffff;
  --tabs-border:#e2e5dd;
  --input-bg:#ffffff;
  --shadow:0 6px 24px rgba(20,24,26,.07);
  --shadow-soft:0 2px 10px rgba(20,24,26,.05);

  --display-font:'Nunito', ui-rounded, system-ui, sans-serif;
  --font:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --pad:18px;
  --r-card:22px;
  --r-sm:16px;
  --r-in:14px;
  --r-pill:999px;
}

/* Ночь. Те же роли, перевёрнутые. Лайм не трогаем — он и на тёмном живой,
   а главная кнопка ночью становится лаймовой: белая пилюля слепит. */
:root[data-theme="dark"]{
  --lime:#a9e06a; --lime-deep:#b8dd8e; --lime-soft:#26331b;

  --graphite:#eef1e9;
  --white:#0f1312;
  --ash:#1a1f1d;
  --fog:#161b19;
  --ivory:#26331b;
  --steel:#aeb6b0;
  --slate:#7d867f;
  --mist:#2b312e;
  --ember:#a9e06a;
  --brass:#b8dd8e;
  --alert:#ff7a55;
  --load1:#8fd357; --load2:#b4dc4f; --load3:#dcd845; --load4:#f5c53c;
  --load5:#ff9f45; --load6:#ff7a45; --load7:#ff5c46;

  --card:#1a1f1d;
  --btn-bg:#a9e06a;
  --btn-fg:#0f1312;
  --tabs-bg:#181d1b;
  --tabs-border:#2b312e;
  --input-bg:#121716;
  --shadow:0 6px 24px rgba(0,0,0,.35);
  --shadow-soft:0 2px 10px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--white); color:var(--graphite); font-family:var(--font);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{font-family:var(--display-font); font-weight:800; letter-spacing:-0.02em; margin:0; line-height:1.2}
p{margin:0}
button,input{font-family:inherit; font-size:inherit; color:inherit}
button{cursor:pointer}
b,strong{font-weight:700}
em,i{font-style:normal}   /* курсив дислексику мешает — везде выключен */

/* ---------- Экран входа ---------- */
.lock{position:fixed; inset:0; background:var(--white); z-index:50; display:flex; align-items:center; justify-content:center; padding:24px}
.lock[hidden]{display:none}
.lock-inner{width:100%; max-width:340px; text-align:center}
.lock-title{font-size:40px; line-height:1.15}
.lock-sub{color:var(--steel); font-size:14px; margin-top:12px}
.pin-dots{display:flex; gap:14px; justify-content:center; margin:36px 0 28px}
.pin-dots i{width:13px; height:13px; border-radius:50%; border:2px solid var(--mist); display:block}
.pin-dots i.on{background:var(--lime); border-color:var(--lime)}
.pin-pad{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.pin-pad button{
  background:var(--ash); border:0; border-radius:var(--r-pill); padding:18px 0;
  font-size:23px; font-family:var(--display-font); font-weight:700;
  transition:transform .12s ease, background .15s ease;
}
.pin-pad button:active{background:var(--lime); transform:scale(.94)}
.pin-del{background:transparent !important; color:var(--slate)}
.lock-err{color:var(--alert); font-size:14px; min-height:20px; margin-top:16px}

/* ---------- Каркас ---------- */
#app[hidden]{display:none}
.top{
  position:sticky; top:0; z-index:20; background:var(--white);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px var(--pad) 12px;
}
.top{word-spacing:normal}
.top-left{display:flex; align-items:baseline; gap:7px; min-width:0}
.brand{font-family:var(--display-font); font-weight:800; font-size:19px; letter-spacing:-0.03em}
.dot{color:var(--lime-deep)}
.brand-sub{color:var(--slate); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.streak{
  background:var(--lime-soft); border:0; border-radius:var(--r-pill); padding:8px 14px;
  font-size:13px; font-weight:600; color:var(--lime-deep); white-space:nowrap;
  transition:transform .12s ease;
}
.streak span{color:var(--lime-deep)}
.streak:active{transform:scale(.94)}

.top-right{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.theme-toggle{display:flex; align-items:center; background:none; border:0; padding:2px}
.theme-track{
  width:42px; height:24px; border-radius:var(--r-pill); background:var(--mist);
  position:relative; transition:background .2s ease; flex:0 0 auto;
}
:root[data-theme="dark"] .theme-track{background:var(--lime-soft)}
.theme-knob{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:var(--graphite); transition:transform .22s cubic-bezier(.22,1,.36,1);
}
:root[data-theme="dark"] .theme-knob{transform:translateX(18px); background:var(--lime)}

main{padding:0 var(--pad) 118px}
.screen[hidden]{display:none}

/* ---------- Герой ---------- */
.hero{padding:20px 0 20px; position:relative}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:600; color:var(--lime-deep);
  background:var(--lime-soft); border-radius:var(--r-pill); padding:5px 13px; line-height:1.2;
}
.display{font-size:46px; line-height:1.05; letter-spacing:-0.03em; margin-top:14px}
.display-unit{font-size:17px; letter-spacing:0; font-weight:700; color:var(--slate); margin-left:8px}
.heading-lg{font-size:30px; line-height:1.18; letter-spacing:-0.03em; margin-top:14px}
.hero-rows{margin-top:18px; display:flex; flex-direction:column; gap:8px}
.hero-meta{display:flex; justify-content:space-between; font-size:13px; color:var(--steel); font-weight:500}
.hero-note{margin-top:14px; font-size:14px; color:var(--steel); max-width:34em}
.hero-note b{color:var(--graphite); font-weight:700}
.hero-note.warn{color:var(--alert)}

.bar{position:relative; height:12px; background:var(--mist); border-radius:var(--r-pill); overflow:hidden}
.bar-thin{height:8px}
.bar-fill{height:100%; width:0; background:var(--lime); border-radius:var(--r-pill); transition:width .4s cubic-bezier(.22,1,.36,1)}
.bar-fill-brass{background:var(--graphite)}
.bar-fill.over{background:var(--alert)}
.bar-mark{position:absolute; top:0; bottom:0; width:2px; background:var(--graphite); opacity:.45}

/* ---------- Карточки и кнопки ---------- */
.card{background:var(--ash); border-radius:var(--r-card); padding:20px; margin-bottom:14px}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.card-head h2{font-size:19px}
.hint{font-size:13px; color:var(--slate); line-height:1.55; max-width:36em}
.section-title{font-size:22px; margin:26px 0 14px}
.link-btn{background:none; border:0; padding:0; font-size:13px; font-weight:600; color:var(--lime-deep); text-decoration:underline; text-underline-offset:3px}

.btn{
  background:var(--btn-bg); color:var(--btn-fg); border:0; border-radius:var(--r-pill);
  padding:13px 22px; font-family:var(--display-font); font-weight:700; font-size:15px;
  letter-spacing:-0.01em; line-height:1.1;
  transition:transform .12s ease, background .15s ease, opacity .15s ease;
}
.btn:active{transform:scale(.96); opacity:.9}
.btn-ghost{background:transparent; color:var(--graphite); border:1.5px solid var(--mist); display:inline-block; text-align:center}
.btn-lime{background:var(--lime); color:#14181a}
.btn-row{display:flex; gap:10px; margin:14px 0 8px; flex-wrap:wrap}

/* ---------- Формы ---------- */
.weigh,.move{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.weigh input,.move input,.calc input{
  background:var(--input-bg); border:1.5px solid var(--mist); border-radius:var(--r-in);
  padding:12px 14px; font-size:17px; font-weight:600; font-variant-numeric:tabular-nums;
}
.weigh input{width:118px}
.move input{width:92px}
.weigh input:focus,.move input:focus,.calc input:focus{outline:none; border-color:var(--lime); background:var(--card)}
.weigh-unit{color:var(--slate); font-size:14px; margin-left:-4px}
.weigh-status{margin-top:12px; font-size:13px; color:var(--steel)}
.weigh-status.ok{color:var(--lime-deep); font-weight:600}
.weigh-status.warn{color:var(--alert)}
.check-inline{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--steel)}
.check-inline input{width:20px; height:20px; accent-color:var(--lime-deep)}
.move .bar{margin-top:14px}
#barMove{margin:0}

/* ---------- Приёмы пищи ---------- */
.meals{display:flex; flex-direction:column; gap:10px; margin-bottom:16px}
.meal{
  display:flex; gap:14px; align-items:flex-start; background:var(--card);
  border-radius:var(--r-card); padding:16px 18px; border:1.5px solid var(--mist);
  text-align:left; width:100%;
}
.meal.done{background:var(--lime-soft); border-color:transparent}
.meal-check{
  flex:0 0 auto; width:28px; height:28px; border:2px solid var(--mist); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
  font-size:14px; font-weight:700; color:transparent;
}
.meal.done .meal-check{background:var(--lime); border-color:var(--lime); color:#14181a}
.meal-body{min-width:0; flex:1}
.meal-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.meal-title{font-family:var(--display-font); font-weight:800; font-size:17px; letter-spacing:-0.02em}
.meal-time{font-size:12px; font-weight:600; color:var(--lime-deep); background:var(--lime-soft); border-radius:var(--r-pill); padding:3px 9px; white-space:nowrap}
.meal.done .meal-time{background:var(--card)}
.meal-what{font-size:14px; color:var(--steel); margin-top:7px}
.meal-nums{font-size:13px; color:var(--slate); margin-top:8px; font-variant-numeric:tabular-nums}
.meal-nums b{color:var(--graphite); font-weight:700}
.meal-note{font-size:13px; color:var(--slate); margin-top:8px; padding-left:12px; border-left:3px solid var(--lime)}

/* ---------- Калькулятор ---------- */
.calc{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.calc input{font-size:16px}
#calcFood{flex:1 1 150px; min-width:0}
#calcGrams{width:96px}
.calc-list{margin-top:14px}
.calc-row{display:flex; align-items:baseline; gap:10px; padding:11px 0; border-bottom:1.5px solid var(--mist); font-size:14px}
.calc-row:last-child{border-bottom:0}
.calc-row .cr-name{flex:1; min-width:0}
.calc-row .cr-num{color:var(--slate); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap}
.calc-row button{background:none; border:0; padding:0 0 0 8px; color:var(--slate); font-size:18px; line-height:1}
.calc-total{display:flex; justify-content:space-between; padding-top:12px; font-size:14px}
.calc-total b{font-weight:700}

/* ---------- Чипы, теги ---------- */
.tag{
  font-size:11px; font-weight:700; color:var(--lime-deep); background:var(--lime-soft);
  border:0; border-radius:var(--r-pill); padding:4px 11px; white-space:nowrap;
}
.tag.wait{color:var(--alert); background:color-mix(in srgb, var(--alert) 14%, transparent)}
.g-head .tag{margin-left:auto; margin-right:10px}
.s-block{margin-bottom:14px}
.s-block h4{font-family:var(--font); font-size:12px; font-weight:700; color:var(--lime-deep); letter-spacing:0; margin:0 0 4px}
.s-block p{font-size:14px; color:var(--steel); margin:0}

/* ---------- Вода ---------- */
.water{display:flex; gap:7px; flex-wrap:wrap}
.water button{
  flex:1 1 auto; min-width:40px; height:46px; border:1.5px solid var(--mist); background:var(--input-bg);
  border-radius:var(--r-in); color:var(--slate); font-size:12px; font-weight:600;
}
.water button.on{background:var(--lime); border-color:var(--lime); color:#14181a}
#waterText{margin-top:12px}

/* ---------- Добавки ---------- */
.supps{display:flex; flex-direction:column; gap:2px}
.supp{
  display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-bottom:1.5px solid var(--mist);
  background:none; border-left:0; border-right:0; border-top:0; width:100%; text-align:left;
}
.supp:last-child{border-bottom:0}
.supp-box{
  flex:0 0 auto; width:24px; height:24px; border:2px solid var(--mist); border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
  color:transparent; margin-top:1px;
}
.supp.done .supp-box{background:var(--lime); border-color:var(--lime); color:#14181a}
.supp.done .supp-name{color:var(--slate)}
.supp-name{font-size:15px; font-weight:600}
.supp-dose{font-size:13px; color:var(--steel); margin-top:2px}
.supp-note{font-size:12px; color:var(--slate); margin-top:4px}

/* ---------- Фото и письмо ---------- */
.card-photo{background:var(--lime-soft)}
.carousel{margin:24px 0 14px}
.carousel-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:0;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.carousel-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%; scroll-snap-align:start; margin:0}
.slide img{width:100%; display:block; border-radius:var(--r-card); aspect-ratio:3/2; object-fit:cover}
.slide-cap{font-size:12px; color:var(--slate); margin-top:8px}
.dots{display:flex; gap:7px; justify-content:center; margin-top:12px}
.dots i{width:7px; height:7px; border-radius:50%; background:var(--mist); display:block}
.dots i.on{background:var(--lime-deep)}
.photo-add{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px}
.photo-add .hint{flex:1 1 160px}

.letter{
  font-family:var(--display-font); font-weight:700; font-size:18px; line-height:1.55;
  letter-spacing:-0.02em; color:var(--graphite); background:var(--lime-soft);
  padding:24px 22px; border-radius:var(--r-card); margin-top:14px; max-width:34em;
}

/* ---------- Графики ---------- */
.chart-card{background:var(--card); border:1.5px solid var(--mist)}
.chart{width:100%; overflow:hidden}
.chart svg{width:100%; height:auto; display:block}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--slate)}
.lg::before{content:''; display:inline-block; width:16px; height:3px; border-radius:2px; background:var(--graphite); margin-right:6px; vertical-align:middle}
.lg-dots::before{background:var(--lime-deep); height:7px; width:7px; border-radius:50%}
.chart-empty{font-size:14px; color:var(--slate); padding:22px 0}

.progress-track{height:14px; background:var(--mist); border-radius:var(--r-pill); overflow:hidden}
.progress-fill{height:100%; width:0; background:var(--lime); border-radius:var(--r-pill); transition:width .5s cubic-bezier(.22,1,.36,1)}
.progress-labels{display:flex; justify-content:space-between; font-size:13px; font-weight:600; color:var(--slate); margin:10px 0 10px; font-variant-numeric:tabular-nums}

.weeks{display:flex; flex-direction:column}
.week-row{display:grid; grid-template-columns:1fr auto auto; gap:10px; padding:12px 0; border-bottom:1.5px solid var(--mist); font-size:14px; font-variant-numeric:tabular-nums}
.week-row:last-child{border-bottom:0}
.week-row span:first-child{color:var(--steel)}
.week-d{font-weight:700}
.week-d.good{color:var(--lime-deep)}
.week-d.fast{color:var(--alert)}
.week-tag{font-size:12px; color:var(--slate)}

/* ---------- Еда, покупки ---------- */
.kv{display:flex; flex-direction:column}
.kv-row{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1.5px solid var(--mist); font-size:14px}
.kv-row:last-child{border-bottom:0}
.kv-row span:first-child{color:var(--steel)}
.kv-row b{font-weight:700; font-variant-numeric:tabular-nums}
.week-list{display:flex; flex-direction:column}
.week-item{padding:13px 0; border-bottom:1.5px solid var(--mist)}
.week-item:last-child{border-bottom:0}
.week-item.today{background:var(--lime-soft); margin:0 -20px; padding:13px 20px; border-bottom:0; border-radius:var(--r-sm)}
.week-item-top{display:flex; gap:10px; align-items:baseline}
.week-item-day{font-size:12px; font-weight:700; color:var(--lime-deep); width:28px; flex:0 0 auto}
.week-item-name{font-family:var(--display-font); font-weight:800; font-size:16px; letter-spacing:-0.02em}
.week-item-what{font-size:14px; color:var(--steel); margin-top:4px; padding-left:38px}
.cost{margin-top:14px}
.cost-group{font-size:13px; font-weight:700; color:var(--lime-deep); margin:14px 0 6px}
.cost-row{display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14px}
.cost-row span:first-child{flex:0 0 44%}
.cost-bar{flex:1; height:8px; background:var(--mist); border-radius:var(--r-pill); overflow:hidden}
.cost-bar i{display:block; height:100%; background:var(--lime); border-radius:var(--r-pill)}
.cost-row.pricey .cost-bar i{background:var(--alert)}
.cost-val{flex:0 0 auto; font-variant-numeric:tabular-nums; color:var(--steel); font-size:13px}
.batch{display:flex; flex-direction:column; gap:16px}
.batch-item h3{font-size:17px}
.batch-item p{font-size:14px; color:var(--steel); margin-top:5px}
.shop-group{font-size:13px; font-weight:700; color:var(--lime-deep); margin:16px 0 4px}
.shop-item{
  display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1.5px solid var(--mist);
  width:100%; text-align:left; background:none; border-left:0; border-right:0; border-top:0; font-size:14px;
}
.shop-item .supp-box{width:22px; height:22px; margin-top:0}
.shop-item.done span{color:var(--slate); text-decoration:line-through}

/* ---------- Аккордеоны: памятка, БАДы, рутина ---------- */
.guide{display:flex; flex-direction:column; gap:10px}
.g-item{background:var(--ash); border-radius:var(--r-card); overflow:hidden}
.g-item.danger{background:var(--lime-soft)}
.g-head{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:none; border:0; padding:18px 20px; text-align:left;
  font-family:var(--display-font); font-weight:800; font-size:17px; letter-spacing:-0.02em;
}
.g-head i{
  color:var(--lime-deep); font-size:16px; flex:0 0 auto; width:28px; height:28px;
  background:var(--lime-soft); border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.g-body{padding:0 20px 18px; display:none}
.g-item.open .g-body{display:block}
.g-body p{font-size:14px; color:var(--steel); margin-bottom:10px; max-width:34em}
.g-body ul{margin:0; padding-left:20px}
.g-body li{font-size:14px; color:var(--steel); margin-bottom:10px; max-width:34em}
.g-body li::marker{color:var(--lime-deep)}

/* ---------- Меню недели ---------- */
.mday{background:var(--ash); border-radius:var(--r-card); padding:20px; margin-bottom:12px}
.mday.today{background:var(--lime-soft)}
.mday-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px}
.mday-head h2{font-size:19px}
.mday-sum{font-size:12px; font-weight:700; color:var(--lime-deep); font-variant-numeric:tabular-nums; white-space:nowrap}
.mrow{padding:11px 0; border-bottom:1.5px solid var(--mist)}
.mrow:last-child{border-bottom:0}
.mrow-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.mrow-name{font-family:var(--display-font); font-weight:700; font-size:15px; letter-spacing:-0.02em}
.mrow-num{font-size:12px; color:var(--slate); font-variant-numeric:tabular-nums; white-space:nowrap}
.mrow-what{font-size:13px; color:var(--steel); margin-top:4px}

.daybar{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  margin:0 calc(var(--pad) * -1) 16px; padding:2px var(--pad) 6px;
}
.daybar::-webkit-scrollbar{display:none}
.daychip{
  flex:0 0 auto; background:var(--card); border:1.5px solid var(--mist); border-radius:var(--r-sm);
  padding:11px 15px; display:flex; flex-direction:column; gap:2px; min-width:78px;
  transition:background .2s ease, color .2s ease, transform .12s ease, border-color .2s ease;
}
.daychip:active{transform:scale(.95)}
.daychip-short{font-family:var(--display-font); font-weight:800; font-size:16px; letter-spacing:-0.02em}
.daychip-name{font-size:11px; color:var(--slate); white-space:nowrap}
.daychip{min-width:60px; justify-content:center; text-align:center; padding:12px 14px}
.daychip.today{border-color:var(--lime)}
.daychip.on{background:var(--lime); border-color:var(--lime); color:#14181a}
.daychip.on .daychip-name{color:#3d5a24}

.menu-day .mday{padding:20px 20px 8px}
.mmeal{background:transparent; border-bottom:1.5px solid var(--mist); border-radius:0}
.mmeal:last-of-type{border-bottom:0}
.mmeal .g-head{padding:15px 0; font-family:var(--font); font-weight:600; font-size:var(--fs)}
.mmeal-title{display:flex; flex-direction:column; gap:3px; text-align:left; min-width:0}
.mmeal-title b{font-family:var(--display-font); font-size:17px; font-weight:800; letter-spacing:-0.02em}
.mmeal-num{font-size:12px; font-weight:700; color:var(--lime-deep); font-variant-numeric:tabular-nums}
.mmeal .g-body{padding:0 0 16px}
.mrow-dry{font-size:var(--fs-s); color:var(--slate); margin-top:6px; padding-left:12px; border-left:3px solid var(--mist)}

.recipe{margin-top:14px; background:var(--card); border-radius:var(--r-sm); padding:18px}
.recipe-head{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.recipe-time,.recipe-pans{font-size:11px; font-weight:700; border-radius:var(--r-pill); padding:4px 11px}
.recipe-time{color:var(--lime-deep); background:var(--lime-soft)}
.recipe-pans{color:var(--slate); background:var(--fog)}
.recipe-steps{margin:0; padding-left:22px}
.recipe-steps li{color:var(--steel); margin-bottom:11px; max-width:34em}
.recipe-steps li::marker{color:var(--lime-deep); font-weight:700; font-variant-numeric:tabular-nums}
.recipe-tip{font-size:var(--fs-s); color:var(--steel); background:var(--lime-soft); border-radius:var(--r-in); padding:13px 15px; margin-top:12px}
.mday-nav{display:flex; gap:8px; margin:14px 0 12px}
.mday-nav .btn{flex:1; font-size:13px; padding:12px 8px}

/* шейкер */
.card-shaker{background:var(--lime-soft)}
.shopt{background:var(--card); border-radius:var(--r-sm); padding:15px 17px; margin-top:12px; position:relative}
.shopt.best{box-shadow:inset 0 0 0 2px var(--lime)}
.shopt-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.shopt-name{font-family:var(--display-font); font-weight:800; font-size:16px; letter-spacing:-0.02em}
.shopt-price{font-size:12px; font-weight:700; color:var(--lime-deep); white-space:nowrap; font-variant-numeric:tabular-nums}
.shopt-text{font-size:var(--fs-m); color:var(--steel); margin-top:6px}
.shopt-flag{
  position:absolute; top:-10px; left:16px; background:var(--lime); color:#14181a;
  font-size:11px; font-weight:700; letter-spacing:0; padding:3px 10px; border-radius:var(--r-pill);
}

/* ---------- Рутина: таймлайн ---------- */
.timeline{margin-top:8px; border-left:2px solid var(--mist); padding-left:20px}
.tl-row{position:relative; padding:0 0 18px}
.tl-row:last-child{padding-bottom:0}
.tl-row::before{
  content:''; position:absolute; left:-27px; top:5px; width:12px; height:12px;
  border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px var(--ash);
}
.tl-t{display:block; font-family:var(--display-font); font-weight:800; font-size:13px; color:var(--lime-deep); font-variant-numeric:tabular-nums; margin-bottom:3px}
.tl-text{color:var(--steel); margin:0; max-width:34em}

/* ---------- Прогресс: кольца, плитки, карта ---------- */
.rings{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:16px}
.ring{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px}
.ring svg{width:100%; max-width:64px; height:auto; display:block}
.ring .ring-val{transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1)}
.ring-num{position:absolute; top:0; left:0; right:0; aspect-ratio:1; max-height:64px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums}
.ring-label{font-size:11px; font-weight:600; margin-top:5px}
.ring-sub{font-size:10px; color:var(--slate); font-variant-numeric:tabular-nums}

.card-adapt{background:var(--lime-soft)}
.adapt-big{font-family:var(--display-font); font-weight:800; font-size:38px; line-height:1; letter-spacing:-0.03em; margin-bottom:10px}
#adaptBody .hint{margin-bottom:8px}
#adaptBody .hint.warn{color:var(--alert)}
#adaptBody .bar{margin:6px 0 10px}

.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px}
.tile{background:var(--card); border:1.5px solid var(--mist); border-radius:var(--r-sm); padding:17px; display:flex; flex-direction:column; gap:2px}
.tile-num{font-family:var(--display-font); font-weight:800; font-size:30px; line-height:1.05; letter-spacing:-0.03em; font-variant-numeric:tabular-nums}
.tile-label{font-size:var(--fs-s); color:var(--steel); font-weight:600}
.tile-sub{color:var(--slate)}

.heat{display:grid; grid-template-columns:repeat(8,1fr); grid-auto-rows:1fr; gap:5px}
.heat-cell{display:block; aspect-ratio:1; border-radius:6px; background:var(--mist)}
.heat-cell.h1{background:color-mix(in srgb, var(--lime) 30%, var(--mist))}
.heat-cell.h2{background:color-mix(in srgb, var(--lime) 60%, var(--mist))}
.heat-cell.h3{background:color-mix(in srgb, var(--lime) 85%, var(--mist))}
.heat-cell.h4{background:var(--lime)}
.heat-cell.now{box-shadow:0 0 0 2.5px var(--graphite)}
.heat-cell.future{opacity:.3}
.heat-legend{display:flex; align-items:center; gap:5px; margin-top:12px; font-size:11px; color:var(--slate)}
.heat-legend i{width:13px; height:13px; border-radius:4px; display:block; background:var(--mist)}
.heat-legend i.h1{background:color-mix(in srgb, var(--lime) 30%, var(--mist))}
.heat-legend i.h2{background:color-mix(in srgb, var(--lime) 60%, var(--mist))}
.heat-legend i.h3{background:color-mix(in srgb, var(--lime) 85%, var(--mist))}
.heat-legend i.h4{background:var(--lime)}
.heat-legend span:first-child{margin-right:4px}
.heat-legend span:last-child{margin-left:4px}

.guide-inline{margin-top:14px}
.guide-inline .g-item{background:var(--card)}
.guide-inline .g-head{padding:15px 16px; font-size:15px}
.guide-inline .g-body{padding:0 16px 14px}

/* ---------- Нижние табы ---------- */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; gap:2px; background:var(--tabs-bg);
  border-top:1.5px solid var(--tabs-border);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  background:none; border:0; border-radius:var(--r-sm); padding:7px 10px 6px; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:3px; min-width:62px;
  font-family:var(--font); font-weight:600; font-size:11px; color:var(--slate); white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.tab-i{width:26px; height:26px; display:block; transition:opacity .2s ease}
/* Иконки нарисованные, перекрасить их нельзя — поэтому активный таб отличается
   не цветом значка, а подложкой. Лаймовой её делать нельзя: лаймовые заливки
   внутри иконки на ней пропадают. Светлая плашка плюс лаймовая обводка. */
.tab.is-active{background:var(--lime-soft); color:var(--graphite); box-shadow:inset 0 0 0 1.5px var(--lime)}
.tab:not(.is-active) .tab-i{opacity:.5}
:root[data-theme="dark"] .tab:not(.is-active) .tab-i{opacity:.75}

/* ---------- Модальное окно ---------- */
.modal{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; padding:0}
.modal[hidden]{display:none}
.modal-back{position:absolute; inset:0; background:rgba(16,20,18,.45); opacity:0; transition:opacity .2s ease}
.modal.on .modal-back{opacity:1}
.modal-box{
  position:relative; width:100%; max-width:460px; background:var(--white);
  border-radius:28px 28px 0 0; padding:26px 22px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(20px); opacity:0;
  transition:transform .26s cubic-bezier(.22,1,.36,1), opacity .2s ease;
  max-height:86vh; overflow-y:auto; box-shadow:var(--shadow);
}
.modal.on .modal-box{transform:none; opacity:1}
.modal-title{font-size:25px; line-height:1.2; margin-bottom:12px}
.modal-body p{font-size:var(--fs-m); color:var(--steel); margin-bottom:10px}
.modal-body p:last-child{margin-bottom:0}
.modal-foot{margin-top:20px; display:flex}
.modal-foot .btn{flex:1; padding:15px 20px}
.modal-cat{display:flex; justify-content:center; margin-bottom:6px}
@media (min-width:560px){
  .modal{align-items:center; padding:20px}
  .modal-box{border-radius:28px; padding-bottom:22px}
}

/* ---------- Коты ----------
   Картинки лежат в img/cats/<поза>.png. Если файла нет — рисуется
   SVG-заглушка тем же кодом, ничего не ломается. */
.cat{display:inline-block; width:96px; color:var(--graphite); line-height:0}
.cat img{width:100%; display:block}
.cat-svg{width:100%; height:auto; display:block; overflow:visible}
.cat-tail{transform-origin:85px 84px; animation:tail 2.6s ease-in-out infinite}
.cat-heart{color:var(--lime-deep); fill:var(--lime-deep); animation:beat 1.6s ease-in-out infinite}
.cat-z{stroke:var(--slate); fill:none; animation:zfloat 3s ease-in-out infinite}
.cat-z2{animation-delay:.8s}
.g-body .cat,.chart-empty + .cat{display:block; margin:14px auto 0}
.card > .cat{display:block; margin:0 auto 10px; width:84px}
.chart .cat{display:block; margin:0 auto; width:84px}
.hero{position:relative}
.hero .cat{position:absolute; right:0; bottom:4px; width:92px; opacity:1}
.hero.has-cat{min-height:132px}
.hero.has-cat .hero-note,.hero.has-cat .heading-lg{padding-right:104px}
.hero.has-cat .hero-note{min-height:64px}
@media (max-width:380px){
  .hero .cat{width:70px}
  .hero.has-cat .hero-note,.hero.has-cat .heading-lg{padding-right:78px}
}
/* Ночью у кота и иконок чёрные части (уши, кончик хвоста, контур) сливаются
   с фоном, и силуэт выглядит дырявым. Обводим рисунок по альфе светлым на 1px —
   внутренние пятна при этом остаются чёрными, как задумано. */
:root[data-theme="dark"] .cat img,
:root[data-theme="dark"] .tab-i,
:root[data-theme="dark"] .ico{
  filter:drop-shadow(1px 0 0 #eef1e9) drop-shadow(-1px 0 0 #eef1e9)
         drop-shadow(0 1px 0 #eef1e9) drop-shadow(0 -1px 0 #eef1e9);
}

/* ---------- Иконки-стикеры в заголовках ---------- */
.ico{display:block; flex:0 0 auto; user-select:none; -webkit-user-drag:none}
.card-head .ico{width:38px; height:38px}
.card-head h2{flex:1 1 auto; min-width:0}
.card-head .hint,.card-head .link-btn{flex:0 0 auto; text-align:right}
.g-head .ico{width:32px; height:32px}
.g-head > span{flex:1 1 auto; min-width:0}
.recipe-head .ico{width:26px; height:26px; margin-right:auto}
@media (max-width:380px){ .card-head .ico{width:32px; height:32px} }

@keyframes tail{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes beat{0%,100%{transform:scale(1)}45%{transform:scale(1.16)}}
@keyframes zfloat{0%{opacity:0; transform:translateY(4px)}40%{opacity:1}100%{opacity:0; transform:translateY(-10px)}}

/* ---------- Сон ---------- */
.card-sleep{background:var(--ash)}
.card-sleep .bar{margin-top:14px}
.quick{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}
.quick-b{
  background:var(--input-bg); border:1.5px solid var(--mist); border-radius:var(--r-pill);
  padding:9px 15px; font-size:14px; font-weight:600; color:var(--steel); font-variant-numeric:tabular-nums;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.quick-b:active{transform:scale(.94)}
.quick-b.on{background:var(--lime); border-color:var(--lime); color:#14181a}
#barSleep{background:var(--lime)}
#barSleep.over{background:var(--alert)}

/* ==========================================================
   Как читать: шрифт и размер.
   Брат дислексик, поэтому режим «читать легче» стоит ПО УМОЛЧАНИЮ:
   Atkinson Hyperlegible плюс широкие интервалы. Кнопкой «Аа»
   можно вернуть обычный шрифт, если так удобнее.
   ========================================================== */
:root{--fs:16px; --fs-s:13px; --fs-m:15px; --lh:1.6; --ls:0; --ws:normal}
:root[data-size="s"]{--fs:15px; --fs-s:12px; --fs-m:14px}
:root[data-size="l"]{--fs:18px; --fs-s:15px; --fs-m:17px}
:root[data-size="xl"]{--fs:20px; --fs-s:17px; --fs-m:19px}
:root[data-font="dys"]{
  --font:'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --display-font:'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --lh:1.8; --ls:0.02em; --ws:0.16em;
}
body{font-size:var(--fs); line-height:var(--lh); letter-spacing:var(--ls); word-spacing:var(--ws)}
:root[data-font="dys"] h1,:root[data-font="dys"] h2,:root[data-font="dys"] h3,:root[data-font="dys"] h4{
  font-weight:700; letter-spacing:0; line-height:1.3;
}
:root[data-font="dys"] .display{font-size:38px; line-height:1.15}
:root[data-font="dys"] .heading-lg{font-size:25px; line-height:1.3}
:root[data-font="dys"] .lock-title{font-size:32px}
:root[data-font="dys"] .modal-title{font-size:21px}
:root[data-font="dys"] p,:root[data-font="dys"] li{text-align:left; max-width:32em}
:root[data-font="dys"] .g-body li{margin-bottom:14px}
:root[data-font="dys"] .tab{font-size:10px; word-spacing:normal}
:root[data-font="dys"] .btn{word-spacing:normal}

.hint,.meal-nums,.meal-note,.supp-note,.mrow-num,.mday-sum,.tile-sub{font-size:var(--fs-s)}
.meal-what,.mrow-what,.g-body p,.g-body li,.s-block p,.batch-item p,.tl-text,.recipe-steps li,.calc-row,.kv-row,.week-row,.shop-item{font-size:var(--fs-m)}

.read-btn{
  background:var(--ash); border:0; border-radius:var(--r-pill); width:38px; height:38px;
  font-size:14px; font-family:var(--display-font); font-weight:800; color:var(--graphite); line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, transform .12s ease;
}
.read-btn:active{background:var(--lime); transform:scale(.94)}
.read-group{margin-bottom:20px}
.read-label{font-size:13px; font-weight:700; color:var(--lime-deep); letter-spacing:0; margin-bottom:8px}
.read-opts{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:8px}
.read-opt{
  background:var(--card); border:1.5px solid var(--mist); border-radius:var(--r-pill); padding:10px 16px;
  font-size:14px; font-weight:600; color:var(--steel);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.read-opt.on{background:var(--lime); border-color:var(--lime); color:#14181a}
.read-opt[data-v="dys"]{font-family:'Atkinson Hyperlegible', var(--font)}

/* ==========================================================
   Анимации
   ========================================================== */
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.14)}100%{transform:scale(1)}}

.screen.in > *{animation:fadeUp .34s cubic-bezier(.22,1,.36,1) both}
.screen.in > *:nth-child(1){animation-delay:0s}
.screen.in > *:nth-child(2){animation-delay:.04s}
.screen.in > *:nth-child(3){animation-delay:.08s}
.screen.in > *:nth-child(4){animation-delay:.12s}
.screen.in > *:nth-child(5){animation-delay:.16s}
.screen.in > *:nth-child(n+6){animation-delay:.2s}
.mday.in{animation:fadeUp .3s cubic-bezier(.22,1,.36,1) both}

.meal{transition:background .2s ease, transform .12s ease, border-color .2s ease}
.meal:active{transform:scale(.985)}
.meal.done .meal-check{animation:pop .3s cubic-bezier(.22,1,.36,1)}
.meal.done .meal-title{text-decoration:line-through; text-decoration-color:var(--lime-deep); text-decoration-thickness:2px}
.water button{transition:background .18s ease, border-color .18s ease, transform .12s ease}
.water button:active{transform:scale(.92)}
.water button.on{animation:pop .26s cubic-bezier(.22,1,.36,1)}
.shop-item,.supp{transition:opacity .2s ease}
.g-item{transition:background .2s ease}
.g-head i{transition:transform .2s ease}
.g-item.open .g-head i{transform:rotate(180deg)}
.g-item.open .g-body{animation:fadeUp .26s ease both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ==========================================================
   Широкий экран
   ========================================================== */
@media (min-width:720px){
  :root{--pad:32px}
  main{max-width:760px; margin:0 auto}
  .top{max-width:760px; margin:0 auto}
  .display{font-size:60px}
  .card{padding:28px}
  .week-item.today{margin:0 -28px; padding:13px 28px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .rings{gap:14px}
  .tabs{justify-content:center; padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}


/* ---------- Переключатель недель цикла ---------- */
.wswitch{display:flex; gap:8px; margin:0 0 10px}
.wchip{
  flex:1; padding:10px 8px; border-radius:var(--r-btn); border:1.5px solid var(--mist);
  background:var(--card); font-size:13px; font-weight:700; color:var(--steel);
}
.wchip.on{background:var(--lime); border-color:var(--lime); color:#14181a}
.wchip-dot{font-style:normal; color:var(--lime-deep); margin-left:4px}
.wchip.on .wchip-dot{color:#3d5a24}
.mday-cycle{font-size:12px; color:var(--slate); margin:-6px 0 12px}

/* ---------- Покупки: три списка с ценами ---------- */
.shop-sec{margin-bottom:10px}
.shop-name{flex:1}
.shop-item.done .shop-name{color:var(--slate); text-decoration:line-through}
/* галочка не меняет высоту строки — иначе список прыгает под пальцем */
.shop-item{min-height:46px; align-items:center}

/* ---------- Недельная добавка, которую уже выпил ---------- */
.supp.locked{opacity:.55}
.supp.locked .supp-box{background:var(--mist); border-color:var(--mist); color:var(--slate)}

/* ---------- Деньги ---------- */
.spend-form{display:flex; flex-wrap:wrap; gap:10px}
.fld{display:flex; flex-direction:column; gap:4px; flex:1 1 45%}
.fld-wide{flex-basis:100%}
.fld span{font-size:12px; font-weight:700; color:var(--slate)}
.fld input,.fld select{
  padding:12px 14px; border-radius:var(--r-btn); border:1.5px solid var(--mist);
  background:var(--card); font:inherit; font-size:16px; color:var(--ink); width:100%;
}
.chart-title{font-size:13px; font-weight:700; color:var(--slate); margin:14px 0 2px}
.spend-list{display:flex; flex-direction:column}
.spend-row{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1.5px solid var(--mist)}
.spend-main{display:flex; flex-direction:column; gap:2px; flex:1}
.spend-main b{font-variant-numeric:tabular-nums}
.spend-meta{font-size:12px; color:var(--slate)}
.danger-btn{color:var(--alert)}


/* ---------- Нагрузка дня: ползунок из семи ступеней ---------- */
.load-range{
  -webkit-appearance:none; appearance:none; width:100%; height:16px; margin:6px 0 4px;
  background:linear-gradient(90deg,
    var(--load1) 0%, var(--load2) 17%, var(--load3) 33%, var(--load4) 50%,
    var(--load5) 67%, var(--load6) 83%, var(--load7) 100%);
  border-radius:999px; outline:none;
}
.load-range.off{filter:saturate(.25) opacity(.7)}
.load-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:30px; height:30px; border-radius:50%;
  background:var(--card); border:3px solid var(--ink); cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.load-range::-moz-range-thumb{
  width:30px; height:30px; border-radius:50%;
  background:var(--card); border:3px solid var(--ink); cursor:pointer;
}
.load-ends{display:flex; justify-content:space-between; font-size:11px; color:var(--slate); margin-bottom:8px}
.load-ends span:nth-child(2){text-align:center}
.load-name{font-family:var(--display-font); font-weight:800; font-size:19px; margin-bottom:2px}
.load-name.off{color:var(--slate); font-weight:600; font-size:16px}
/* цвет ступени — точкой перед словом: жёлтый текст на светлом фоне не читается */
.load-name::before{content:'●'; margin-right:7px}
.load-name.off::before{content:none}
.load-name.l1::before{color:var(--load1)} .load-name.l2::before{color:var(--load2)}
.load-name.l3::before{color:var(--load3)} .load-name.l4::before{color:var(--load4)}
.load-name.l5::before{color:var(--load5)} .load-name.l6::before{color:var(--load6)}
.load-name.l7::before{color:var(--load7)}