/* ProFit · дизайн-система «белый + графит» (утверждена владельцем 14.10.2026)
   Основа: воздух и карточки Crouton, графит и кнопки Буше, графики Альфы.
   Всё с префиксом ds-/--ds-, чтобы не пересекаться со старым styles.css (тёмная тема).
   Новый экран = контейнер с классом .ds. Иконки: /ds/icons.svg, класс .ds-ic. */

@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/onest-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/onest-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{
  /* цвет: один графит, остальное — серые и полупрозрачные */
  --ds-bg:#ffffff;
  --ds-surf:#f4f4f5;            /* карточки, плашки */
  --ds-surf2:#ebebed;           /* нажатая карточка, трек прогресса */
  --ds-graph:#2a2a2d;           /* графит: кнопки, меню, акцент */
  --ds-graph-press:#3a3a3e;
  --ds-ink:#18181a;             /* основной текст */
  --ds-muted:#6b6b70;           /* вторичный текст (контраст ≥4.5:1 на белом и карточках) */
  --ds-faint:#c9c9cd;           /* бледные столбики, неактивное */
  --ds-line:#e8e8ea;            /* разделители */
  --ds-tint:rgba(42,42,45,.07); /* подложка иконок, вторичная кнопка */
  --ds-tint2:rgba(42,42,45,.12);
  --ds-on-graph:#ffffff;
  --ds-on-graph-muted:#a9a9ad;
  --ds-danger:#c4372d;          /* только для ошибок; в оформлении не используется */

  /* шрифт */
  --ds-font:"Onest",-apple-system,"Segoe UI",Roboto,sans-serif;
  --ds-t-title:600 32px/1.05 var(--ds-font);   /* заголовок экрана, строчными */
  --ds-t-h2:600 22px/1.2 var(--ds-font);
  --ds-t-h3:600 17px/1.3 var(--ds-font);
  --ds-t-body:400 15px/1.45 var(--ds-font);
  --ds-t-body-m:500 15px/1.45 var(--ds-font);
  --ds-t-small:400 13px/1.4 var(--ds-font);
  --ds-t-cap:500 11px/1.3 var(--ds-font);
  --ds-t-num:600 30px/1.1 var(--ds-font);     /* крупные цифры: ккал, кг */

  /* размеры */
  --ds-gutter:20px;
  --ds-gap:14px;
  --ds-r-card:22px;
  --ds-r-tile:14px;
  --ds-r-pill:999px;
  --ds-btn-h:54px;
  --ds-tab-h:66px;
}

/* контейнер нового экрана. «only light» — запрет Android force-dark поверх белой темы */
.ds{color-scheme:only light;background:var(--ds-bg);color:var(--ds-ink);font:var(--ds-t-body);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.ds *,.ds *::before,.ds *::after{box-sizing:border-box}
.ds button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ds :focus-visible{outline:2px solid var(--ds-graph);outline-offset:2px}

/* ---------- текст ---------- */
.ds-title{font:var(--ds-t-title);letter-spacing:-.03em;text-transform:lowercase;margin:0;text-wrap:balance}
.ds-h2{font:var(--ds-t-h2);letter-spacing:-.02em;margin:0}
.ds-h3{font:var(--ds-t-h3);margin:0}
.ds-sub,.ds-small{font:var(--ds-t-small);color:var(--ds-muted)}
.ds-cap{font:var(--ds-t-cap);color:var(--ds-muted)}
.ds-num{font:var(--ds-t-num);letter-spacing:-.03em}
.ds-num small{font:var(--ds-t-body);color:var(--ds-muted);letter-spacing:0}

/* ---------- иконки ---------- */
.ds-ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ds-ic.sm{width:18px;height:18px}
.ds-ic.lg{width:28px;height:28px}
.ds-icb{width:40px;height:40px;border-radius:var(--ds-r-tile);background:var(--ds-tint);color:var(--ds-graph);display:grid;place-items:center;flex:none}

/* ---------- раскладка экрана ---------- */
.ds-screen{min-height:100%;padding:12px var(--ds-gutter) calc(var(--ds-tab-h) + 40px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:var(--ds-gap)}
.ds-screen>*{flex:none}
.ds-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.ds-head .ds-sub{margin-top:6px}
.ds-round{width:40px;height:40px;border-radius:50%;border:0;background:var(--ds-surf);color:var(--ds-ink);display:grid;place-items:center;flex:none;font:var(--ds-t-body-m)}

/* ---------- кнопки ---------- */
.ds-btn{height:var(--ds-btn-h);width:100%;border:0;border-radius:var(--ds-r-pill);background:var(--ds-graph);color:var(--ds-on-graph);
  font:600 16px/1 var(--ds-font);display:flex;align-items:center;justify-content:center;gap:10px;padding:0 24px;transition:transform .1s,background .15s}
.ds-btn:active{transform:scale(.98);background:var(--ds-graph-press)}
.ds-btn[disabled]{background:var(--ds-faint);cursor:default;transform:none}
.ds-btn.sec{background:var(--ds-tint);color:var(--ds-ink);font-weight:500;height:50px}
.ds-btn.sec:active{background:var(--ds-tint2)}
.ds-btn.ghost{background:none;color:var(--ds-muted);font-weight:500;height:44px}
.ds-btn.auto{width:auto}
.ds-fab{width:32px;height:32px;border-radius:50%;border:0;background:var(--ds-graph);color:var(--ds-on-graph);display:grid;place-items:center;flex:none}

/* ---------- карточки и списки ---------- */
.ds-card{background:var(--ds-surf);border-radius:var(--ds-r-card);padding:16px}
.ds-card.list{padding:4px 16px}
.ds-card.dark{background:var(--ds-graph);color:var(--ds-on-graph)}
.ds-card.dark .ds-sub{color:var(--ds-on-graph-muted)}
.ds-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--ds-line);min-width:0}
.ds-row:first-child{border-top:0}
.ds-row .main{flex:1;min-width:0}
.ds-row .name{font:var(--ds-t-body-m)}
.ds-row .desc{font:var(--ds-t-small);color:var(--ds-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-row .val{font:var(--ds-t-body-m)}
.ds-row .go{color:var(--ds-faint)}
.ds-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- метки ---------- */
.ds-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--ds-r-pill);background:var(--ds-bg);border:1px solid var(--ds-line);font:var(--ds-t-small);color:var(--ds-muted);white-space:nowrap}
.ds-chip.on{background:var(--ds-graph);border-color:var(--ds-graph);color:var(--ds-on-graph)}
.ds-badge{display:inline-block;padding:5px 12px;border-radius:var(--ds-r-pill);background:rgba(255,255,255,.14);font:var(--ds-t-small)}

/* ---------- поля ---------- */
.ds-field{display:flex;flex-direction:column;gap:6px}
.ds-field label{font:var(--ds-t-small);color:var(--ds-muted)}
.ds-input{height:52px;border-radius:var(--ds-r-tile);border:1px solid transparent;background:var(--ds-surf);padding:0 16px;font:var(--ds-t-body);color:var(--ds-ink);width:100%;outline:none}
.ds-input::placeholder{color:var(--ds-faint)}
.ds-input:focus{border-color:var(--ds-graph);background:var(--ds-bg)}
.ds-field.err .ds-input{border-color:var(--ds-danger)}
.ds-field .hint{font:var(--ds-t-small);color:var(--ds-muted)}
.ds-field.err .hint{color:var(--ds-danger)}
.ds-unit{position:relative}
.ds-unit .ds-input{padding-right:52px;font:var(--ds-t-h3)}
.ds-unit span{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--ds-muted)}

/* выбор вариантов (анкета): плитки */
.ds-choice{display:flex;flex-direction:column;gap:10px}
.ds-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border-radius:18px;border:1.5px solid transparent;background:var(--ds-surf);color:var(--ds-ink);font:var(--ds-t-body-m)}
.ds-opt .ds-sub{display:block;font-weight:400}
.ds-opt[aria-pressed="true"]{border-color:var(--ds-graph);background:var(--ds-bg)}
.ds-opt .mark{margin-left:auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ds-faint);display:grid;place-items:center;flex:none;color:transparent}
.ds-opt[aria-pressed="true"] .mark{background:var(--ds-graph);border-color:var(--ds-graph);color:var(--ds-on-graph)}

/* переключатель вкладок */
.ds-seg{display:flex;background:var(--ds-surf);border-radius:var(--ds-r-tile);padding:3px}
.ds-seg button{flex:1;border:0;background:none;font:var(--ds-t-small);padding:8px 0;border-radius:11px;color:var(--ds-muted)}
.ds-seg button[aria-selected="true"]{background:var(--ds-bg);color:var(--ds-ink);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* тумблер */
.ds-switch{appearance:none;-webkit-appearance:none;width:48px;height:30px;border-radius:15px;background:var(--ds-faint);position:relative;transition:background .2s;flex:none;margin:0}
.ds-switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.ds-switch:checked{background:var(--ds-graph)}
.ds-switch:checked::after{transform:translateX(18px)}

/* шаги анкеты */
.ds-steps{display:flex;gap:6px}
.ds-steps i{flex:1;height:4px;border-radius:2px;background:var(--ds-surf2)}
.ds-steps i.done{background:var(--ds-graph)}

/* ---------- прогресс ---------- */
.ds-bar{height:6px;border-radius:3px;background:var(--ds-surf2);overflow:hidden}
.ds-bar i{display:block;height:100%;border-radius:3px;background:var(--ds-graph)}
.ds-ring{--p:0;--size:116px;--w:10px;width:var(--size);height:var(--size);border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--ds-graph) calc(var(--p)*1%),var(--ds-surf2) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--w)),#000 calc(100% - var(--w) + .5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--w)),#000 calc(100% - var(--w) + .5px))}
.ds-ringbox{position:relative;display:grid;place-items:center;flex:none}
.ds-ringbox .in{position:absolute;text-align:center;line-height:1.1}

/* столбики в стиле Альфы: значение над столбиком, подпись под ним, текущий — графит */
.ds-bars{display:flex;align-items:flex-end;gap:8px;height:170px}
.ds-bars .c{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.ds-bars .v{font:var(--ds-t-cap);color:var(--ds-muted)}
.ds-bars .b{width:100%;border-radius:8px;background:var(--ds-faint);min-height:4px}
.ds-bars .w{font:var(--ds-t-cap);color:var(--ds-muted);white-space:nowrap}
.ds-bars .c.on .b{background:var(--ds-graph)}
.ds-bars .c.on .v{color:var(--ds-ink);font-weight:600}

/* ---------- нижнее меню ---------- */
.ds-tab{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));height:var(--ds-tab-h);background:var(--ds-graph);border-radius:var(--ds-r-pill);
  display:flex;justify-content:space-around;align-items:center;padding:0 8px;z-index:50;max-width:520px;margin:0 auto}
.ds-tab button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:60px;height:52px;border-radius:26px;font:500 10px/1 var(--ds-font);color:var(--ds-on-graph-muted)}
.ds-tab button[aria-current="page"]{background:var(--ds-bg);color:var(--ds-graph)}

/* ---------- чат ---------- */
.ds-msgs{display:flex;flex-direction:column;gap:8px}
.ds-msg{max-width:82%;padding:10px 14px;border-radius:20px;font:var(--ds-t-body)}
.ds-msg.in{background:var(--ds-surf);border-bottom-left-radius:6px;align-self:flex-start}
.ds-msg.out{background:var(--ds-graph);color:var(--ds-on-graph);align-self:flex-end;border-bottom-right-radius:6px}
.ds-msg time{display:block;font:var(--ds-t-cap);opacity:.55;margin-top:3px;text-align:right}

/* ---------- всплывашка и пустое состояние ---------- */
.ds-toast{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--ds-r-pill);background:var(--ds-graph);color:var(--ds-on-graph);font:var(--ds-t-body-m);box-shadow:0 8px 24px -8px rgba(0,0,0,.35)}
.ds-empty{text-align:center;padding:28px 16px;display:flex;flex-direction:column;align-items:center;gap:8px}
.ds-empty .ds-icb{width:56px;height:56px;border-radius:18px}

/* скелет загрузки */
.ds-skel{background:linear-gradient(90deg,var(--ds-surf) 0,var(--ds-surf2) 50%,var(--ds-surf) 100%);background-size:200% 100%;animation:ds-sh 1.2s linear infinite;border-radius:12px}
@keyframes ds-sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.ds-skel{animation:none}.ds-btn,.ds-switch,.ds-switch::after{transition:none}}