:root{
  --bg: var(--tg-theme-bg-color, #0f1216);
  --card: var(--tg-theme-secondary-bg-color, #171b21);
  --text: var(--tg-theme-text-color, #f2f4f7);
  --hint: var(--tg-theme-hint-color, #8a93a2);
  --accent: var(--tg-theme-button-color, #3b82f6);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --link: var(--tg-theme-link-color, #6ab3ff);
  --green:#22c55e; --red:#ef4444; --amber:#f59e0b;
  --blue:#3b82f6; --water:#38bdf8;
  --p:#f472b6; --f:#fbbf24; --c:#34d399;
  --radius:18px;
  --shadow: 0 6px 24px rgba(0,0,0,.18);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.4;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
h1{font-size:22px; margin:0}
.hint{color:var(--hint); font-size:13px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; word-break:break-all}
b{font-weight:700}

/* --- Загрузка / центрирование --- */
.center-screen{min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px}
.spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(127,127,127,.25);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Экраны / карточки --- */
.screen,.view{padding:14px 14px 0}
.card{
  background:var(--card); border-radius:var(--radius); padding:16px; margin-bottom:14px;
  box-shadow:var(--shadow);
}
.card-title{font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px; justify-content:space-between}
.app-head{display:flex; align-items:flex-end; justify-content:space-between; padding:6px 2px 14px}
.streak{background:rgba(245,158,11,.15); color:var(--amber); font-weight:700; padding:6px 10px; border-radius:999px; font-size:14px}

/* --- Кольцо калорий --- */
.ring-card{display:flex; flex-direction:column; align-items:center}
.ring-wrap{position:relative; width:200px; height:200px}
.ring{width:200px; height:200px; transform:rotate(-90deg)}
.ring-bg{fill:none; stroke:rgba(127,127,127,.18); stroke-width:11}
.ring-fg{fill:none; stroke:var(--green); stroke-width:11; stroke-linecap:round;
  transition:stroke-dashoffset .6s ease, stroke .3s}
.ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ring-value{font-size:40px; font-weight:800; letter-spacing:-1px}
.ring-label{color:var(--hint); font-size:13px; margin-top:2px}
.ring-legend{display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; justify-content:center; font-size:13px; color:var(--hint)}
.ring-legend b{color:var(--text)}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px}
.dot-eat{background:var(--green)} .dot-burn{background:var(--amber)} .dot-goal{background:var(--blue)}

/* --- Макросы --- */
.macros{display:flex; gap:10px}
.macro{flex:1; text-align:center}
.macro-bar{height:8px; border-radius:6px; background:rgba(127,127,127,.18); overflow:hidden; margin-bottom:8px}
.macro-bar i{display:block; height:100%; width:0; border-radius:6px; transition:width .5s}
#mb-p{background:var(--p)} #mb-f{background:var(--f)} #mb-c{background:var(--c)}
.macro-lab{font-size:12px; color:var(--hint)}
.macro-lab b{display:block; color:var(--text); font-size:16px}

/* --- Вода --- */
.water-bar{height:12px; border-radius:8px; background:rgba(127,127,127,.18); overflow:hidden; margin-bottom:12px}
.water-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#38bdf8,#0ea5e9); transition:width .5s}

/* --- Чипы / кнопки --- */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.chip{
  background:rgba(127,127,127,.14); color:var(--text); border:none; border-radius:12px;
  padding:10px 14px; font-size:15px; font-weight:600; cursor:pointer;
}
.chip:active{transform:scale(.96)}
.chip-burn{background:rgba(245,158,11,.16); color:var(--amber)}
.btn-primary{background:var(--accent); color:var(--accent-text); border:none; border-radius:12px; padding:12px 16px; font-size:15px; font-weight:700; cursor:pointer}
.btn-primary.big,.btn-ghost.big{width:100%; padding:14px; margin-top:10px; font-size:16px}
.btn-primary:active{opacity:.85}
.btn-ghost{background:rgba(127,127,127,.14); color:var(--text); border:none; border-radius:12px; padding:12px 16px; font-weight:700; cursor:pointer}
.btn-ghost.sm{padding:8px 12px; font-size:13px}
.file-btn{display:inline-flex; align-items:center; justify-content:center; text-align:center}

.row-add{display:flex; gap:8px; margin-top:10px}
.row-add input{flex:1}

input,textarea{
  width:100%; background:var(--bg); color:var(--text); border:1px solid rgba(127,127,127,.25);
  border-radius:12px; padding:12px; font-size:16px; font-family:inherit;
}
textarea{resize:vertical}

/* --- Поля / сегменты --- */
.field{display:block; font-size:13px; color:var(--hint); margin-bottom:14px}
.field input{margin-top:6px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.segmented{display:flex; gap:8px; margin-top:6px}
.segmented.wrap{flex-wrap:wrap}
.segmented button{flex:1; min-width:70px; background:rgba(127,127,127,.14); color:var(--text); border:none; border-radius:12px; padding:12px 8px; font-weight:600; cursor:pointer}
.segmented button.sel{background:var(--accent); color:var(--accent-text)}

/* --- Записи --- */
.entries{display:flex; flex-direction:column}
.entry{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(127,127,127,.12)}
.entry:last-child{border-bottom:none}
.entry .e-main{display:flex; flex-direction:column}
.entry .e-name{font-weight:600}
.entry .e-time{font-size:12px; color:var(--hint)}
.entry .e-kcal{font-weight:700}
.entry .e-kcal.pos{color:var(--text)} .entry .e-kcal.neg{color:var(--amber)}
.entry .e-del{background:none; border:none; color:var(--hint); font-size:20px; padding:0 4px; cursor:pointer}
.empty{color:var(--hint); text-align:center; padding:14px 0}

/* --- Графики --- */
.chart{width:100%; overflow:hidden}
.chart svg{width:100%; height:auto; display:block}
.bar-label{fill:var(--hint); font-size:9px}
.axis-line{stroke:rgba(127,127,127,.25); stroke-dasharray:3 3}

/* --- Switch --- */
.switch-row{display:flex; align-items:center; justify-content:space-between}
.switch{position:relative; width:50px; height:30px}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0}
.switch i{position:absolute; inset:0; background:rgba(127,127,127,.3); border-radius:999px; transition:.2s}
.switch i::after{content:""; position:absolute; width:24px; height:24px; border-radius:50%; background:#fff; top:3px; left:3px; transition:.2s}
.switch input:checked + i{background:var(--green)}
.switch input:checked + i::after{transform:translateX(20px)}
.copy-row{display:flex; align-items:center; gap:8px; margin:8px 0; background:var(--bg); padding:8px 10px; border-radius:10px}
.copy-row code{flex:1}

/* --- Таббар --- */
#tabbar{
  position:fixed; left:0; right:0; bottom:0; display:flex; z-index:20;
  background:var(--card); border-top:1px solid rgba(127,127,127,.15);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{flex:1; background:none; border:none; color:var(--hint); font-size:11px; font-weight:600; padding:8px 0 10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px}
.tab span{font-size:20px; line-height:1}
.tab.active{color:var(--accent)}

/* --- Sheet / модалка --- */
.sheet{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:flex-end; z-index:40}
.sheet-card{background:var(--card); width:100%; border-radius:22px 22px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); max-height:80vh; overflow:auto; animation:slideup .25s ease}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-title{font-weight:800; font-size:18px; margin-bottom:12px}
.sheet-item{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(127,127,127,.12)}
.sheet-total{display:flex; justify-content:space-between; font-weight:800; font-size:17px; margin-top:12px}
.sheet-actions{display:flex; gap:10px; margin-top:18px}
.sheet-actions button{flex:1; padding:14px}

/* --- Toast --- */
.toast{position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:#000; color:#fff; padding:10px 16px; border-radius:12px; font-size:14px; z-index:50; opacity:.95; max-width:90%; text-align:center}

.onb-card h1{margin-bottom:6px}