:root{
  --bg:#141824;--bg-top:#1e2536;--card:#232836;--card-2:#2b3142;--text:#eef0f4;--muted:#9aa1b0;--line:#323849;
  --accent:#5b8def;--accent-soft:#25324d;--accent-text:#fff;--good:#58c08a;--over:#ef6f5e;
  --protein:#e58a6f;--carbs:#6fb7e5;--fat:#e5c06f;--focus:#8fb2f5;
  color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100svh;color:var(--text);background:linear-gradient(180deg,var(--bg-top) 0,var(--bg) 320px) no-repeat,var(--bg);padding-bottom:calc(110px + env(safe-area-inset-bottom))}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
a{color:var(--accent)}

main{max-width:560px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px 24px}
h1{font-size:30px;font-weight:700;margin:6px 0 16px;letter-spacing:-.01em}
h2{font-size:20px;font-weight:600;margin:26px 0 10px}
p{line-height:1.45}
.muted{color:var(--muted)}
.small{font-size:13px}
.row{display:flex;gap:8px;align-items:center}
.row>*{min-width:0}
.grow{flex:1}
.stack>*+*{margin-top:10px}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}

.card{background:var(--card);border-radius:18px;padding:18px}
.card+.card{margin-top:12px}
.card-title{font-size:16px;color:var(--text);margin:0 0 6px;font-weight:500}

label{display:block;font-size:14px;color:var(--muted);margin-bottom:5px}
input,select,textarea{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card-2);font-size:16px}
.field{margin-bottom:12px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 18px;border-radius:999px;border:0;background:var(--accent-soft);color:var(--accent);font-weight:600;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--accent);color:var(--accent-text)}
.btn.block{width:100%}
.btn.small{min-height:34px;padding:4px 14px;font-size:14px}
.btn.link{background:none;padding:4px 6px;min-height:34px}
.btn.plain{background:var(--card-2);color:var(--text)}
.btn.danger{color:var(--over)}
.btn:disabled{opacity:.45;cursor:default}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:#0d1019;color:var(--text);cursor:pointer}

.error{color:var(--over);font-size:14px;min-height:20px;margin:6px 0}
.note{font-size:14px;color:var(--muted);margin:6px 0}

/* Today header + week strip */
.topbar{display:flex;justify-content:space-between;align-items:center;margin:4px 0 14px}
.day-title{display:inline-flex;align-items:center;gap:8px;background:none;border:0;font-size:30px;font-weight:700;padding:0;cursor:pointer;position:relative}
.day-title input{position:absolute;inset:0;opacity:0;pointer-events:none}
.week{display:grid;grid-template-columns:repeat(7,1fr) auto;align-items:end;gap:2px;margin-bottom:18px}
.week button{background:none;border:0;padding:4px 0;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);cursor:pointer;font-size:14px}
.week button[aria-current=date]{color:var(--text);font-weight:700}
.week button .dot{width:4px;height:4px;border-radius:50%;background:transparent}
.week button[aria-current=date] .dot{background:var(--muted)}
.week svg{width:34px;height:34px}
.week .track{fill:none;stroke:#454c5e;stroke-width:2.5}
.week .fill{fill:none;stroke:var(--good);stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}
.week .fill.over{stroke:var(--over)}
.week .today-empty{stroke-dasharray:3 4}
.streak{display:flex;flex-direction:column;align-items:center;padding-left:12px;margin-left:6px;border-left:1px solid var(--line);color:var(--muted);font-size:12px;gap:2px}
.streak svg{width:30px;height:34px;color:#4a5164}
.streak.on svg{color:#f08a3c}
.streak b{color:var(--text);font-size:15px}

.big{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums}
.big small{font-size:17px;font-weight:400;color:var(--muted)}
.left{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.left small{font-size:15px;font-weight:400;color:var(--muted)}
.bar{height:10px;background:#11151f;border-radius:6px;overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;background:var(--good);border-radius:6px}
.bar.over i{background:var(--over)}
.macros{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative}
.macro .name{font-size:16px}
.macro .val{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.macro .of{font-size:13px;color:var(--muted);margin-top:1px}
.macro.p .bar i{background:var(--protein)}.macro.c .bar i{background:var(--carbs)}.macro.f .bar i{background:var(--fat)}
.macro .bar.over i{background:var(--over)}
.swap{position:absolute;top:-8px;right:-8px;width:34px;height:34px;font-size:15px}

/* Nutrition card: each nutrient against its target */
.nutrients{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.nutrient .name{font-size:14px;color:var(--muted)}
.nutrient .val{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.nutrient .val small{font-size:13px;font-weight:400;color:var(--muted)}
.nutrient .bar{height:7px;margin-top:6px}
.nutrient .bar i{background:var(--accent)}
.nutrient.met .bar i{background:var(--good)}
.nutrient.over .bar i{background:var(--over)}
.nutrient .status{font-size:12px;color:var(--muted);margin-top:4px}
.nutrient.over .status{color:var(--over)}
.nutrient.met .status{color:var(--good)}
.nutrients.three{grid-template-columns:repeat(3,1fr);gap:12px}
.nutrients.three .val{font-size:20px}
.all-nutrients{margin-top:12px}
.all-nutrients h3{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:18px 0 6px}
.n-row{padding:7px 0;border-top:1px solid var(--line);font-size:15px}
.n-row .n-val{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px;white-space:nowrap}
.n-row .bar{height:5px;margin-top:6px}
.n-row .bar i{background:var(--accent)}
.n-row.met .bar i{background:var(--good)}
.n-row.over .bar i{background:var(--over)}
.n-row.over .n-val{color:var(--over)}
.n-note{font-size:12px;color:var(--fat);margin-top:3px}
.card.compact{padding:14px 18px}
.card.compact .bar{height:6px;margin-top:8px}
.week .fill.full{stroke:var(--good)}
.week .fill{stroke:var(--accent)}

/* Meal cards */
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin:26px 0 10px}
.section-head h2{margin:0}
.meal{background:var(--card);border-radius:18px;padding:14px 16px}
.meal+.meal{margin-top:10px}
.meal-top{display:flex;align-items:center;gap:14px}
.meal-top svg{width:30px;height:30px;color:var(--accent);flex:none}
.meal-top .name{flex:1;font-size:19px;font-weight:500;text-transform:capitalize}
.meal-top .name small{display:block;font-size:14px;color:var(--muted);font-weight:400;text-transform:none}
.entries{list-style:none;margin:10px 0 0;padding:0}
.entries li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.entries .item{flex:1;min-width:0}
.entries .item b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entries .item span{font-size:13px;color:var(--muted)}
.entries .kcal{font-variant-numeric:tabular-nums;font-size:14px;color:var(--muted)}

/* Generic lists */
.list{list-style:none;margin:0;padding:0;background:var(--card);border-radius:18px;overflow:hidden}
.list li{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--line)}
.list li:first-child{border-top:0}
.list li.empty{color:var(--muted);font-size:14px}
.list .item{flex:1;min-width:0;color:inherit;text-decoration:none}
.list .item b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .item span{font-size:13px;color:var(--muted)}
.list button.item{background:none;border:0;text-align:left;padding:0;cursor:pointer}

.seg{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button:first-child{margin-left:auto}.seg button:last-child{margin-right:auto}
.seg button{background:none;border:0;padding:8px 0 10px;font-size:17px;color:var(--muted);cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.seg button[aria-pressed=true]{color:var(--text);font-weight:600;border-bottom-color:var(--text)}

.scanner{position:relative;background:#000;border-radius:18px;overflow:hidden;aspect-ratio:4/3}
.scanner video{width:100%;height:100%;object-fit:cover;display:block}
.scanner .frame{position:absolute;inset:30% 12%;border:2px solid #ffffffcc;border-radius:10px;pointer-events:none}

/* Progress */
.stat-card{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;align-items:end}
.stat-card .label{font-size:15px;color:var(--muted)}
.stat-card .value{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:6px}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:150px}
.bars div{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars i{display:block;width:100%;max-width:26px;border-radius:13px;background:#11151f;position:relative;overflow:hidden;flex:1}
.bars i b{position:absolute;left:0;right:0;bottom:0;background:var(--good);border-radius:13px}
.bars span{font-size:13px;color:var(--muted)}
.chart{width:100%;height:auto;aspect-ratio:320/170;display:block}
.chart .line{fill:none;stroke:var(--good);stroke-width:2.5}
.chart .dot{fill:var(--card);stroke:var(--good);stroke-width:2}
.chart text{fill:var(--muted);font-size:11px}
.chart .grid{stroke:var(--line);stroke-width:1}
.weight-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.weight-stats .label{font-size:13px;color:var(--muted)}
.weight-stats .value{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.card form .error:empty{min-height:0;margin:0}

/* Floating tab bar and add button */
#tabs{position:fixed;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:center;gap:12px;pointer-events:none;padding:0 14px}
#tabs .pill{pointer-events:auto;display:flex;background:#3a4052e6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px;padding:5px;box-shadow:0 6px 24px #0007}
#tabs .pill a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:76px;height:58px;border-radius:999px;color:var(--text);text-decoration:none;font-size:13px}
#tabs .pill a svg{width:24px;height:24px}
#tabs .pill a[aria-current=page]{background:#1f2433}
/* Every slot is the same size; the + is a circle centred in its own slot. */
#tabs .pill{align-items:stretch}
#tabs .pill a,#tabs .pill .add{width:78px;min-width:0;flex:none}
#tabs .pill .add{height:58px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer;border-radius:999px}
#tabs .pill .add-dot{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}
#tabs .pill .add-dot svg{width:24px;height:24px}

/* Bottom sheet */
.sheet-back{position:fixed;inset:0;background:#000a;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:560px;background:var(--card);border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
.sheet>button{width:100%;justify-content:flex-start;gap:12px;margin-top:8px;min-height:54px;font-size:17px;border-radius:14px}
.sheet>button svg{width:22px;height:22px;flex:none;color:var(--accent)}

/* Recipes */
.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.recipe-card{display:flex;flex-direction:column;gap:4px;background:var(--card);border-radius:16px;padding:14px;min-height:110px;color:inherit;text-decoration:none}
.recipe-card b{font-size:17px;font-weight:600}
.recipe-card span{font-size:13px;color:var(--muted)}

/* Meal planner */
.plan-day{background:var(--card);border-radius:18px;padding:14px 16px;margin-top:12px}
.plan-meal{border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
.plan-item{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0}
.plan-item.done b{opacity:.7}
.plan-item a{text-decoration:none}
.meal-tag{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.daynav strong{font-size:16px;white-space:nowrap}
.daynav .btn{padding:4px 12px}
.plan-more{width:auto}
.plan-more summary{min-height:34px;padding:0 8px;color:var(--muted);font-size:18px;list-style:none}
.plan-more summary::-webkit-details-marker{display:none}
.plan-more[open]{width:100%}
.plan-more label{display:flex;align-items:center;gap:8px}
.plan-more select,.plan-more input{width:auto;min-height:36px;padding:4px 8px}

/* Injection-site body map */
.body-map-wrap{background:var(--card-2);border-radius:14px;padding:10px}
.body-map{display:block;width:100%;max-width:240px;margin:0 auto;height:auto}
.body-map{cursor:crosshair;max-width:200px}
.body-map .silhouette{fill:#3d4456;stroke:#55607a;stroke-width:1.2}
.body-map .past-dot{fill:#f08a3c;stroke:#141824;stroke-width:1.2}
.body-map .new-dot{fill:var(--accent);stroke:#fff;stroke-width:2}

/* Log -> two small bubbles */
.log-bubbles{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.bubbles{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.bubble{display:inline-flex;align-items:center;min-height:34px;padding:4px 14px;border-radius:999px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}

/* 1-5 / severity pickers, toggles, details */
.scale{display:flex;gap:6px;flex-wrap:wrap}
.scale-btn{flex:1;min-width:44px;min-height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card-2);color:var(--muted);cursor:pointer;font-size:14px;padding:4px 8px}
.scale-btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.toggle{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--text);margin:10px 0}
.toggle input{width:22px;height:22px;min-height:0;accent-color:var(--accent)}
details summary{cursor:pointer;color:var(--accent);min-height:36px;display:flex;align-items:center}
textarea{resize:vertical}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:18px;letter-spacing:.06em;user-select:all}
.pill-tag{display:inline-block;font-size:12px;padding:2px 9px;border-radius:10px;background:var(--card-2);color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{text-align:left;padding:8px 4px;border-top:1px solid var(--line)}
th{color:var(--muted);font-weight:500}
.num{text-align:right;font-variant-numeric:tabular-nums}

.list li.unmatched { border-left: 3px solid var(--warn, #f0a35e); padding-left: 8px; }
.note.warn { color: var(--warn, #f0a35e); }

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--card2,rgba(255,255,255,.06));border:1px solid var(--line);color:var(--text);border-radius:999px;padding:7px 12px;font-size:14px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip[aria-pressed=true]{border-color:var(--accent,#6c8cff);color:var(--accent,#6c8cff)}
.own-ask{margin:10px 0}
.list li > button.item{background:none;border:0;color:inherit;text-align:left;cursor:pointer;padding:0;font:inherit;min-width:0}
.list li input[type=checkbox]{width:22px;height:22px;min-height:0;padding:0;flex:none;accent-color:var(--accent)}

.weeknav{position:relative;display:flex;justify-content:center;align-items:center;margin:4px 0 14px}
.weeknav .pill{display:flex;align-items:center;gap:4px;background:var(--card);border-radius:999px;padding:4px}
.weeknav .pill strong{font-size:15px;white-space:nowrap;padding:0 8px;min-width:120px;text-align:center}
.weeknav button{width:36px;height:36px;border-radius:50%;border:0;background:var(--card-2);color:var(--text);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center}
.weeknav .more{position:absolute;right:0;background:none;color:var(--muted)}
.recipe-card .badge{align-self:flex-start;margin-top:6px;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--card-2);color:var(--muted)}
.badge.pending{color:#f0a35e}.badge.approved{color:var(--good)}.badge.rejected{color:var(--over)}
.card.review{margin:0 0 12px;border:1px solid var(--line)}
.card.review.pending b{color:#f0a35e}.card.review.approved b{color:var(--good)}.card.review.rejected b{color:var(--over)}
.btn.danger-soft{background:transparent;color:var(--over);border:1px solid color-mix(in srgb,var(--over) 45%,transparent)}
.entries.planned li{opacity:.85}
.entries.planned li .item b{font-weight:500}
.entries.planned{border-top:1px dashed var(--line);margin-top:6px;padding-top:4px}

.list li.kept{opacity:.6}
.plan-preview-day{margin:14px 0 6px}
.plan-preview-day .list{margin-top:6px}

.list li.picked{background:var(--accent-soft)}
.list li.picked .item b{color:var(--accent)}