:root{
  --bg:#0e1116; --card:#161b22; --card2:#1c232c; --bd:#232a33;
  --tx:#e6edf3; --mut:#8b949e; --accent:#4cc38a; --amber:#d29922;
  --red:#f85149; --blue:#58a6ff; --violet:#bc8cff;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--tx);
  font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:40px;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--bd);
  position:sticky; top:0; background:rgba(14,17,22,.92); backdrop-filter:blur(8px); z-index:5;
}
.brand{font-weight:700; letter-spacing:.3px}
.cycle-status{font-size:13px; color:var(--mut); text-align:right}
.tabs{
  display:flex; gap:6px; padding:10px 14px; position:sticky; top:51px;
  background:var(--bg); z-index:4; border-bottom:1px solid var(--bd);
}
.tab{
  flex:1; padding:9px 0; border:1px solid var(--bd); background:var(--card);
  color:var(--mut); border-radius:10px; font-weight:600; font-size:14px; cursor:pointer;
}
.tab.active{color:var(--tx); background:var(--card2); border-color:#39424d}
main{max-width:760px; margin:0 auto; padding:14px}
.panel{display:none}
.panel.active{display:block}
.card{
  background:var(--card); border:1px solid var(--bd); border-radius:14px;
  padding:16px; margin-bottom:14px;
}
.card h3{margin:0 0 12px; font-size:15px}
.muted{color:var(--mut)}

/* kcal card */
.kcal-card .kcal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
#kcal-now{font-size:30px; font-weight:800}
.pill{padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; background:var(--card2); border:1px solid var(--bd)}
.pill.ok{color:var(--accent); border-color:#1f6f4a}
.pill.under{color:var(--amber); border-color:#6b5212}
.pill.over{color:var(--red); border-color:#7a2620}
.bar{margin:9px 0}
.bar .lab{display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px}
.bar .track{height:8px; background:var(--card2); border-radius:6px; overflow:hidden}
.bar .fill{height:100%; border-radius:6px; transition:width .3s}
.fill.p{background:var(--blue)} .fill.c{background:var(--violet)} .fill.f{background:var(--amber)}

/* forms */
input,select{
  background:var(--card2); border:1px solid var(--bd); color:var(--tx);
  border-radius:9px; padding:9px 10px; font-size:15px; width:100%;
}
select{appearance:none}
.amt-row{display:flex; gap:8px; align-items:center; margin-top:8px}
.amt-row input{flex:1}
.unit{color:var(--mut); min-width:40px}
.preview{margin-top:8px; font-size:13px; min-height:18px}
.btn{
  background:var(--accent); color:#06231a; border:none; border-radius:9px;
  padding:9px 16px; font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap;
}
.btn.sec{background:var(--card2); color:var(--tx); border:1px solid var(--bd)}
.btn:active{transform:translateY(1px)}
.free{margin-top:12px}
.free summary{color:var(--mut); cursor:pointer; font-size:13px}
.free-form{margin-top:10px; display:flex; flex-direction:column; gap:8px}
.free-macros{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:6px}
.metric-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:12px}
.metric-grid label{font-size:12px; color:var(--mut); display:flex; flex-direction:column; gap:4px}

/* meal list */
.meal-list{list-style:none; margin:0; padding:0}
.meal-list li{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--bd)}
.meal-list li:last-child{border-bottom:none}
.meal-list .mname{font-size:14px}
.meal-list .mmac{font-size:12px; color:var(--mut)}
.meal-list .del{background:none; border:none; color:var(--red); font-size:18px; cursor:pointer; padding:0 6px}
.empty{color:var(--mut); font-size:13px; padding:6px 0}

/* dose card */
.dose-btn{width:100%; margin-bottom:8px; padding:13px; font-size:15px}
.dose-next{font-size:13px; color:var(--mut)}

/* flags */
.flag{color:var(--amber); font-size:13px; padding:3px 0}
.flag.ok{color:var(--accent)}

/* calendar */
.legend{display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--mut); margin-bottom:12px}
.legend .dot{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:middle}
.dot.reta{background:var(--blue)} .dot.motsc{background:var(--violet)} .dot.train{background:#39424d} .dot.done{background:var(--accent)}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.cal .hd{text-align:center; font-size:11px; color:var(--mut); padding-bottom:2px}
.cell{background:var(--card2); border:1px solid var(--bd); border-radius:8px; min-height:62px; padding:5px; font-size:11px}
.cell.out{opacity:.28}
.cell.today{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.cell .dnum{font-weight:700; font-size:12px}
.cell .tr{color:var(--mut); font-size:10px; line-height:1.2}
.cell .badge{display:inline-block; margin-top:3px; padding:1px 5px; border-radius:5px; font-size:10px; font-weight:700}
.badge.reta{background:rgba(88,166,255,.18); color:var(--blue)}
.badge.motsc{background:rgba(188,140,255,.18); color:var(--violet)}
.badge.done{outline:1px solid var(--accent)}
.cell.next{border-color:var(--amber)}

/* charts */
.chartbox{position:relative; height:230px}
canvas{max-height:230px}

/* toast */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--accent); color:#06231a; padding:10px 18px; border-radius:10px;
  font-weight:700; font-size:14px; opacity:0; pointer-events:none; transition:.25s; z-index:20;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--red); color:#fff}

@media(max-width:480px){
  .metric-grid{grid-template-columns:1fr 1fr}
  #kcal-now{font-size:26px}
}