:root {
  --bg:#06080C; --surface:#10131A; --raised:#161A22; --pressed:#1E232D;
  --fg:#F5F7FB; --muted:#A3ABBD; --subtle:#737C90;
  --primary:#3D7DFF; --primary-pressed:#2457D6; --ring:#5C93FF; --primary-soft:rgba(47,107,255,.16);
  --success:#22C55E; --warning:#FFD54A; --danger:#F25555;
  --border:rgba(255,255,255,.06); --border-strong:rgba(255,255,255,.12);
  --p:#5C93FF; --f:#FFD54A; --c:#22C55E;
  --font:Manrope,"Segoe UI",system-ui,sans-serif; --display:Unbounded,Manrope,sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --r-sm:10px; --r-md:14px; --r-lg:20px;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html, body { background:var(--bg); color:var(--fg); font-family:var(--font); font-size:15px; line-height:1.4; }
body { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
#app { max-width:520px; margin:0 auto; padding:0 var(--s4); }
button, input { font:inherit; color:inherit; }
button { border:0; background:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
svg { width:20px; height:20px; flex:none; }
.hidden { display:none !important; }

.top { display:flex; align-items:center; justify-content:space-between; height:56px; padding-top:env(safe-area-inset-top); }
.wordmark { display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.3px; }
.wordmark img { height:30px; width:auto; }
h1 { font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.5px; margin:var(--s2) 0 var(--s4); }
.head { gap:var(--s3); margin-bottom:var(--s2); } .head h1 { margin:0; flex:1; }
.label { color:var(--subtle); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; margin:var(--s4) 0 var(--s2); }
.chip { height:36px; padding:0 var(--s3); border-radius:18px; background:var(--raised); border:1px solid var(--border); font-weight:600; font-size:13px; color:var(--fg); }
.chip svg { width:16px; height:16px; }
.chip.on { background:var(--primary-soft); border-color:rgba(47,107,255,.4); color:var(--ring); }
.tag { font-size:11px; font-weight:800; color:var(--warning); background:rgba(255,213,74,.14); padding:2px 6px; border-radius:6px; }
.card { background:var(--raised); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s4); margin-top:var(--s3); }
.card .t { font-weight:700; } .card .s { color:var(--muted); font-size:13px; margin-top:2px; }
.card .big { font-family:var(--display); font-weight:700; font-size:32px; margin:6px 0 2px; color:var(--ring); }
.card.mini { display:flex; align-items:center; gap:var(--s3); padding:var(--s3); margin-top:0; }
.card.mini .ic { width:36px; height:36px; padding:8px; border-radius:12px; background:var(--pressed); color:var(--ring); }
.card.mini > div { flex:1; min-width:0; } .card.mini .t { font-size:17px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin-top:var(--s3); }
.row3 { display:flex; gap:var(--s2); margin-top:var(--s3); } .row3 .btn { margin-top:0; height:42px; }
.btns { display:flex; gap:6px; }
.btn { width:100%; height:48px; border-radius:24px; font-weight:700; background:var(--raised); border:1px solid var(--border-strong); margin-top:var(--s3); transition:transform .12s; }
.btn:active { transform:scale(.98); }
.btn.primary { background:var(--primary); border-color:transparent; color:#fff; }
.btn[disabled] { opacity:.5; }
.round { width:38px; height:38px; border-radius:19px; background:var(--pressed); border:1px solid var(--border-strong); flex:none; }
.round svg { width:18px; height:18px; }
.round.primary { background:var(--primary); border-color:transparent; color:#fff; }
.round.ghost { background:transparent; border:0; color:var(--subtle); }

/* кольцо */
.hero { display:flex; flex-direction:column; align-items:center; padding-top:var(--s2); }
.ring-wrap { position:relative; width:200px; height:200px; }
.ring { width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg { fill:none; stroke:var(--pressed); stroke-width:14; }
.ring-fg { fill:none; stroke:var(--primary); stroke-width:14; stroke-linecap:round; stroke-dasharray:540; stroke-dashoffset:540; transition:stroke-dashoffset .6s cubic-bezier(.22,1,.36,1), stroke .3s; filter:drop-shadow(0 0 10px rgba(47,107,255,.45)); }
.ring-fg.over { stroke:var(--danger); }
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-big { font-family:var(--display); font-weight:700; font-size:34px; letter-spacing:-1px; }
.ring-sub { color:var(--muted); font-size:13px; margin-top:2px; }
.kpis { display:flex; gap:var(--s2); width:100%; margin-top:var(--s3); }
.kpi { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:var(--s2); border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); }
.kpi svg { width:16px; height:16px; color:var(--subtle); } .kpi b { font-size:15px; } .kpi small { color:var(--subtle); font-size:11px; }
.macros { display:flex; gap:var(--s2); width:100%; margin-top:var(--s2); }
.macro { flex:1; background:var(--raised); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s2) var(--s3); }
.macro .k { color:var(--subtle); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.macro .bar { height:5px; border-radius:3px; background:var(--pressed); margin:6px 0; overflow:hidden; }
.macro .bar i { display:block; height:100%; width:0; border-radius:3px; transition:width .5s; }
.macro:nth-child(1) .bar i { background:var(--p); } .macro:nth-child(2) .bar i { background:var(--f); } .macro:nth-child(3) .bar i { background:var(--c); }
.macro .v { font-size:12px; font-weight:700; }

/* слоты дневника */
.slot { background:var(--raised); border:1px solid var(--border); border-radius:var(--r-lg); margin-top:var(--s3); overflow:hidden; }
.slot-h { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); }
.slot-h b { flex:1; } .slot-h .kcal { color:var(--muted); font-size:13px; font-weight:700; }
.slot-h .round { width:32px; height:32px; }
.meal { display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s4); border-top:1px solid var(--border); }
.meal .m { flex:1; min-width:0; } .meal .m b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
.meal .m small { color:var(--muted); font-size:12px; }
.meal .kcal { font-weight:800; white-space:nowrap; }
.meal .x { width:30px; height:30px; color:var(--subtle); } .meal .x svg { width:16px; height:16px; }
.fab { position:fixed; right:calc(50% - 250px); bottom:calc(84px + env(safe-area-inset-bottom)); width:56px; height:56px; border-radius:28px; background:var(--primary); color:#fff; box-shadow:0 12px 30px rgba(47,107,255,.45); z-index:5; }
@media (max-width:540px) { .fab { right:16px; } }
.fab svg { width:26px; height:26px; }

/* добавить */
.seg { display:flex; gap:4px; padding:4px; background:var(--surface); border:1px solid var(--border); border-radius:18px; margin-top:var(--s2); }
.seg.col { flex-direction:column; }
.seg button { flex:1; height:40px; border-radius:14px; font-weight:600; font-size:13px; color:var(--muted); }
.seg button.on { background:var(--pressed); color:var(--fg); }
.search { display:flex; align-items:center; gap:var(--s2); height:50px; margin-top:var(--s3); padding:0 var(--s3); border-radius:var(--r-md); background:var(--raised); border:1px solid var(--border-strong); }
.search:focus-within { border-color:var(--ring); }
.search svg { color:var(--subtle); } .search input { flex:1; background:none; border:0; outline:none; height:100%; min-width:0; }
.quick { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin-top:var(--s3); }
.tile { flex-direction:column; gap:6px; padding:var(--s3) var(--s2); border-radius:var(--r-md); background:var(--raised); border:1px solid var(--border); font-size:12px; font-weight:700; color:var(--fg); }
.tile svg { width:22px; height:22px; color:var(--ring); }
.res { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s2); border-top:1px solid var(--border); }
.res:first-child { border-top:0; }
.res .m { flex:1; min-width:0; } .res .m b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
.res .m small { color:var(--muted); font-size:12px; }
.res .src { font-size:10px; font-weight:800; padding:2px 6px; border-radius:6px; background:var(--pressed); color:var(--subtle); }
.res .src.mine { color:var(--ring); } .res .src.ai { color:var(--warning); }
#results { margin-top:var(--s3); }
.hint { color:var(--subtle); font-size:12px; margin-top:var(--s3); text-align:center; }

/* графики */
.bars { display:flex; align-items:flex-end; gap:5px; height:100px; margin-top:var(--s3); }
.bars div { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bars i { display:block; width:100%; border-radius:5px 5px 2px 2px; background:var(--primary); min-height:3px; }
.bars i.over { background:var(--danger); } .bars i.empty { background:var(--pressed); }
.bars span { font-size:9px; color:var(--subtle); margin-top:4px; }
.chart { width:100%; height:120px; margin-top:var(--s3); }
.chart path { fill:none; stroke:var(--ring); stroke-width:2.5; stroke-linejoin:round; }
.chart .goal { stroke:var(--success); stroke-dasharray:4 4; stroke-width:1.5; }
.chart circle { fill:var(--fg); } .chart text { fill:var(--subtle); font-size:10px; }
.act { display:flex; align-items:center; gap:var(--s3); padding:var(--s2) 0; border-top:1px solid var(--border); font-size:14px; }
.act:first-child { border-top:0; margin-top:var(--s2); } .act b { flex:1; } .act small { color:var(--muted); }

/* формы */
.form label { display:flex; flex-direction:column; gap:4px; color:var(--subtle); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.form input { height:44px; border-radius:var(--r-sm); background:var(--pressed); border:1px solid var(--border-strong); padding:0 var(--s3); color:var(--fg); font-size:15px; font-weight:600; outline:none; -moz-appearance:textfield; width:100%; color-scheme:dark; }
.form input::-webkit-outer-spin-button, .form input::-webkit-inner-spin-button { -webkit-appearance:none; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin-top:var(--s3); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin-top:var(--s3); }
.switch { display:flex; align-items:center; justify-content:space-between; padding:var(--s3) 0; border-top:1px solid var(--border); font-size:14px; }
.switch:first-of-type { margin-top:var(--s2); }
.switch input { appearance:none; width:44px; height:26px; border-radius:13px; background:var(--pressed); position:relative; transition:background .2s; flex:none; }
.switch input::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:10px; background:var(--muted); transition:transform .2s, background .2s; }
.switch input:checked { background:var(--primary); } .switch input:checked::after { transform:translateX(18px); background:#fff; }
.legal { text-align:center; color:var(--subtle); font-size:12px; margin:var(--s6) 0; } .legal a { color:var(--muted); }

/* рецепты */
.recipe { background:var(--raised); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s4); margin-top:var(--s3); }
.recipe b { font-size:16px; } .recipe .s { color:var(--muted); font-size:13px; margin-top:2px; }
.recipe .ing { margin:var(--s2) 0; font-size:13px; color:var(--muted); }
.recipe pre { white-space:pre-wrap; font:inherit; font-size:13px; margin-top:var(--s2); color:var(--fg); }

/* навигация */
.nav { position:fixed; left:0; right:0; bottom:0; height:calc(64px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:var(--bg); border-top:1px solid var(--border); display:flex; justify-content:space-around; align-items:center; z-index:6; }
.nav button { flex-direction:column; gap:3px; width:64px; color:var(--subtle); font-size:10px; font-weight:700; }
.nav button svg { width:22px; height:22px; }
.nav button.on { color:var(--fg); } .nav button.on svg { color:var(--primary); }

/* шторка, сканер, тост */
.sheet { position:fixed; inset:0; z-index:20; display:flex; align-items:flex-end; }
.sheet-bg { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.sheet-body { position:relative; width:100%; max-width:520px; margin:0 auto; background:var(--surface); border-radius:24px 24px 0 0; padding:var(--s3) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom)); border:1px solid var(--border); max-height:85vh; overflow:auto; }
.sheet-body::before { content:""; display:block; width:36px; height:4px; border-radius:2px; background:var(--border-strong); margin:0 auto var(--s3); }
.sheet-body h2 { font-family:var(--display); font-size:18px; font-weight:700; margin-bottom:var(--s2); }
.sheet-body .s { color:var(--muted); font-size:13px; }
.grams { display:flex; gap:6px; margin-top:var(--s3); } .grams button { flex:1; height:40px; border-radius:12px; background:var(--pressed); font-weight:700; font-size:13px; }
.grams button.on { background:var(--primary-soft); color:var(--ring); border:1px solid rgba(47,107,255,.4); }
.scanner { position:fixed; inset:0; background:#000; z-index:30; }
.scanner video { width:100%; height:100%; object-fit:cover; }
.scan-frame { position:absolute; left:10%; right:10%; top:35%; height:26%; border:2px solid var(--ring); border-radius:14px; box-shadow:0 0 0 2000px rgba(0,0,0,.45); }
.scan-text { position:absolute; left:0; right:0; top:66%; text-align:center; color:#fff; font-weight:700; }
.scan-close { position:absolute; top:calc(16px + env(safe-area-inset-top)); right:16px; background:rgba(0,0,0,.5); color:#fff; }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom)); background:var(--pressed); border:1px solid var(--border-strong); border-radius:20px; padding:10px 16px; font-size:13px; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.4); max-width:90%; text-align:center; z-index:40; }