/* «100» · приложение программы (Telegram Mini App). Одна колонка под телефон, вкладки снизу.
   Основной вид — тонкий и спокойный: антиква Cormorant Garamond в заголовках и крупных цифрах, Manrope в тексте,
   тёплый молочный фон, тонкие линии, один приглушённый зелёный акцент. Кнопки и поля — от 44 px.
   Вид для слабовидящих (data-a11y="on" на <html>, переключатель в «Ещё») — крупно, жирно, контрастно: в конце файла.
   Цвета — только переменные ниже; тему и вид ставит theme.js до первой отрисовки. */

/* Manrope — переменный 200–800; Cormorant Garamond — 500/600; Golos Text 400/600/700/800 — вид для слабовидящих.
   Все — лицензия OFL, лежат рядом (CSP: только свои файлы). */
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap;
  src: url(fonts/manrope-cyrillic-wght-normal.woff2) format("woff2-variations"), url(fonts/manrope-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap;
  src: url(fonts/manrope-latin-wght-normal.woff2) format("woff2-variations"), url(fonts/manrope-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-cyrillic-500-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-cyrillic-600-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url(fonts/GolosText-400-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url(fonts/GolosText-600-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 700; font-display: swap; src: url(fonts/GolosText-700-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 800; font-display: swap; src: url(fonts/GolosText-800-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url(fonts/GolosText-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url(fonts/GolosText-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 700; font-display: swap; src: url(fonts/GolosText-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 800; font-display: swap; src: url(fonts/GolosText-800-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --top-band: 0px;                 /* полоса Telegram сверху в полноэкранном режиме (ставит body.fs) */
  --kb: 0px;                       /* высота клавиатуры над нижним листом (app.js по visualViewport) */
  --tabs-h: 66px;
  --r-card: 22px;
  --r-btn: 999px;
  --r-field: 14px;

  /* светлая: тёплый молочный фон, белые карточки, графитовый текст, приглушённый зелёный — прогресс и «сделано»;
     янтарь/терракота/красный — только для состояний сахара и давления */
  color-scheme: light;
  --bg: #F7F5F0;
  --surface: #FFFFFF;
  --surface-2: #F3F0E9;
  --surface-3: #E7E2D8;
  --ink: #1B1A17;
  --ink-2: #6E6A62;
  --line: #E9E5DC;
  --line-strong: #CBC5B8;
  --primary: #1B1A17;
  --primary-press: #000000;
  --primary-ink: #1B1A17;
  --primary-soft: #EEEAE2;
  --on-primary: #FFFFFF;
  --accent: #2F6B4E;
  --accent-fill: #2F6B4E;
  --accent-soft: #E8EFE9;
  --on-accent: #FFFFFF;
  --ok: #2F6B4E;      --ok-soft: #E8EFE9;    --ok-dot: #3D8A62;
  --warn: #85571A;    --warn-soft: #F8EEDC;  --warn-dot: #D49A3A;
  --high: #A4481F;    --high-soft: #F8E8DE;  --high-dot: #D66A3A;
  --danger: #A62A20;  --danger-soft: #F8E6E2; --danger-dot: #CC3B2E;
  --danger-fill: #A62A20; --on-danger: #FFFFFF;
  --zone: rgba(47, 107, 78, .08);
  --zone-line: rgba(47, 107, 78, .32);
  --line2: #9A958B;   /* вторая линия графика (нижнее давление, после еды) */
  --shadow: 0 1px 2px rgba(27, 26, 23, .04), 0 8px 24px rgba(27, 26, 23, .04);
  --tabbar: rgba(247, 245, 240, .92);
  --backdrop: rgba(20, 19, 17, .42);
  --toast-bg: #1B1A17;
  --toast-ink: #FFFFFF;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F0F0E;
  --surface: #181816;
  --surface-2: #201F1C;
  --surface-3: #2B2A26;
  --ink: #F2F0EA;
  --ink-2: #A39F96;
  --line: #2A2925;
  --line-strong: #4A4740;
  --primary: #F2F0EA;
  --primary-press: #FFFFFF;
  --primary-ink: #F2F0EA;
  --primary-soft: #24231F;
  --on-primary: #121211;
  --accent: #7CC4A0;
  --accent-fill: #7CC4A0;
  --accent-soft: #17251E;
  --on-accent: #0B1A12;
  --ok: #86CFAA;      --ok-soft: #17251E;    --ok-dot: #6DBB93;
  --warn: #E9C07A;    --warn-soft: #2E2413;  --warn-dot: #E0AC52;
  --high: #F0A07A;    --high-soft: #33200F;  --high-dot: #EB8A5C;
  --danger: #F28B82;  --danger-soft: #361817; --danger-dot: #EE6F64;
  --danger-fill: #B3261E; --on-danger: #FFFFFF;
  --zone: rgba(124, 196, 160, .10);
  --zone-line: rgba(124, 196, 160, .38);
  --line2: #8E8A82;
  --shadow: none;
  --tabbar: rgba(15, 15, 14, .9);
  --backdrop: rgba(0, 0, 0, .62);
  --toast-bg: #F2F0EA;
  --toast-ink: #121211;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 400 16px/1.55 var(--font); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums; }  /* у Cormorant по умолчанию старинные цифры — в заголовках «Неделя 3 из 12» нужны ровные */
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; text-align: inherit; }
a { color: var(--primary-ink); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font: 500 34px/1.08 var(--serif); letter-spacing: -.005em; }
h2 { font: 600 24px/1.15 var(--serif); }
h3 { font: 600 16px/1.35 var(--font); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- каркас ---------- */
#brand { display: none; }
body.fs { --top-band: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
body.fs #brand { display: flex; position: fixed; z-index: 20; left: 0; right: 0; top: 0;
  height: var(--top-band); padding-top: var(--tg-safe-area-inset-top, 0px);
  align-items: center; justify-content: center; background: var(--bg); color: var(--ink); }
#brand svg { height: 14px; width: auto; display: block; }
#brand .st { fill: none; stroke: currentColor; stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
#brand .pl { fill: var(--accent); }
#app { max-width: 640px; margin: 0 auto; min-height: 100vh; outline: none;
  padding: calc(var(--top-band) + 18px) 18px calc(var(--tabs-h) + var(--safe-b) + 32px);
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; }
body.notabs #app { padding-bottom: calc(var(--safe-b) + 28px); }
body.notabs .tabs { display: none; }

.boot { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--ink-2); font-size: 15px; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface-3); border-top-color: var(--ink);
  animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- значки ---------- */
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.ic .fill { fill: currentColor; stroke: none; }
.ic-lg { width: 28px; height: 28px; }

/* ---------- вкладки ---------- */
.tabs { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; background: var(--tabbar);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  border-top: 1px solid var(--line); padding: 6px 6px var(--safe-b);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tab { min-height: 58px; display: grid; justify-items: center; align-content: center; gap: 4px;
  color: var(--ink-2); font-size: 11.5px; font-weight: 500; letter-spacing: .02em; line-height: 1.1; position: relative; }
.tab .pillbg { width: 52px; height: 30px; border-radius: 15px; display: grid; place-items: center; transition: background .2s; }
.tab .ic { width: 24px; height: 24px; }
.tab.on { color: var(--ink); font-weight: 650; }
.tab.on .pillbg { background: var(--primary-soft); }
.tab .badge { position: absolute; top: 3px; left: calc(50% + 10px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger-fill); color: var(--on-danger); font-size: 11px; font-weight: 650; display: grid; place-items: center; }

/* ---------- заголовки экранов ---------- */
.page-h { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.page-h h1 { flex: 1; min-width: 0; }
.page-h .sub { margin-top: 4px; }
.back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 14px 0 4px; margin-left: -4px;
  border-radius: 999px; color: var(--ink-2); font-size: 15px; font-weight: 500; justify-self: start; }
.back .ic { width: 22px; height: 22px; }
.back:active { background: var(--surface-2); }
.eyebrow { font-size: 11.5px; font-weight: 650; color: var(--ink-2); letter-spacing: .14em; text-transform: uppercase; }
.sub { color: var(--ink-2); font-size: 15px; }
.lead { font-size: 17px; line-height: 1.6; color: var(--ink); }
.muted { color: var(--ink-2); }
.center { text-align: center; }
.stack { display: grid; gap: 12px; }
.stack-sm { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; }
.sec-h h2 { font-size: 24px; }

/* ---------- карточки ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px;
  box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.card.flat { box-shadow: none; }
.card.soft { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.card.green { background: var(--accent-soft); border-color: transparent; box-shadow: none; }
.card.amber { background: var(--warn-soft); border-color: transparent; box-shadow: none; }
.card-h { display: flex; align-items: center; gap: 12px; }
.card-h h2, .card-h h3 { flex: 1; min-width: 0; }
.card-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--ink);
  display: grid; place-items: center; flex: none; }
.card-ic .ic { width: 20px; height: 20px; }
.card-ic.amber { background: var(--warn-soft); color: var(--warn); }
.card-ic.red { background: var(--danger-soft); color: var(--danger); }
button.card { width: 100%; text-align: left; cursor: pointer; }
button.card:active, .tap:active { transform: scale(.99); }

/* ---------- кнопки ---------- */
.btn { min-height: 52px; padding: 12px 24px; border-radius: var(--r-btn); background: var(--primary); color: var(--on-primary);
  font-size: 16px; font-weight: 600; letter-spacing: .01em; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-align: center; text-decoration: none; transition: background .15s, transform .08s; }
.btn:active { background: var(--primary-press); transform: scale(.985); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.block { width: 100%; display: flex; }
.btn.big { min-height: 56px; font-size: 16.5px; }
.btn.secondary { background: var(--surface-2); color: var(--ink); }
.btn.secondary:active { background: var(--surface-3); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn.ghost:active { background: var(--surface-2); }
.btn.amber { background: var(--accent-fill); color: var(--on-accent); }
.btn.danger { background: var(--danger-fill); color: var(--on-danger); }
.btn.danger:active { filter: brightness(.92); }
.btn.on-red { background: #FFFFFF; color: #8F1A12; }
.btn.red-ghost { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .85); }
.btn.red-ghost:active { background: rgba(255, 255, 255, .12); }
.btn.on-red:active { background: #F3E3E1; }
.btn.amber:active { background: var(--accent-fill); filter: brightness(.94); }
.btn .ic { width: 20px; height: 20px; }
.btn.busy { position: relative; color: transparent !important; }
.btn.busy::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--on-primary) transparent var(--on-primary) transparent; animation: spin .8s linear infinite; }
.btn.secondary.busy::after, .btn.ghost.busy::after { border-color: var(--ink) transparent var(--ink) transparent; }
.btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.btn-row .btn { padding: 10px; font-size: 15px; gap: 8px; min-width: 0; }
.link-btn { min-height: 44px; padding: 0 4px; color: var(--ink); font-weight: 500; font-size: 15px;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px; text-underline-offset: 4px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); flex: none; }
.icon-btn:active { background: var(--surface-2); }
.icon-btn.labeled { width: auto; height: 40px; padding: 0 14px; border-radius: 999px; display: inline-flex; gap: 6px; font-size: 14px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--line); }
.icon-btn.labeled .ic { width: 18px; height: 18px; }
.icon-btn.del { color: var(--danger); }

/* сегменты (переключатели) */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-2); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { min-height: 44px; border-radius: 999px; font-weight: 500; font-size: 15px; color: var(--ink-2); text-align: center; padding: 6px 10px; }
.seg button.on { background: var(--surface); color: var(--ink); font-weight: 650;
  box-shadow: 0 1px 2px rgba(27, 26, 23, .08), 0 2px 8px rgba(27, 26, 23, .06); }
:root[data-theme="dark"] .seg button.on { background: var(--surface-3); box-shadow: none; }

/* чипы */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 11px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 550; white-space: nowrap; }
.chip .ic { width: 15px; height: 15px; }
.chip.ok, .lvbg-ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn, .lvbg-elevated { background: var(--warn-soft); color: var(--warn); }
.chip.high, .lvbg-high { background: var(--high-soft); color: var(--high); }
.chip.danger, .lvbg-low, .lvbg-very_high, .lvbg-crisis { background: var(--danger-soft); color: var(--danger); }
.chip.accent { background: var(--accent-soft); color: var(--accent); }
.chip.green { background: var(--accent-soft); color: var(--accent); }

/* цвета уровней (сахар, давление) */
.lv-ok { color: var(--ok); }
.lv-elevated { color: var(--warn); }
.lv-high { color: var(--high); }
.lv-low, .lv-very_high, .lv-crisis { color: var(--danger); }
.lv-none { color: var(--ink); }

/* ---------- «Сегодня» ---------- */
.hello { display: grid; gap: 4px; margin-top: 2px; }
.hello h1 { font-size: 36px; }
.week-card { display: flex; align-items: center; gap: 18px; }
.ring { position: relative; width: 96px; height: 96px; flex: none; }
.ring svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.ring .track { fill: none; stroke: var(--surface-3); stroke-width: 4; }
.ring .arc { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .5s; }
.ring-in { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.ring-in b { font: 500 40px/1 var(--serif); font-variant-numeric: lining-nums; }
.ring-in span { font-size: 10.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-top: 5px; }
.week-card .t { font: 600 26px/1.1 var(--serif); }
.week-card .theme { font-size: 16px; font-weight: 550; margin-top: 4px; }
.week-card .sub { margin-top: 6px; font-size: 14.5px; }

.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.num-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 14px 8px 12px; box-shadow: var(--shadow);
  display: grid; gap: 2px; align-content: start; justify-items: center; text-align: center; min-height: 112px; }
.num-tile .l1 { font-size: 10.5px; font-weight: 650; color: var(--ink-2); line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; }
.num-tile .v { font: 600 36px/1.05 var(--serif); white-space: nowrap; margin-top: 6px; font-variant-numeric: lining-nums; }
.num-tile .v small { font: 500 14px var(--font); }
.num-tile .l { font-size: 12.5px; font-weight: 500; color: var(--ink-2); line-height: 1.3; }
.num-tile .ic { width: 20px; height: 20px; color: var(--ink-2); }

.habits { display: grid; gap: 8px; }
.habit { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  border-radius: 16px; background: var(--surface-2); text-align: left; transition: background .2s; }
.habit .box { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center;
  flex: none; background: var(--surface); color: transparent; transition: background .2s, border-color .2s; }
.habit .box .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.habit .ht { font-size: 16px; font-weight: 500; line-height: 1.35; flex: 1; min-width: 0; }
.habit .hs { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-2); margin-top: 2px; }
.habit.done { background: var(--accent-soft); }
.habit.done .box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.habit.pop .box { animation: pop .3s ease-out; }
@keyframes pop { 50% { transform: scale(1.15); } }
.progress { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.progress i { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); border-radius: 2px; transition: width .4s; }

.measure-list { display: grid; gap: 8px; }
.mbtn { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px;
  background: var(--surface-2); text-align: left; }
.mbtn .mi { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); color: var(--ink); display: grid; place-items: center; flex: none; }
.mbtn .mi .ic { width: 20px; height: 20px; }
.mbtn .mt { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; line-height: 1.35; }
.mbtn .ms { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.mbtn .go { color: var(--ink-2); display: inline-flex; align-items: center; flex: none; }
.mbtn .plus { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; flex: none; }
.mbtn .plus .ic { width: 18px; height: 18px; stroke-width: 2; }
.mbtn.done .mi { background: var(--accent); color: var(--on-accent); }
.add-row { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px;
  border: 1px dashed var(--line-strong); color: var(--ink); font-weight: 500; font-size: 15px; }

.pause-banner { background: var(--warn-soft); color: var(--ink); border-radius: 16px; padding: 14px 16px; font-weight: 500; font-size: 15px; }

/* ---------- «Путь» ---------- */
.weeks { display: grid; gap: 8px; }
.wk { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 12px; border-radius: 20px; background: var(--surface);
  border: 1px solid var(--line); text-align: left; box-shadow: var(--shadow); }
.wk .n { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center;
  font: 600 22px/1 var(--serif); font-variant-numeric: lining-nums; flex: none; color: var(--ink); }
.wk .n .ic { width: 20px; height: 20px; }
.wk .b { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wk .b b { font-size: 16px; font-weight: 600; line-height: 1.3; }
.wk .b .sub { font-size: 14px; }
.wk .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wk .chev { color: var(--ink-2); }
.wk.cur { border-color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); }
.wk.cur .n { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.wk.read .n { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.wk.future .b b { color: var(--ink-2); font-weight: 550; }
.wk.ramadan .n { background: var(--warn-soft); border-color: transparent; color: var(--warn); }

.prose { font-size: 17px; line-height: 1.7; overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose h1 { font: 500 32px/1.1 var(--serif); margin: 24px 0 12px; }
.prose h2 { font: 600 26px/1.15 var(--serif); margin: 34px 0 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.prose h2:first-child { border-top: 0; padding-top: 0; }
.prose h3 { font: 650 17px/1.35 var(--font); margin: 22px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; }
.prose li { margin: 8px 0; padding-left: 4px; }
.prose li::marker { color: var(--accent); font-weight: 600; }
.prose strong, .prose b { font-weight: 650; }
.prose em { font-style: italic; }
.prose blockquote { margin: 0 0 18px; padding: 14px 18px; border-left: 2px solid var(--accent); background: var(--surface-2); border-radius: 0 14px 14px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { font-weight: 650; background: var(--surface-2); }
.prose a { color: var(--ink); font-weight: 550; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.read-done { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border-radius: var(--r-btn);
  background: var(--accent-soft); color: var(--accent); font-size: 16px; font-weight: 650; }

.ab { display: grid; gap: 12px; }
.arm { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--surface-2); }
.arm .ah { display: flex; align-items: center; gap: 12px; }
.arm .al { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 600 22px/1 var(--serif); flex: none; }
.arm.saved .al { background: var(--accent); color: var(--on-accent); }
.arm .inrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.arm .inrow .btn { min-width: 120px; }
.exp-res { display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: var(--accent-soft); }
.ba { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
.ba .v { font: 600 40px/1.05 var(--serif); font-variant-numeric: lining-nums; }
.ba .l { font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .08em; text-transform: uppercase; }
.ba .arrow { font-size: 22px; color: var(--ink-2); }
.diff { font-size: 17px; font-weight: 650; text-align: center; }

/* ---------- поля ---------- */
.field { display: grid; gap: 6px; }
.field > span, .field-l { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 13.5px; }
.input, textarea.input, select.input { width: 100%; min-height: 52px; border-radius: var(--r-field); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); padding: 12px 14px; font-size: 17px; line-height: 1.4; }
textarea.input { min-height: 110px; resize: vertical; }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--primary-soft); }
.input::placeholder { color: var(--ink-2); opacity: .7; }
input[type="date"].input, input[type="time"].input, input[type="datetime-local"].input { -webkit-appearance: none; appearance: none; min-height: 52px; }
.num-wrap { display: flex; align-items: center; gap: 10px; }
.num { flex: 1; min-width: 0; width: 100%; height: 80px; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 500 50px/1 var(--serif); font-variant-numeric: lining-nums; text-align: center; padding: 0 10px; }
.num:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--primary-soft); }
.num::placeholder { color: var(--ink-2); opacity: .32; }
.unit { font-size: 15px; font-weight: 500; color: var(--ink-2); min-width: 60px; }
.bp-wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; }
.bp-wrap label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-align: center; }
.bp-wrap .slash { font: 400 44px/1 var(--serif); padding-bottom: 16px; color: var(--line-strong); }
.err { color: var(--danger); font-weight: 600; font-size: 15px; }
.check { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 14px; border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 0; }
.check span { font-size: 16px; font-weight: 500; line-height: 1.35; }
.check small { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); font-size: 24px; font-weight: 400; display: grid; place-items: center; }
.stepper button:active { background: var(--surface-3); }
.stepper output { min-width: 48px; text-align: center; font: 600 32px/1 var(--serif); font-variant-numeric: lining-nums; }

/* ---------- нижний лист ---------- */
/* top/right/bottom/left вместо inset: старые iPhone (до iOS 14.5) inset не знают */
.sheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--backdrop); opacity: 0; transition: opacity .2s; }
.sheet-panel { position: relative; margin-bottom: var(--kb); max-height: calc(100% - var(--top-band) - 12px - var(--kb)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-radius: 28px 28px 0 0; padding: 10px 18px calc(22px + var(--safe-b));
  transform: translateY(105%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; }
.sheet.open .sheet-bg { opacity: 1; }
.sheet.open .sheet-panel { transform: none; }
.grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); justify-self: center; }
.sheet-h { display: flex; align-items: center; gap: 12px; }
.sheet-h h2 { flex: 1; min-width: 0; }
.opt-list { display: grid; gap: 8px; }
.opt { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px; background: var(--surface-2);
  font-size: 16px; font-weight: 500; text-align: left; }
.opt .ic { color: var(--ink); }
.opt small { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.opt.on { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ответ на замер */
.result { border-radius: 20px; padding: 18px; display: grid; gap: 10px; background: var(--surface-2); border-left: 3px solid var(--line-strong); }
.result .rv, .red-card .rv { font: 600 40px/1.05 var(--serif); font-variant-numeric: lining-nums; }
.result .rv small, .red-card .rv small { font: 500 15px var(--font); }
.result .rt { font-size: 16px; line-height: 1.6; }
.result .chip { background: var(--surface); }
.result.lvl-ok { background: var(--ok-soft); border-left-color: var(--ok-dot); }
.result.lvl-elevated { background: var(--warn-soft); border-left-color: var(--warn-dot); }
.result.lvl-high { background: var(--high-soft); border-left-color: var(--high-dot); }
.result.lvl-low, .result.lvl-very_high, .result.lvl-crisis { background: var(--danger-soft); border-left-color: var(--danger-dot); }
.red-card { background: var(--danger-fill); color: var(--on-danger); border-radius: 22px; padding: 20px; display: grid; gap: 14px; }
.red-card .ctx { font-size: 15px; font-weight: 650; }
.red-card .rt { font-size: 16px; line-height: 1.6; }
.red-card .call { min-height: 60px; font-size: 19px; font-weight: 700; }
.red-card .nums103 { font-size: 15px; font-weight: 550; text-align: center; }
.rule { border: 2px solid var(--danger-dot); }
.rule h1 { font-size: 28px; }
.rule h2 { font-size: 22px; }

/* ---------- графики ---------- */
.chart { width: 100%; display: block; overflow: visible; }
.chart .zone { fill: var(--zone); }
.chart .zline { stroke: var(--zone-line); stroke-width: 1; stroke-dasharray: 4 5; fill: none; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--ink-2); font-size: 12px; font-weight: 500; font-family: var(--font); }
.chart .ztext { fill: var(--accent); font-size: 11.5px; font-weight: 650; font-family: var(--font); }
.chart .ln { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.chart .ln.l2 { stroke: var(--line2); }
.chart .pt { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.chart .pt.l2 { fill: var(--line2); }
.chart .pt.lv-ok { fill: var(--ok-dot); }
.chart .pt.lv-elevated { fill: var(--warn-dot); }
.chart .pt.lv-high { fill: var(--high-dot); }
.chart .pt.lv-low, .chart .pt.lv-very_high { fill: var(--danger-dot); }
.chart-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.chart-sum .big { font: 600 36px/1.05 var(--serif); font-variant-numeric: lining-nums; }
.chart-sum .sub b { color: var(--ink); font-weight: 650; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); margin-right: 6px; vertical-align: 0; }
.legend i.l2 { background: var(--line2); }
.legend i.zone { border-radius: 3px; background: var(--zone); box-shadow: inset 0 0 0 1px var(--zone-line); }
.empty { padding: 20px; border-radius: 18px; background: var(--surface-2); color: var(--ink-2); font-size: 15px; text-align: center; }

/* записи дневника */
.day-h { font-size: 11.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 14px 0 0; }
.entries { display: grid; gap: 8px; }
.entry { display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); min-height: 60px; }
.entry .ei { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); flex: none; }
.entry .ei .ic { width: 18px; height: 18px; }
.entry .eb { flex: 1; min-width: 0; }
.entry .ev { font-size: 17px; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; }
.entry .es { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--line-strong); vertical-align: 1px; }
.dot.lv-ok { background: var(--ok-dot); } .dot.lv-elevated { background: var(--warn-dot); }
.dot.lv-high { background: var(--high-dot); } .dot.lv-low, .dot.lv-very_high, .dot.lv-crisis { background: var(--danger-dot); }

/* ---------- «Еда» ---------- */
.weeknav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.weeknav .icon-btn { background: var(--surface-2); width: 44px; height: 44px; }
.weeknav .icon-btn[disabled] { opacity: .3; }
.weeknav .wt { text-align: center; }
.weeknav .wt b { font: 600 22px/1.15 var(--serif); display: block; }
.weeknav .wt .sub { display: block; font-size: 13.5px; }
.card.pv { padding: 10px 12px; gap: 0; }
.card.pv .link-btn { justify-self: center; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dchip { min-height: 56px; border-radius: 16px; background: var(--surface-2); display: grid; place-content: center; text-align: center; line-height: 1.15; gap: 3px; padding: 4px 0; }
.dchip b { font: 600 20px/1 var(--serif); font-variant-numeric: lining-nums; }
.dchip span { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.dchip.on { background: var(--ink); color: var(--bg); }
.dchip.on span { color: var(--bg); opacity: .7; }
.dchip.today { box-shadow: inset 0 0 0 1px var(--ink); }
.meal { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); text-align: left; }
.meal .mi { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.meal .mi.amber { background: var(--warn-soft); color: var(--warn); }
.meal .mb { flex: 1; min-width: 0; display: grid; gap: 2px; }
.meal .mb .eyebrow { font-size: 10.5px; }
.meal .mb b { font-size: 16px; font-weight: 600; line-height: 1.35; }
.meal .chev { color: var(--ink-2); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 8px 6px 16px; border-radius: 16px; background: var(--surface-2); width: 100%; text-align: left; }
.toggle .tl { font-size: 16px; font-weight: 550; }
.toggle .tl small { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.sw { width: 50px; height: 30px; border-radius: 15px; background: var(--line-strong); position: relative; flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.toggle[aria-pressed="true"] .sw, .toggle[aria-checked="true"] .sw { background: var(--accent); }
.toggle[aria-pressed="true"] .sw::after, .toggle[aria-checked="true"] .sw::after { transform: translateX(20px); }

.ings { display: grid; gap: 0; }
.ing { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ing:last-child { border-bottom: 0; }
.ing .in { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; }
.ing .in small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.ing .iq { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.steps-list { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 16px; }
.steps-list li { counter-increment: st; display: grid; grid-template-columns: 34px 1fr; gap: 12px; font-size: 16px; line-height: 1.6; }
.steps-list li::before { content: counter(st); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink);
  display: grid; place-items: center; font: 600 19px/1 var(--serif); }
.callout { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; padding: 16px; border-radius: 18px; background: var(--surface-2); }
.callout .ic { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.callout b { display: block; font-size: 15px; font-weight: 650; }
.callout p { font-size: 15px; }
.callout.amber { background: var(--warn-soft); }
.callout.amber .ic { color: var(--warn); }

.cat-h { font: 600 22px/1.2 var(--serif); margin: 12px 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cat-h span { font: 500 13px var(--font); color: var(--ink-2); }
.buy { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: left; }
.buy .box { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex: none; color: transparent; background: var(--surface); }
.buy .box .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.buy .bn { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; line-height: 1.35; }
.buy .bn small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.buy .bq { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.buy.got { background: var(--surface-2); border-color: transparent; }
.buy.got .box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.buy.got .bn, .buy.got .bq { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--ink-2); }
.buy-list { display: grid; gap: 8px; }

/* ---------- «Ещё» ---------- */
.menu { display: grid; gap: 8px; }
.mrow { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 12px; border-radius: 20px; background: var(--surface);
  border: 1px solid var(--line); text-align: left; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.mrow .mi { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); flex: none; }
.mrow .mi .ic { width: 20px; height: 20px; }
.mrow .mi.red { background: var(--danger-soft); color: var(--danger); }
.mrow .mi.amber { background: var(--accent-soft); color: var(--accent); }
.mrow .mb { flex: 1; min-width: 0; }
.mrow .mb b { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.mrow .mb span { display: block; font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.mrow .chev { color: var(--ink-2); }

.lab { display: grid; gap: 6px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.lab .lt { display: flex; align-items: flex-start; gap: 10px; }
.lab .lt b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.lab .lv { font: 600 28px/1.1 var(--serif); font-variant-numeric: lining-nums; }
.lab .lv small { font: 500 13px var(--font); color: var(--ink-2); }
.due { display: grid; gap: 6px; margin: 0; padding-left: 22px; }
.due li { font-size: 15px; }

.qa { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.qa .qt { font-size: 16px; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.qa .ans { padding: 14px 16px; border-radius: 16px; background: var(--accent-soft); font-size: 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.qa .ans b.who { display: block; color: var(--accent); margin-bottom: 4px; font-size: 10.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.qa .wait { color: var(--ink-2); font-weight: 500; font-size: 14px; }

/* отчёт врачу: чистая страница для экрана */
.report { background: #FFFFFF; color: #111111; border-radius: 18px; padding: 22px 18px; display: grid; gap: 16px; border: 1px solid #D9D6CF; }
:root[data-theme="dark"] .report { background: #FFFFFF; color: #111111; }
.report h1 { font-size: 30px; }
.report .rp-sub { font-size: 15px; color: #333333; }
.report .rp-rows { display: grid; }
.report .rp-row { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid #E2DFD8; }
.report .rp-row:last-child { border-bottom: 0; }
.report .rp-k { font-size: 11.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #555555; }
.report .rp-v { font-size: 16px; line-height: 1.5; color: #111111; }
.report .rp-v b { font: 600 24px/1.2 var(--serif); font-variant-numeric: lining-nums; }
.report .rp-n { font-size: 14px; color: #333333; }
.report .rp-l { font-size: 15px; font-weight: 600; color: #333333; }
.report .rp-flag { font-size: 14px; font-weight: 650; color: #85571A; }
.report .rp-h { font: 600 22px/1.2 var(--serif); margin-top: 6px; }
.report .note { font-size: 14px; color: #333333; }
.report .chart .ax { fill: #333333; }
.report .chart .grid { stroke: #E2DFD8; }
.report .chart .zone { fill: rgba(47, 107, 78, .12); }
.report .chart .ln { stroke: #1B1A17; }
.report .chart .pt { stroke: #FFFFFF; }
.report .chart .ztext { fill: #2F6B4E; }

/* ---------- «Ведущей» ---------- */
.q-item { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.q-item .qh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.q-item .qh b { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; }
.q-item .qtext { font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.q-item.alert { background: var(--danger-soft); border: 1px solid var(--danger-dot); }
.q-item.alert .qh b { color: var(--danger); }
.q-item .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.q-item .acts .btn { flex: 1 1 140px; }
.urow { width: 100%; display: grid; gap: 8px; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); text-align: left; box-shadow: var(--shadow); }
.urow .un { display: flex; align-items: center; gap: 10px; }
.urow .un b { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; }
.hgrid { display: grid; gap: 10px; }
.hgrid .hr { display: grid; gap: 4px; }
.hgrid .hr span { font-size: 13px; font-weight: 500; }
.hgrid .cells { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); gap: 2px; }
.hgrid .cells i { display: block; height: 0; padding-bottom: 100%; border-radius: 3px; background: var(--surface-3); }
.hgrid .cells i.on { background: var(--accent); }
.hgrid .cells i.mon { box-shadow: inset 2px 0 0 var(--ink-2); }
.kv { display: grid; grid-template-columns: minmax(0, 42%) 1fr; gap: 8px 12px; font-size: 15px; }
.kv dt { color: var(--ink-2); font-weight: 500; }
.kv dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.note-item { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-item .es { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* ---------- экран-сообщение ---------- */
.msg { min-height: 72vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 16px; padding: 0 8px; }
.msg .art { width: 88px; height: 88px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; }
.msg .art .ic { width: 38px; height: 38px; stroke-width: 1.4; }
.msg h1 { font-size: 32px; }
.msg p { font-size: 16px; color: var(--ink-2); max-width: 380px; }
.msg .btn { min-width: 240px; }

/* ---------- мелочи ---------- */
.boot.small { min-height: 160px; }
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.chart { height: auto; }
.done-box { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 8px 0 4px; }
.done-box .art { width: 68px; height: 68px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.done-box .art .ic { width: 32px; height: 32px; stroke-width: 2; }
.done-box p { font-size: 16px; color: var(--ink-2); }
.check .card-ic { width: 36px; height: 36px; }
.check .card-ic .ic { width: 18px; height: 18px; }
.opt > span { flex: 1; min-width: 0; }
.opt > .ic:last-child:not(:first-child) { color: var(--accent); }
.link-btn .ic { width: 20px; height: 20px; }
.save-bar { position: sticky; z-index: 5; bottom: calc(var(--tabs-h) + var(--safe-b) + 10px); box-shadow: 0 8px 24px rgba(27, 26, 23, .16); }
.flag-line { display: flex; align-items: flex-start; gap: 8px; color: var(--warn); font-weight: 600; font-size: 14.5px; }
.flag-line .ic { width: 18px; height: 18px; margin-top: 2px; }
.sheet-panel .prose { font-size: 16px; }
.sheet-panel .prose h2 { font-size: 22px; }

/* ---------- тост ---------- */
.toast { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabs-h) + var(--safe-b) + 14px);
  max-width: calc(100% - 32px); width: max-content; background: var(--toast-bg); color: var(--toast-ink); border-radius: 999px;
  padding: 12px 20px; font-size: 15px; font-weight: 550; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); text-align: center; }
body.notabs .toast, body.sheet-open .toast { bottom: calc(var(--safe-b) + var(--kb) + 18px); }
.toast.err { background: var(--danger-fill); color: var(--on-danger); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (min-width: 700px) {
  .tabs { left: 50%; right: auto; width: 640px; transform: translateX(-50%); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; }
}

/* =================================================================================================================
   Вид для слабовидящих: крупный шрифт без засечек, жирнее, чёрное на белом (белое на чёрном), толще линии.
   Включается в «Ещё» → «Крупный шрифт» (data-a11y="on" на <html>, ставит theme.js до первой отрисовки).
   ================================================================================================================= */
:root[data-a11y="on"] {
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: var(--font);
  --r-btn: 14px;
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F0F0F0; --surface-3: #DADADA;
  --ink: #000000; --ink-2: #333333; --line: #C4C4C4; --line-strong: #5E5E5E;
  --primary: #000000; --primary-press: #000000; --primary-ink: #000000; --primary-soft: #E8E8E8; --on-primary: #FFFFFF;
  --accent: #0D5A37; --accent-fill: #0D5A37; --accent-soft: #DDEFE4; --on-accent: #FFFFFF;
  --ok: #0D5A37; --warn: #6E4300; --high: #8E2F06; --danger: #9B1B12;
  --shadow: none; --tabbar: #FFFFFF;
}
:root[data-a11y="on"][data-theme="dark"] {
  --bg: #000000; --surface: #0E0E0E; --surface-2: #1C1C1C; --surface-3: #303030;
  --ink: #FFFFFF; --ink-2: #E2E2E2; --line: #4F4F4F; --line-strong: #B5B5B5;
  --primary: #FFFFFF; --primary-press: #FFFFFF; --primary-ink: #FFFFFF; --primary-soft: #262626; --on-primary: #000000;
  --accent: #86E3B3; --accent-fill: #86E3B3; --accent-soft: #10291C; --on-accent: #00140A;
  --ok: #86E3B3; --warn: #FFD27A; --high: #FFAA80; --danger: #FF9C94;
  --tabbar: #000000;
}
:root[data-a11y="on"] body { font-size: 19px; line-height: 1.5; }
:root[data-a11y="on"] .ic { stroke-width: 2.2; }
:root[data-a11y="on"] h1 { font: 800 30px/1.15 var(--font); letter-spacing: -.01em; }
:root[data-a11y="on"] h2, :root[data-a11y="on"] .sec-h h2 { font: 750 23px/1.2 var(--font); }
:root[data-a11y="on"] h3 { font-size: 20px; font-weight: 700; }
:root[data-a11y="on"] .hello h1 { font-size: 30px; }
:root[data-a11y="on"] .eyebrow, :root[data-a11y="on"] .num-tile .l1, :root[data-a11y="on"] .day-h, :root[data-a11y="on"] .ring-in span,
:root[data-a11y="on"] .dchip span, :root[data-a11y="on"] .ba .l, :root[data-a11y="on"] .qa .ans b.who, :root[data-a11y="on"] .report .rp-k {
  font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
:root[data-a11y="on"] .sub, :root[data-a11y="on"] .muted { font-size: 17px; color: var(--ink-2); }
:root[data-a11y="on"] .btn { min-height: 60px; font-size: 20px; font-weight: 700; }
:root[data-a11y="on"] .btn.big { min-height: 64px; font-size: 21px; }
:root[data-a11y="on"] .btn.ghost { border-width: 2px; }
:root[data-a11y="on"] .link-btn { font-size: 18px; font-weight: 700; text-decoration-color: currentColor; text-decoration-thickness: 2px; }
:root[data-a11y="on"] .back { font-size: 19px; font-weight: 700; color: var(--ink); }
:root[data-a11y="on"] .tab { font-size: 14px; font-weight: 650; color: var(--ink-2); }
:root[data-a11y="on"] .tab.on { font-weight: 800; color: var(--ink); }
:root[data-a11y="on"] .tab .ic { width: 30px; height: 30px; }
:root[data-a11y="on"] .tab .pillbg { width: 60px; height: 36px; border-radius: 18px; }
:root[data-a11y="on"] .card { border-width: 2px; }
:root[data-a11y="on"] .chip { font-size: 16px; font-weight: 700; min-height: 34px; }
:root[data-a11y="on"] .habit .ht, :root[data-a11y="on"] .mbtn .mt, :root[data-a11y="on"] .opt, :root[data-a11y="on"] .check span,
:root[data-a11y="on"] .buy .bn, :root[data-a11y="on"] .ing .in, :root[data-a11y="on"] .mrow .mb b, :root[data-a11y="on"] .meal .mb b,
:root[data-a11y="on"] .toggle .tl, :root[data-a11y="on"] .wk .b b, :root[data-a11y="on"] .q-item .qh b, :root[data-a11y="on"] .urow .un b,
:root[data-a11y="on"] .qa .qt, :root[data-a11y="on"] .lab .lt b { font-size: 20px; font-weight: 700; }
:root[data-a11y="on"] .habit .hs, :root[data-a11y="on"] .mbtn .ms, :root[data-a11y="on"] .opt small, :root[data-a11y="on"] .check small,
:root[data-a11y="on"] .buy .bn small, :root[data-a11y="on"] .ing .in small, :root[data-a11y="on"] .mrow .mb span, :root[data-a11y="on"] .toggle .tl small,
:root[data-a11y="on"] .wk .b .sub, :root[data-a11y="on"] .entry .es, :root[data-a11y="on"] .num-tile .l { font-size: 17px; font-weight: 500; color: var(--ink-2); }
:root[data-a11y="on"] .habit .box { width: 38px; height: 38px; border-width: 3px; }
:root[data-a11y="on"] .habit .box .ic, :root[data-a11y="on"] .buy .box .ic { width: 24px; height: 24px; stroke-width: 3; }
:root[data-a11y="on"] .buy .box { width: 34px; height: 34px; border-width: 3px; }
:root[data-a11y="on"] .num-tile .v, :root[data-a11y="on"] .ring-in b, :root[data-a11y="on"] .ba .v, :root[data-a11y="on"] .result .rv,
:root[data-a11y="on"] .red-card .rv, :root[data-a11y="on"] .chart-sum .big, :root[data-a11y="on"] .lab .lv, :root[data-a11y="on"] .wk .n,
:root[data-a11y="on"] .dchip b, :root[data-a11y="on"] .stepper output, :root[data-a11y="on"] .num, :root[data-a11y="on"] .week-card .t,
:root[data-a11y="on"] .weeknav .wt b, :root[data-a11y="on"] .cat-h, :root[data-a11y="on"] .arm .al, :root[data-a11y="on"] .steps-list li::before,
:root[data-a11y="on"] .report .rp-v b, :root[data-a11y="on"] .report .rp-h { font-family: var(--font); font-weight: 800; letter-spacing: -.01em; }
:root[data-a11y="on"] .num-tile .v { font-size: 32px; }
:root[data-a11y="on"] .ring-in b { font-size: 36px; }
:root[data-a11y="on"] .num { font-size: 44px; border-width: 3px; }
:root[data-a11y="on"] .ring .track, :root[data-a11y="on"] .ring .arc { stroke-width: 10; }
:root[data-a11y="on"] .progress { height: 10px; border-radius: 5px; }
:root[data-a11y="on"] .input { font-size: 20px; border-width: 2px; }
:root[data-a11y="on"] .field > span, :root[data-a11y="on"] .field-l, :root[data-a11y="on"] .bp-wrap label { font-size: 18px; font-weight: 700; color: var(--ink); }
:root[data-a11y="on"] .prose { font-size: 20px; line-height: 1.6; }
:root[data-a11y="on"] .prose h1 { font: 800 28px/1.2 var(--font); }
:root[data-a11y="on"] .prose h2 { font: 800 25px/1.25 var(--font); }
:root[data-a11y="on"] .prose h3 { font-size: 21px; font-weight: 750; }
:root[data-a11y="on"] .prose strong, :root[data-a11y="on"] .prose b { font-weight: 800; }
:root[data-a11y="on"] .result .rt, :root[data-a11y="on"] .red-card .rt, :root[data-a11y="on"] .qa .ans, :root[data-a11y="on"] .callout p,
:root[data-a11y="on"] .steps-list li, :root[data-a11y="on"] .msg p { font-size: 19px; }
:root[data-a11y="on"] .entry .ev { font-size: 20px; font-weight: 800; }
:root[data-a11y="on"] .toast { font-size: 18px; font-weight: 700; border-radius: 16px; }
:root[data-a11y="on"] .chart .ax { font-size: 14px; font-weight: 700; }
:root[data-a11y="on"] .chart .ln { stroke-width: 3; }
:root[data-a11y="on"] .legend { font-size: 16px; font-weight: 700; }
:root[data-a11y="on"] .wk.cur { border-width: 3px; }
:root[data-a11y="on"] .opt.on { box-shadow: inset 0 0 0 3px var(--ink); }