/* Тема на здравния апп — health.rusev.bg
   Палитрата и шрифтовете идват от документите „Профил — добавки и
   статистики" и „Хранителен режим", за да изглеждат като едно нещо.

   Правилото на подредбата: калориите движат теглото, затова са водещият
   елемент. Протеинът е условие — важен, но втори. Въглехидратите и
   мазнините са за справка и стоят най-тихо. */
:root{
  --paper:#EDF0EA; --card:#F8FAF6; --ink:#131C18; --soft:#55635A;
  --pine:#2C6A57; --deep:#1C463A; --ochre:#B8851C; --brick:#9B4534;
  --line:#CFD9C9; --hair:#E1E8DD;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --disp:'Unbounded',system-ui,sans-serif;
  --shadow:0 1px 2px rgba(19,28,24,.04), 0 4px 16px rgba(19,28,24,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);
  font-family:'Golos Text',system-ui,sans-serif;font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;padding-bottom:48px}
.wrap{max-width:520px;margin:0 auto;padding:0 16px}

/* ── навигация ── */
.tabs{display:flex;background:var(--deep);position:sticky;top:0;z-index:20;
  padding-top:env(safe-area-inset-top);box-shadow:0 1px 12px rgba(19,28,24,.18)}
.tabs a{flex:1;text-align:center;padding:14px 6px 12px;color:#8FB3A2;
  text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.01em;
  border-bottom:2px solid transparent;transition:color .15s}
.tabs a.on{color:#fff;border-bottom-color:var(--ochre)}

/* ── герой ── */
.hero{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 18px 22px;margin-top:18px;text-align:center;box-shadow:var(--shadow)}
.hero-nav{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:6px}
.hero-nav a{color:var(--pine);text-decoration:none;font-size:30px;line-height:1;
  padding:0 8px;opacity:.5}
.hero-nav a:active{opacity:1}
.spacer{width:30px}
.eyebrow-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pine)}
.hero h1{font-family:var(--disp);font-weight:700;font-size:26px;
  letter-spacing:-.03em;line-height:1.1;margin-top:2px}
.ring{width:210px;height:210px;margin:2px auto -4px;display:block}

.hero-protein{margin-top:10px}
.hero-protein .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);margin-bottom:5px}
.meter{display:flex;align-items:center;gap:10px}
.meter-bar{flex:1;height:9px;border-radius:5px;background:var(--hair);
  overflow:hidden}
.meter-bar i{display:block;height:100%;border-radius:5px;transition:width .3s}
.meter-n{font-family:var(--mono);font-size:12px;color:var(--soft);
  white-space:nowrap}
.meter-n b{color:var(--deep);font-size:14px}

.hero-macros{display:flex;justify-content:center;gap:16px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--hair);flex-wrap:wrap}
.hero-macros span{font-size:12px;color:var(--soft)}
.hero-macros b{font-family:var(--mono);font-size:14px;color:var(--ink);
  font-weight:600}

/* ── лента от Health ── */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  gap:8px;margin-top:12px}
.s{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 10px;text-align:center}
.s-v{font-family:var(--mono);font-size:21px;font-weight:600;color:var(--deep);
  line-height:1.1}
.s-v i{font-size:11px;font-style:normal;color:var(--soft);margin-left:1px}
.s-k{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soft);margin-top:3px}
.s-x{font-size:11px;color:var(--pine);margin-top:3px}

/* ── секции ── */
section{margin-top:26px}
.head{display:flex;align-items:baseline;gap:10px;margin-bottom:11px}
.head h2{font-family:var(--disp);font-weight:500;font-size:15px;
  letter-spacing:-.01em}
.note{font-size:11.5px;color:var(--soft);margin-left:auto;font-family:var(--mono)}

/* ── времева лента с храненията ── */
.timeline{display:flex;flex-direction:column;gap:10px}
.tl-slot{background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden}
.tl-head{display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 13px;background:rgba(44,106,87,.055);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pine)}
.tl-head span{font-size:10px;color:var(--soft);letter-spacing:.02em;
  text-transform:none}
.tl-row{display:grid;grid-template-columns:42px 1fr auto;gap:10px;
  padding:11px 13px;border-top:1px solid var(--hair);align-items:start}
.tl-time{font-family:var(--mono);font-size:11px;color:var(--soft);padding-top:2px}
.tl-name{font-size:14.5px;line-height:1.3}
.tl-name .q{font-family:var(--mono);font-size:11px;color:var(--soft);
  margin-left:6px}
.said{font-size:12px;color:var(--soft);font-style:italic;margin-top:3px;
  padding-left:8px;border-left:2px solid var(--hair)}
.tl-nums{text-align:right;font-family:var(--mono);white-space:nowrap}
.tl-nums b{display:block;font-size:14px;color:var(--deep);font-weight:600}
.tl-nums span{font-size:11px;color:var(--soft)}

.blank{background:var(--card);border:1px dashed var(--line);border-radius:12px;
  padding:26px 16px;text-align:center}
.blank p{font-size:14px}
.blank .soft{color:var(--soft);font-size:12.5px;margin-top:5px}

/* ── план ── */
.day{background:var(--card);border:1px solid var(--line);border-radius:12px;
  margin-bottom:10px;overflow:hidden}
.day .head{padding:11px 13px 9px;margin:0;border-bottom:1px solid var(--hair)}
.day.today{border-color:var(--pine);box-shadow:var(--shadow)}
.badge{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ochre);margin-left:5px}
.row{display:flex;justify-content:space-between;gap:12px;padding:10px 13px;
  border-top:1px solid var(--hair);font-size:14px}
.row .t{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pine);margin-right:6px}
.row .nums{font-family:var(--mono);font-size:12px;color:var(--deep);
  white-space:nowrap}
.checks{list-style:none;padding:9px 13px 11px;border-top:1px solid var(--hair);
  background:rgba(184,133,28,.05)}
.checks li{font-size:12.5px;color:var(--soft);padding:2px 0 2px 15px;
  position:relative}
.checks li::before{content:"";position:absolute;left:2px;top:8px;width:6px;
  height:6px;background:var(--ochre);border-radius:50%}

/* ── история ── */
.switch{display:flex;gap:6px;margin-top:12px;justify-content:center}
.switch a{font-family:var(--mono);font-size:11px;padding:6px 14px;
  border:1px solid var(--line);background:var(--card);color:var(--soft);
  text-decoration:none;border-radius:20px}
.switch a.on{border-color:var(--pine);background:var(--pine);color:#fff;
  font-weight:600}
.chart{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 10px 6px;overflow:hidden}
.scroll{overflow-x:auto;border:1px solid var(--line);background:var(--card);
  border-radius:12px}
table{border-collapse:collapse;width:100%}
th{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;
  text-transform:uppercase;text-align:left;color:var(--soft);padding:9px 11px;
  border-bottom:1px solid var(--line);font-weight:400;white-space:nowrap}
td{padding:8px 11px;border-bottom:1px solid var(--hair);font-size:13px}
tbody tr:last-child td{border-bottom:0}
td.n{font-family:var(--mono);text-align:right;white-space:nowrap}
td.n.over{color:var(--brick);font-weight:600}
td.n.good{color:var(--pine);font-weight:600}
.soft{color:var(--soft)}
.empty{padding:18px 0;color:var(--soft);font-size:13px;text-align:center}

/* ── вход ── */
.login{max-width:300px;margin:18vh auto;text-align:center}
.login h1{font-family:var(--disp);font-weight:700;font-size:34px;
  letter-spacing:-.03em;margin-top:4px}
.login form{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.login input,.login button{padding:14px;font-size:16px;font-family:inherit;
  border-radius:10px;border:1px solid var(--line)}
.login input{background:var(--card);color:var(--ink);text-align:center}
.login button{background:var(--deep);color:#fff;border:0;font-weight:600;
  cursor:pointer;font-size:15px}
.err{color:var(--brick);font-size:13px;margin-top:12px}

@media (min-width:560px){
  .wrap{max-width:640px}
  .ring{width:236px;height:236px}
}

/* ── добавки ── */
.pills{display:flex;flex-direction:column;gap:8px}
.pill{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;position:relative;padding-left:32px;opacity:.62}
.pill.act{opacity:1}
.pill::before{content:"";position:absolute;left:13px;top:14px;width:10px;
  height:10px;border-radius:50%;border:1.5px solid var(--line)}
.pill.act::before{border-color:var(--ochre)}
.pill.on::before{background:var(--pine);border-color:var(--pine)}
.pill-n{font-size:14px;font-weight:500;line-height:1.25}
.pill-d{font-family:var(--mono);font-size:11px;color:var(--soft);margin-top:2px}
.pill-s{font-size:11.5px;color:var(--pine);margin-top:3px}
.pill:not(.act) .pill-s{color:var(--soft)}