/* =====================================================================
   Fuel — mobile-first visual language
   Near-black canvas, one red accent, a brushed-silver hero, huge quiet
   numerals, hairline-divided lists and an icon-only tab bar.
   Loaded after app.css / enhance.css so it re-skins everything.
   ===================================================================== */

/* ---------- tokens ---------- */
:root{
  --bg:#121212; --surface:#1c1c1e; --surface-2:#242426; --surface-3:#2f2f32;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.17);
  --text:#f5f5f7; --muted:#9b9ba1; --dim:#606067;
  --kcal:#ff453a; --kcal-2:#ff6a60;
  --protein:#bfb2ff; --protein-2:#d9d0ff;
  --water:#7cc7f4; --water-2:#a8dbf8;
  --creatine:#c6e86d; --creatine-2:#dcf39a;
  --fat:#f3c969; --carbs:#6fd9c9;
  --danger:#ff6961; --danger-text:#ff9992; --ok:#5fd68a;
  --radius:28px;
  --scrim:rgba(0,0,0,.62); --toast-bg:rgba(36,36,38,.97); --sk-hi:#3a3a3e;
  --warn-text:#ffb3ad; --note-text:#d9d0ff;
  --btn-bg:#f5f5f7; --btn-fg:#111113;
  --glow-a:transparent; --glow-b:transparent;
  --faint:color-mix(in srgb,var(--text) 24%,var(--bg));
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f2f2f4; --surface:#ffffff; --surface-2:#f1f1f4; --surface-3:#e4e4e9;
  --border:rgba(0,0,0,.08); --border-2:rgba(0,0,0,.16);
  --text:#111113; --muted:#6c6c73; --dim:#9d9da4;
  --kcal:#e5322a; --kcal-2:#c9271f;
  --protein:#6a58d4; --protein-2:#5846bd;
  --water:#1f86c6; --water-2:#16709f;
  --creatine:#6a9417; --creatine-2:#557a0f;
  --fat:#b07709; --carbs:#118676;
  --danger:#d92d24; --danger-text:#b4231b; --ok:#16995a;
  --scrim:rgba(0,0,0,.34); --toast-bg:rgba(255,255,255,.97); --sk-hi:#fff;
  --warn-text:#9b1c15; --note-text:#4c3bb0;
  --btn-bg:#111113; --btn-fg:#fff;
  color-scheme:light;
}
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f2f2f4; --surface:#ffffff; --surface-2:#f1f1f4; --surface-3:#e4e4e9;
    --border:rgba(0,0,0,.08); --border-2:rgba(0,0,0,.16);
    --text:#111113; --muted:#6c6c73; --dim:#9d9da4;
    --kcal:#e5322a; --kcal-2:#c9271f;
    --protein:#6a58d4; --protein-2:#5846bd;
    --water:#1f86c6; --water-2:#16709f;
    --creatine:#6a9417; --creatine-2:#557a0f;
    --fat:#b07709; --carbs:#118676;
    --danger:#d92d24; --danger-text:#b4231b; --ok:#16995a;
    --scrim:rgba(0,0,0,.34); --toast-bg:rgba(255,255,255,.97); --sk-hi:#fff;
    --warn-text:#9b1c15; --note-text:#4c3bb0;
    --btn-bg:#111113; --btn-fg:#fff;
    color-scheme:light;
  }
}

/* ---------- page ---------- */
html,body{background:var(--bg)}
body{font-size:16px;letter-spacing:-.005em}
body::before{display:none}
.app{max-width:540px;margin:0 auto;padding:calc(16px + var(--safe-t)) calc(20px + var(--safe-r)) calc(132px + var(--safe-b)) calc(20px + var(--safe-l))}
.live{position:static;display:inline-block;width:8px;height:8px;margin-left:8px;border:0;align-self:center;border-radius:50%;background:transparent}
.live[data-state="on"]{background:var(--ok)}
.live[data-state="off"]{background:var(--dim)}

/* entrance */
.view>*{animation:fadeUp .6s var(--ease) both}
.view>*:nth-child(2){animation-delay:.05s}.view>*:nth-child(3){animation-delay:.1s}.view>*:nth-child(4){animation-delay:.15s}.view>*:nth-child(5){animation-delay:.2s}.view>*:nth-child(6){animation-delay:.25s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- greeting + streak ---------- */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:8px 0 18px}
.greet-wrap{min-width:0}
.greet{display:flex;align-items:baseline;font-size:36px;font-weight:700;letter-spacing:-.04em;line-height:1.08;min-width:0}
.g-hey{color:var(--muted);margin-right:.26em}
.g-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-sub{margin-top:5px;font-size:13px;font-weight:500;color:var(--dim)}
.streak-btn{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:4px 2px 4px 10px;font-size:36px;font-weight:700;letter-spacing:-.04em;line-height:1.08;color:var(--muted);font-variant-numeric:tabular-nums;transition:transform .3s var(--spring),color .3s}
.streak-btn.lit{color:var(--text)}
.streak-btn:active{transform:scale(.92)}
.streak-ic svg{width:30px;height:30px;fill:currentColor;stroke-width:1.8}

/* ---------- week strip ---------- */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;margin:0 -2px}
.wday{position:relative;display:grid;justify-items:center;gap:8px;padding:20px 0 12px;background:none;border:0;border-radius:18px;transition:transform .3s var(--spring)}
.wday:hover{background:none;border:0}
.wday:active{transform:scale(.9)}
.wday.sel{background:none;border:0}
.wn{font-size:24px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--dim);font-variant-numeric:tabular-nums;transition:color .25s}
.wl{font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--dim);transition:color .25s}
.wday.today .wn{color:var(--muted)}
.wday.sel .wn{color:var(--text)}
.wday.sel .wl{color:var(--kcal)}
.wday.sel::before{content:"";position:absolute;top:4px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--text)}
.wday.today .wn::after{display:none}
.wdots{display:flex;gap:4px;height:5px;margin-top:-2px}
.wdots b{width:5px;height:5px;background:var(--surface-3)}

/* ---------- day bar ---------- */
.daybar{position:relative;display:flex;align-items:center;gap:4px;margin:6px 0 22px;padding:5px;border-radius:999px;background:var(--surface)}
.daybar .icon-btn{width:44px;height:44px;color:var(--muted)}
.daybar .date-pill{flex:1;min-width:0;padding:2px 6px}
.date-pill .main{font-size:15px;font-weight:700;letter-spacing:-.01em}
.date-pill .sub{font-family:var(--font);font-size:12.5px;color:var(--muted)}

/* ---------- metallic hero ---------- */
.metal{
  color:#0c0c0d;
  background:
    linear-gradient(112deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.5) 31%,rgba(255,255,255,0) 43%,rgba(255,255,255,0) 57%,rgba(255,255,255,.34) 69%,rgba(255,255,255,0) 81%),
    linear-gradient(120deg,#6d6f70 0%,#a9abab 19%,#7a7c7d 37%,#bfc1c1 54%,#848687 71%,#a4a6a6 88%,#6a6c6d 100%);
}
.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:34px;min-height:230px;padding:22px 22px 22px;border-radius:36px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.28),0 26px 44px -30px rgba(0,0,0,.9)}
.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hero-l{min-width:0}
.hero-tag{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:600;color:rgba(0,0,0,.72)}
.rdot{width:10px;height:10px;border-radius:50%;background:#e5322a;box-shadow:0 0 0 2px rgba(229,50,42,.25)}
.hero-title{margin-top:8px;font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-r{text-align:right;flex-shrink:0}
.hero-num{font-size:clamp(54px,17vw,80px);font-weight:800;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums;color:#0a0a0b}
.hero-of{margin-top:8px;font-size:14.5px;font-weight:600;color:rgba(0,0,0,.62)}
.hero-note{font-size:16.5px;font-weight:500;color:rgba(0,0,0,.78);margin-bottom:12px}
.hero.over .hero-note #kcalLeft{color:#a3150e;font-weight:700}
.goal-segs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.goal-segs i{position:relative;display:block;height:8px;border-radius:99px;background:rgba(0,0,0,.2);overflow:hidden}
.goal-segs i::after{content:"";position:absolute;inset:0;width:calc(var(--p,0) * 100%);border-radius:inherit;background:#0b0b0c;transition:width 1s var(--ease)}

.actions{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;margin:14px 0 16px}
.hero.celebrate{animation:heroPulse 1.4s ease-out 2}
@keyframes heroPulse{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 3px rgba(255,255,255,.35),0 26px 60px -20px rgba(255,255,255,.35)}}

/* ---------- quiet number chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip2{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--surface);font-size:14px;color:var(--muted)}
.chip2 i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.chip2 b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.chip2 b small{margin-left:2px;font-size:12px;font-weight:500;color:var(--muted)}

/* ---------- section titles + rows ---------- */
.sec-h{margin:32px 4px 4px;font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--muted)}
.rows{display:grid}
.row{--accent:var(--text);position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:24px 4px;border-bottom:1px solid var(--border);transition:transform .3s var(--spring)}
.row:last-child{border-bottom:0}
.row.bump{transform:scale(1.012)}
.row-main{min-width:0}
.row-t{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:700;letter-spacing:-.025em}
.rdot2{width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0}
.tick{display:none;color:var(--ok)}
.row.achieved .tick{display:inline-flex}
.tick svg{width:20px;height:20px;stroke-width:3}
.row-s{margin-top:5px;font-size:16px;color:var(--muted);font-variant-numeric:tabular-nums}
.row-s .sep{color:var(--dim)}
.row-num{display:flex;align-items:baseline;gap:4px;font-size:52px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--faint);font-variant-numeric:tabular-nums;transition:color .4s}
.row-num small{font-size:15px;font-weight:600;letter-spacing:0;color:var(--dim)}
.row.achieved .row-num{color:var(--text)}
.bar{height:4px;margin-top:14px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width 1s var(--ease)}
.row-extra{grid-column:1/-1;margin-top:10px}
.water-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pill-btn{height:46px;padding:0 18px;border-radius:999px;border:0;background:var(--surface);color:var(--text);font-family:var(--font);font-size:15px;font-weight:600;transition:transform .3s var(--spring),background .2s}
.pill-btn:hover{background:var(--surface-3);border:0}
.pill-btn.alt{background:transparent;box-shadow:inset 0 0 0 1px var(--border-2);color:var(--muted)}
.water-btns .icon-btn{width:46px;height:46px;background:var(--surface);color:var(--muted)}
.water-custom{margin-top:10px}

.crea-toggle{width:60px;height:60px;border-radius:50%;border:1.5px solid var(--border-2);background:transparent;color:var(--dim);display:grid;place-items:center;transition:transform .35s var(--spring),background .3s,border-color .3s}
.crea-toggle:hover{border-color:var(--text);color:var(--text)}
.crea-toggle .ck svg{width:30px;height:30px;stroke:var(--bg);stroke-width:3}
.crea-toggle .ck path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s var(--ease) .05s}
.crea-toggle.done{background:var(--text);border-color:transparent;box-shadow:none;color:var(--bg)}
.crea-toggle.done .ck path{stroke-dashoffset:0}
.crea-row{display:flex;gap:8px;max-width:190px}
.unit-input{height:46px;border-radius:999px;background:var(--surface);border:0;padding:0 16px}
.unit-input:focus-within{box-shadow:inset 0 0 0 1px var(--border-2)}
.sq-btn{width:46px;height:46px;border-radius:50%;background:var(--surface);border:0;color:var(--text)}
.sq-btn:hover{background:var(--surface-3)}

/* ---------- meal log ---------- */
.view-log{display:none}
body[data-view="log"] .view-today{display:none}
body[data-view="log"] .view-log{display:block}
.log-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:10px 0 8px}
.sec-title{font-size:36px;font-weight:700;letter-spacing:-.04em;line-height:1.05}
.count{display:block;margin-top:4px;font-family:var(--font);font-size:15px;color:var(--muted)}
.log-head .icon-btn{width:52px;height:52px;background:var(--btn-bg);color:var(--btn-fg);border:0}
.log-head .icon-btn svg{width:24px;height:24px;stroke-width:2.4}
.meals{display:block}
.meal{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:0 14px;padding:22px 0;background:none;border:0;border-bottom:1px solid var(--border);border-radius:0}
.meal:hover{background:none;border-color:var(--border)}
.thumb{width:54px;height:54px;border-radius:17px}
.meal-body{display:grid;gap:5px;min-width:0;padding:0;text-align:left;border-radius:10px}
.meal-name{display:flex;align-items:center;gap:9px;min-width:0;font-size:22px;font-weight:700;letter-spacing:-.025em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src{padding:3px 7px;border-radius:7px;background:var(--surface-3);border:0;color:var(--muted);font-size:10px;letter-spacing:.08em}
.meal-meta{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.meal-notes{margin-top:2px;font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meal-num{font-size:52px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--faint);font-variant-numeric:tabular-nums}
.meal .del{width:40px;height:40px;color:var(--dim)}
.meal .del:hover{color:var(--danger);background:transparent}
.meal.enter{animation:mealIn .6s var(--spring) both}
.empty{margin-top:28px;padding:56px 16px;border:0;border-radius:28px;background:var(--surface);color:var(--muted);gap:8px}
.empty .eic{width:60px;height:60px;border-radius:50%;background:var(--surface-2);color:var(--muted);animation:none}
.empty b{font-size:19px;font-weight:700;color:var(--text)}
.log-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;margin-top:6px;padding:22px 2px 6px;border:0;font-size:15px;color:var(--muted)}
.lf-k{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.foot-vals b{color:var(--text);font-weight:700;font-family:var(--font)}

/* ---------- tab bar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-around;
  max-width:560px;margin:0 auto;padding:10px 14px calc(10px + var(--safe-b));
  background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border-top:1px solid var(--border)}
.tab{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:var(--dim);transition:color .2s,transform .3s var(--spring)}
.tab svg{width:30px;height:30px;stroke-width:1.65}
.tab:hover{color:var(--muted)}
.tab:active{transform:scale(.88)}
.tab.on{color:var(--text)}
.tab.on::after{content:"";position:absolute;left:50%;bottom:-1px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--text)}
.tab-scan{background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 10px 26px -10px rgba(0,0,0,.7)}
.tab-scan:hover{color:var(--btn-fg)}
.tab-scan svg{stroke-width:2.1}

/* ---------- shared controls ---------- */
.btn{height:58px;padding:0 22px;border-radius:999px;font-size:16px;font-weight:650;letter-spacing:-.005em}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg);box-shadow:none}
.btn-primary:hover{filter:none;opacity:.92}
.btn-ghost{background:var(--surface);border:0;color:var(--text)}
.btn-ghost:hover{background:var(--surface-3)}
.btn-ghost.danger{color:var(--danger-text)}
.btn-ghost.danger:hover{background:color-mix(in srgb,var(--danger) 12%,var(--surface));border:0}
.ripple{background:currentColor}
.kbd{display:none}
.link-btn{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-2)}
.icon-btn.bordered{background:var(--surface);border:0}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}

.overlay{background:var(--scrim)}
.sheet{background:var(--surface);border:0;border-radius:34px 34px 0 0;box-shadow:none;padding:18px 20px calc(24px + var(--safe-b))}
@media(min-width:640px){.sheet{border-radius:34px;padding:24px}}
.sheet-grip{width:40px;height:5px;background:var(--border-2);margin:-6px auto 18px}
.sheet-head{margin-bottom:18px}
.sheet-title{font-size:24px;font-weight:700;letter-spacing:-.03em}
.sheet-title .dot{display:none}
.sheet-head .icon-btn{background:var(--surface-2);color:var(--muted)}
.label{font-size:13px;font-weight:600;letter-spacing:0;color:var(--muted)}
.opt{color:var(--dim)}
.input{height:54px;border-radius:18px;background:var(--surface-2);border:0;font-size:17px}
.input:focus{border:0;box-shadow:inset 0 0 0 1.5px var(--border-2)}
select.input{background-color:var(--surface-2)}
.macro-box{border:0;border-radius:22px;background:var(--surface-2);padding:13px 16px 10px}
.macro-box:focus-within{border:0;box-shadow:inset 0 0 0 1.5px var(--border-2)}
.macro-box label{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.macro-box label svg{color:var(--c)}
.mi input{font-size:34px;font-weight:800;letter-spacing:-.04em}
.mi input::placeholder{color:var(--faint)}
.mi .u{font-family:var(--font);font-size:13px;font-weight:600;color:var(--dim)}
.field-row input[type=time]{font-family:var(--font)}
.recent{border:0;background:var(--surface-2);border-radius:18px}
.recent:hover{background:var(--surface-3);border:0}
.pchip{border:0;border-radius:999px;background:var(--surface-2);color:var(--muted);font-family:var(--font);font-weight:600}
.pchip.on{background:var(--btn-bg);color:var(--btn-fg);border:0}
.note{background:var(--surface-2);border:0;border-radius:20px;color:var(--muted)}
.note svg{color:var(--text)}
.warn{background:color-mix(in srgb,var(--danger) 10%,var(--surface-2));border:0;border-radius:18px}
.ai-edit{background:var(--surface-2);border:0;border-radius:22px}
.ai-edit .label{color:var(--text)}
.ask-btn{border-radius:999px;background:var(--surface-3)}
.seg{border:0;border-radius:999px;background:var(--surface-2)}
.seg button{border-radius:999px;color:var(--muted)}
.seg button[aria-checked="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:none}

/* settings: grouped, rounded sections */
.set-sec,.set-sec:first-of-type{padding:18px;margin:0 0 14px;border:0;border-radius:26px;background:var(--surface-2)}
.set-h{margin-bottom:14px;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.set-sec .macro-box{background:var(--surface-3)}
.set-sec .btn-ghost{background:var(--surface-3)}

/* scanner */
.drop{border:1.5px dashed var(--border-2);border-radius:30px;background:var(--surface-2)}
.drop:hover{border-color:var(--text)}
.drop.drag{border-color:var(--text);background:var(--surface-3)}
.drop-icon{background:var(--surface-3);color:var(--text);border-radius:50%}
.drop-laser{background:var(--kcal-2);box-shadow:0 0 10px 2px rgba(255,69,58,.6)}
.frame,.cam{border-radius:28px}
.laser{background:linear-gradient(90deg,transparent,var(--kcal-2) 15%,#fff 50%,var(--kcal-2) 85%,transparent);box-shadow:0 0 16px 3px rgba(255,69,58,.6)}
.laser::after{background:linear-gradient(0deg,rgba(255,69,58,.26),transparent)}
.grid-ov{background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px)}
.corners span{border-color:#fff}
.det{border-color:rgba(255,255,255,.85)}
.det::before{background:#fff;color:#111}
.hud-tag{color:#fff}
.scan-status{color:var(--text)}
.stamp{background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 8px 24px -6px rgba(0,0,0,.6)}
.err-icon{background:color-mix(in srgb,var(--danger) 14%,var(--surface-2));border-radius:50%}
.shutter{border-color:#fff}

/* toasts */
.toast{border:0;border-radius:999px;padding:13px 14px 13px 18px;box-shadow:0 18px 40px -16px rgba(0,0,0,.75)}
.toast .ti{color:var(--text)}
.toast.success .ti{color:var(--ok)}
.toast.error{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 55%,transparent),0 18px 40px -16px rgba(0,0,0,.75)}
.toast .tact{background:var(--btn-bg);color:var(--btn-fg);border-radius:999px;padding:7px 14px}
.toast .tact:hover{background:var(--btn-bg);opacity:.9}
.toasts{top:calc(10px + var(--safe-t))}

/* login */
.login{border-radius:34px;padding:34px 24px 26px}
.login-logo{width:76px;height:76px;margin:0 auto 4px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 18px 36px -18px rgba(0,0,0,.8)}
.login-logo svg{width:36px;height:36px;stroke:#0c0c0d;fill:rgba(0,0,0,.12);stroke-width:2}
.login .input{text-align:center}

/* admin */
.a-logo{background:linear-gradient(120deg,#6d6f70,#bfc1c1 50%,#7a7c7d);box-shadow:none;border-radius:50%}
.a-card{border:0;border-radius:28px}
.a-user{border:0}
.a-avatar,.avatar{color:#0c0c0d}
.avatar{box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}

@media(min-width:600px) and (max-width:899px){
  .app{padding-left:32px;padding-right:32px}
}
@media(max-width:359px){
  .greet,.streak-btn{font-size:30px}
  .hero{padding:18px}
  .hero-title{font-size:27px}
  .row-num,.meal-num{font-size:42px}
  .tab{width:50px;height:50px}
}
@media(max-height:520px){
  .tabbar{padding-top:6px;padding-bottom:calc(6px + var(--safe-b))}
  .tab{height:46px}
  .hero{min-height:180px}
}

/* rows: title + sub on the left, numeral on the right, bar across the full width */
.row-main{display:contents}
.row-t{grid-column:1;grid-row:1;align-self:end}
.row-s{grid-column:1;grid-row:2;align-self:start;font-size:15.5px}
.row-num,.row>.crea-toggle{grid-column:2;grid-row:1/3;align-self:center;justify-self:end}
.row-num{font-size:46px}
.bar{grid-column:1/-1;grid-row:3;margin-top:12px}
.row-extra{grid-row:4}

/* meal rows: columns follow what's present (thumbnail optional) */
.meal{grid-template-columns:minmax(0,1fr) auto auto;gap:0 10px}
.meal:has(.thumb){grid-template-columns:auto minmax(0,1fr) auto auto}
.meal:has(.thumb) .thumb{margin-right:4px}
.meal-num{font-size:42px}
.meal-meta{display:flex;flex-wrap:wrap;gap:2px 11px;font-size:14.5px}
.meal-meta span{white-space:nowrap}
.meal-meta span:first-child{color:var(--dim)}
.meal .del{width:36px;height:36px;margin-right:-6px}
.log-head .icon-btn.bordered{background:var(--btn-bg);color:var(--btn-fg)}
.ai-edit .input{background:var(--surface-3)}
.set-sec .input,.set-sec select.input{background:var(--surface-3)}



/* phone/tablet: Scan and Quick add live in the tab bar and the Log page, so the Today buttons go */
@media(max-width:899px){.actions{display:none}}
@media(max-width:899px){
  .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
  .chip2{justify-content:flex-start;min-width:0;padding:12px 14px;border-radius:18px}
  .chip2 b{margin-left:auto}
}

/* phone: Settings and the Board are pages that sit above the tab bar, not pop-ups */
@media(max-width:899px){
  .overlay.page{inset:0 0 calc(78px + var(--safe-b)) 0;z-index:40;align-items:stretch;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;transition:none}
  .overlay.page.open{transition:none}
  .overlay.page .sheet{max-width:none;width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none;background:var(--bg);transform:none;transition:none;padding:calc(16px + var(--safe-t)) calc(20px + var(--safe-r)) 24px calc(20px + var(--safe-l))}
  .overlay.page .sheet-grip,.overlay.page [data-close],.overlay.page .sheet>.btn-primary{display:none}
  .overlay.page .sheet-title{font-size:36px;letter-spacing:-.04em;line-height:1.05}
  .overlay.page .sheet-head{margin:8px 0 18px}
}

/* ---------- settings: grouped rows like a native preferences screen ---------- */
.set-hero{display:grid;gap:6px;justify-items:center;text-align:center;margin:0 0 6px;padding:30px 20px;border-radius:34px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 22px 40px -30px rgba(0,0,0,.9)}
.set-hero b{font-size:30px;font-weight:700;letter-spacing:-.03em}
.set-hero span{font-size:15px;font-weight:600;color:rgba(0,0,0,.66)}
.set-grp{margin:26px 6px 10px;font-size:15px;font-weight:600;color:var(--muted)}
.set-grp #targetsFor{color:var(--dim);font-weight:500}
.set-card{border-radius:28px;background:var(--surface-2);overflow:hidden}
.sheet .set-card{background:var(--surface-2)}
.overlay.page .set-card{background:var(--surface)}
.set-row{display:flex;align-items:center;gap:14px;width:100%;min-height:62px;padding:12px 18px;text-align:left;color:var(--text);font-size:17px;font-weight:600;letter-spacing:-.01em;background:none;border:0;border-radius:0;cursor:pointer}
.set-row+.set-row{box-shadow:inset 0 1px 0 var(--border)}
.set-ic{display:grid;place-items:center;flex:0 0 auto;width:28px;color:var(--muted)}
.set-ic svg{width:24px;height:24px;stroke-width:1.7}
.set-lbl{flex:1;min-width:0}
.set-val{display:inline-flex;align-items:baseline;gap:6px;color:var(--muted);font-weight:500}
.set-val.dim{font-size:13.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.set-val input{width:92px;padding:0;border:0;background:none;text-align:right;color:var(--muted);font:inherit;font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;outline:none;-moz-appearance:textfield}
.set-val input::-webkit-outer-spin-button,.set-val input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.set-val input:focus{color:var(--text)}
.set-val i{font-style:normal;font-size:15px;color:var(--dim)}
.set-row:has(input):focus-within{background:var(--surface-3)}
.set-chev{display:grid;color:var(--dim)}
.set-chev svg{width:20px;height:20px;stroke-width:2.2}
.set-link:hover{background:var(--surface-3)}
.set-link.danger,.set-link.danger .set-ic{color:var(--danger-text)}
.set-stack{flex-wrap:wrap}
.set-stack .seg{flex:1 0 100%;margin:2px 0 4px}
.set-note{margin:10px 8px 0;font-size:13px;line-height:1.4;color:var(--dim)}
.set-note:empty{display:none}
.set-last{margin-top:20px}
.set-done{margin-top:20px}
.overlay.page .set-done{display:none}
.overlay.page .set-hero{margin-top:4px}
.set-row[hidden],.set-note[hidden]{display:none}

/* profile editor + banner hero */
.set-hero{position:relative;background-size:cover;background-position:center;overflow:hidden}
.set-hero.has-banner{color:#fff;padding-top:36px;padding-bottom:30px}
.set-hero.has-banner span{color:rgba(255,255,255,.82)}
.set-logo{display:grid;place-items:center;width:72px;height:72px;margin-bottom:6px;border-radius:50%;background-color:var(--pc,#888);background-size:cover;background-position:center;
  font-size:30px;font-weight:800;color:#0c0c0d;box-shadow:0 0 0 3px rgba(255,255,255,.7),0 10px 24px -10px rgba(0,0,0,.7)}
.set-hero span.set-logo,.set-hero.has-banner span.set-logo{color:#0c0c0d}
.set-val input.txt{width:150px;max-width:44vw}
.art-prev{flex:0 0 auto;background-color:var(--surface-3);background-size:cover;background-position:center}
.art-prev.round{width:40px;height:40px;border-radius:50%}
.art-prev.wide{width:72px;height:28px;border-radius:9px}
.art-btn{flex:0 0 auto;height:34px;padding:0 14px;border:0;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:inherit;font-size:14px;font-weight:600}
.art-btn.rm{background:var(--surface-3);color:var(--danger-text)}
.art-btn[hidden]{display:none}
.set-row .set-lbl{white-space:nowrap}

/* tour: spotlight + callout over the real controls */
.tour{position:fixed;inset:0;z-index:300}
.tour[hidden]{display:none}
.tour-spot{position:fixed;border-radius:26px;box-shadow:0 0 0 9999px rgba(0,0,0,.76),0 0 0 2px rgba(255,255,255,.9);pointer-events:none;
  transition:left .4s var(--ease),top .4s var(--ease),width .4s var(--ease),height .4s var(--ease),opacity .25s}
.tour-card{position:fixed;padding:20px 20px 16px;border-radius:26px;background:var(--surface);color:var(--text);box-shadow:0 24px 60px -16px rgba(0,0,0,.8);
  border:1px solid var(--border-2);transition:left .4s var(--ease),top .4s var(--ease)}
.tour-step{font-size:12.5px;font-weight:600;color:var(--dim)}
.tour-title{margin:4px 0 6px;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.tour-text{font-size:15px;line-height:1.45;color:var(--muted)}
.tour-dots{display:flex;gap:6px;margin:14px 0 14px}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--surface-3);transition:width .25s,background .25s}
.tour-dots i.on{width:18px;border-radius:99px;background:var(--text)}
.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tour-nav{display:flex;gap:8px}
.tour button{font:inherit;font-weight:600;border:0;cursor:pointer}
.tour-skip{padding:10px 4px;background:none;color:var(--muted);font-size:14.5px;text-decoration:underline;text-underline-offset:3px}
.tour-back{height:42px;padding:0 16px;border-radius:999px;background:var(--surface-3);color:var(--text);font-size:15px}
.tour-back[hidden]{display:none}
.tour-next{height:42px;padding:0 22px;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font-size:15px}

/* scan model picker */
.tier{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0}
.tier[hidden]{display:none}
.tier button{display:grid;gap:2px;justify-items:start;text-align:left;padding:12px 14px;border:0;border-radius:18px;background:var(--surface-2);color:var(--text);font:inherit;cursor:pointer;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s,background .2s}
.tier button b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.tier button span{font-size:12.5px;color:var(--muted)}
.tier button[aria-checked="true"]{box-shadow:inset 0 0 0 1.5px var(--text);background:var(--surface-3)}
.tier button:disabled{opacity:.5;cursor:not-allowed}

/* reminders */
.rem-time{width:auto;padding:6px 10px;border:0;border-radius:12px;background:var(--surface-3);color:var(--text);font:inherit;font-size:16px;font-weight:600}
.rem-on{flex:0 0 auto;width:44px;height:26px;margin:0 0 0 4px;appearance:none;-webkit-appearance:none;border-radius:999px;background:var(--surface-3);position:relative;cursor:pointer;transition:background .2s}
.rem-on::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .25s}
.rem-on:checked{background:var(--ok)}
.rem-on:checked::after{transform:translateX(18px)}
#remSlots[hidden]{display:none}

/* =====================================================================
   Comfort pass: more air, real cards, fewer competing elements
   ===================================================================== */
:root{--gap:16px}

/* header + navigation: calmer, less stacked chrome */
.top{margin:6px 0 10px}
.g-sub{margin-top:6px;font-size:14px}
.week{margin:0 -2px 6px}
.wday{padding:10px 0 8px;gap:9px}
.wday.sel::before{display:none}
.wn{font-size:23px}
.wl{font-size:14px}
.daybar{margin:6px 0 22px;padding:4px;background:transparent;border-radius:0}
.daybar .date-pill{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:4px 8px}
.daybar .date-pill .main{font-size:17px}
.daybar .icon-btn{width:44px;height:44px;border-radius:50%;background:var(--surface)}
.daybar .icon-btn:hover{background:var(--surface-2)}
@media(max-width:899px){
  .daybar #prevDay,.daybar #nextDay{display:none}   /* swipe or tap the week strip to change day */
  .daybar{justify-content:space-between}
  .daybar .date-pill{flex:1}
}

/* hero: roomier, less empty slab */
.hero{min-height:210px;padding:24px;gap:26px}
.hero-title{font-size:30px}
.hero-note{margin-bottom:14px}
.actions{margin:16px 0 18px}

/* stats: one calm card with three columns instead of six pills */
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:14px;padding:6px 0;border-radius:26px;background:var(--surface)}
.chip2{flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px;border-radius:0;background:none;font-size:13px;color:var(--muted);position:relative;min-width:0}
.chip2 i{position:absolute;top:19px;right:18px;width:8px;height:8px}
.chip2 .k{order:1;font-weight:500}
.chip2 b{order:2;margin-left:0!important;font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.chip2 b small{font-size:12.5px;font-weight:500}
.chip2:nth-child(n+4){box-shadow:inset 0 1px 0 var(--border)}
.chip2:not(:nth-child(3n+1)){box-shadow:inset 1px 0 0 var(--border)}
.chip2:nth-child(n+4):not(:nth-child(3n+1)){box-shadow:inset 1px 0 0 var(--border),inset 0 1px 0 var(--border)}

/* targets: each one is its own card */
.sec-h{margin:34px 6px 14px;font-size:24px}
.rows{gap:14px}
.row{padding:22px 22px 20px;border:0;border-radius:28px;background:var(--surface)}
.row:last-child{border:0}
.row-t{font-size:20px}
.row-s{margin-top:2px;font-size:15px}
.row-num{font-size:46px;color:var(--text)}
.row-num small{font-size:15px}
.row:not(.achieved) .row-num{color:var(--text)}
.bar{height:6px;margin-top:18px}
.row-extra{margin-top:18px}
.water-btns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 46px;gap:8px}
.water-btns .pill-btn{height:46px;padding:0;min-width:0;background:var(--surface-2)}
.water-btns .pill-btn.alt{background:transparent}
.water-btns .icon-btn{width:46px;height:46px;background:var(--surface-2)}
.crea-row{max-width:220px}

/* meals: cards with the calories on the right, names get to wrap */
.log-head{margin:14px 0 16px}
.meals{display:grid;gap:12px}
.meal{grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:18px 18px 16px;border:0;border-radius:24px;background:var(--surface);align-items:start}
.meal:has(.thumb){grid-template-columns:auto minmax(0,1fr) auto}
.meal:hover{background:var(--surface)}
.meal-body{gap:8px}
.meal-name{white-space:normal;overflow:visible;font-size:19px;line-height:1.22}
.meal-meta{gap:2px 12px;font-size:14px}
.meal-kcal{display:grid;justify-items:end;gap:0;line-height:1}
.meal-kcal b{font-size:26px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.meal-kcal small{margin-top:3px;font-size:12px;color:var(--muted)}
.meal-num{display:none}
.meal .del{grid-column:-1;grid-row:2;justify-self:end;width:36px;height:36px;margin:0 -8px -6px 0}
.meal:has(.thumb) .del{grid-column:3}
.log-foot{margin-top:14px;padding:20px 22px;border-radius:24px;background:var(--surface)}
.empty{padding:64px 20px}

/* shared */
.set-grp{margin:30px 8px 12px}
.set-row{min-height:66px;padding:14px 20px}
.btn{height:60px}
@media(max-width:899px){.app{padding-left:calc(22px + var(--safe-l));padding-right:calc(22px + var(--safe-r))}}

/* desktop layout (kept last so it wins over the generic rules above) */
/* ---------- desktop: left rail + dashboard grid ---------- */
.brand{display:none}
@media(min-width:900px){
  body:has(#tabbar){padding-left:var(--rail,88px)}
  /* left rail replaces the bottom tab bar */
  .tabbar{left:0;right:auto;top:0;bottom:0;width:var(--rail,88px);max-width:none;margin:0;transform:none;
    flex-direction:column;justify-content:flex-start;gap:10px;padding:26px 0 24px;
    border:0;border-right:1px solid var(--border);border-radius:0;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .brand{display:grid;place-items:center;width:46px;height:46px;margin-bottom:22px;border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
  .brand svg{width:22px;height:22px;stroke:#0c0c0d;fill:rgba(0,0,0,.12);stroke-width:2}
  .tab{width:52px;height:52px}
  .tab svg{width:26px;height:26px}
  .tab[data-view="log"]{display:none}
  .tab.on::after{display:none}
  .tab:not(.tab-scan):hover{background:var(--surface);color:var(--text)}
  #openSettings{margin-top:auto}

  /* dashboard grid: header across, week + day bar, then Today | Log */
  .app:not(.admin){display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,29vw,420px);column-gap:clamp(32px,3.4vw,56px);align-content:start;max-width:1560px;margin:0 auto;padding:30px clamp(28px,3.6vw,56px) 48px}
  .top{grid-column:1/-1;align-items:center;margin:0 0 20px}
  .greet{font-size:44px}
  .streak-btn{font-size:40px;padding:8px 16px;border-radius:999px;background:var(--surface)}
  .streak-btn:hover{background:var(--surface-2)}
  .streak-ic svg{width:30px;height:30px}
  .week{grid-column:1;grid-row:2;gap:10px;margin:0 0 20px}
  .wday{gap:5px;padding:13px 0 10px;border-radius:22px;background:var(--surface);transition:transform .3s var(--spring),background .2s}
  .wday:hover{background:var(--surface-2)}
  .wday.sel{background:var(--surface-3)}
  .wday.sel::before{display:none}
  .wn{font-size:26px}
  .wl{font-size:14px}
  .daybar{grid-column:2;grid-row:2;align-self:start;margin:0 0 20px;height:77px;padding:6px;background:var(--surface);border-radius:26px}
  .daybar .icon-btn{width:60px;height:100%;border-radius:20px}
  .daybar .icon-btn:hover{background:var(--surface-2);color:var(--text)}
  .daybar .date-pill{height:100%;border-radius:20px}
  .daybar .date-pill:hover{background:var(--surface-2)}
  .date-pill .main{font-size:18px}
  .date-pill .sub{font-size:14px}

  .views{display:contents}
  body[data-view="today"] .view-today,body[data-view="today"] .view-log,body[data-view="log"] .view-today,body[data-view="log"] .view-log{display:block}
  .view-today{grid-column:1;grid-row:3;container-type:inline-size;min-width:0}

  .hero{min-height:192px;padding:22px 28px;gap:14px}
  .hero-tag{font-size:18px}
  .hero-title{font-size:34px}
  .hero-num{font-size:clamp(60px,15cqw,112px)}
  .hero-note{font-size:17.5px}
  .actions{grid-template-columns:1.35fr 1fr;margin:14px 0 12px}
  .view-today .btn{height:56px}
  .sec-h{margin:22px 4px 12px;font-size:20px}

  /* meal log: sticky card that scrolls inside */
  .view-log{container-type:inline-size;container-name:log;grid-column:2;grid-row:3;position:sticky;top:28px;align-self:start;display:flex!important;flex-direction:column;
    max-height:calc(100vh - 56px);padding:26px 24px 14px;border-radius:32px;background:var(--surface)}
  .log-head{margin:0 0 6px}
  .sec-title{font-size:30px}
  .log-head .icon-btn{width:48px;height:48px}
  .meals{flex:1;min-height:0;overflow-y:auto;margin:0 -10px;padding:0 10px;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
  .meal{padding:18px 0}
  .meal:last-child{border-bottom:0}
  .meal-name{font-size:19px}
  .meal-meta{font-size:14px}
  .meal-num{font-size:38px}
  .empty{background:var(--surface-2);margin-top:14px;padding:44px 16px}
  .log-foot{margin-top:0;padding:16px 0 8px;border-top:1px solid var(--border-2)}
  .lf-k{font-size:17px}
  .foot-vals{font-size:14px}
}
/* three target cards side by side whenever the Today column is wide enough */
@container (min-width:620px){
  .rows{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .row{grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:0 10px;padding:18px 18px 18px;border:0;border-radius:28px;background:var(--surface)}
  .row:last-child{border:0}
  .row-t{grid-column:1;grid-row:1;font-size:19px;align-self:center}
  .row-num{grid-column:1/-1;grid-row:2;justify-self:start;align-self:start;margin-top:12px;font-size:54px}
  .row>.crea-toggle{grid-column:2;grid-row:1;width:44px;height:44px;align-self:center}
  .crea-toggle .ck svg{width:22px;height:22px}
  .row-s{grid-column:1/-1;grid-row:3;margin-top:8px;font-size:14.5px;align-self:start}
  .bar{grid-column:1/-1;grid-row:4;margin-top:14px}
  .row-extra{grid-column:1/-1;grid-row:5;margin-top:14px}
  .pill-btn{height:40px;padding:0 14px;font-size:14px;background:var(--surface-2)}
  .water-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .water-btns .pill-btn{padding:0;min-width:0}
  #waterCustomBtn{grid-column:1/3}
  .water-btns .icon-btn{width:100%;height:40px;border-radius:999px;background:var(--surface-2)}
  .unit-input,.sq-btn{background:var(--surface-2)}
  .crea-row{max-width:none}
}
@container log (max-width:400px){
  .meal-num{font-size:28px}
  .meal .del{margin-right:-4px}
  .meal-meta{gap:2px 9px;font-size:13.5px}
}

@media(min-width:900px){
  .view-log .meals{gap:10px}
  .view-log .meal{background:var(--surface-2);padding:16px 18px 14px}
  .view-log .log-foot{background:none;padding:16px 4px 6px;border-radius:0}
  .chips{margin-top:16px}
}

/* card polish */
.row .unit-input,.row .sq-btn{background:var(--surface-2)}
.row .unit-input{min-width:120px}
@media(max-width:899px){
  .row-num{font-size:40px}
  .row-s{font-size:14.5px}
}

/* meal card grid fix: body spans both rows, kcal top-right, delete bottom-right */
.meal .del{grid-column:2;grid-row:2;align-self:end}
.meal:has(.thumb) .del{grid-column:3}
.meal .meal-body{grid-row:1/3}
.meal:has(.thumb) .thumb{grid-row:1/3}
.meal-kcal{grid-row:1}
.meal:has(.thumb) .meal-kcal{grid-column:3}

/* =====================================================================
   Simple pass: say what things are, show only what matters
   ===================================================================== */

/* bottom bar: icons WITH words */
.tabbar{align-items:flex-start;padding-top:8px}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:68px;height:58px;border-radius:16px}
.tab svg{width:26px;height:26px}
.tab::before{content:attr(data-label);order:2;font-size:11.5px;font-weight:600;letter-spacing:0;line-height:1}
.tab.on::after{display:none}
.tab.on{color:var(--text)}
.tab-scan{background:none;box-shadow:none;color:var(--text)}
.tab-scan:hover{color:var(--text)}
.tab-scan svg{box-sizing:content-box;width:24px;height:24px;padding:8px;margin-top:-6px;border-radius:50%;background:var(--btn-bg);stroke:var(--btn-fg);stroke-width:2.1}
.tab-scan::before{margin-top:-2px}
.overlay.page{inset:0 0 calc(84px + var(--safe-b)) 0}
@media(min-width:900px){
  .tab{width:72px;height:62px}
  .tabbar{gap:6px}
  .tab-scan svg{margin-top:0}
}

/* week strip: just the days */
.wdots{display:none}
.wday{gap:6px;padding:10px 0 6px}

/* calories: one number, one bar, plain words */
#goalTxt,.hero-note .sep{display:none}
.goal-segs{grid-template-columns:1fr}
.goal-segs i:not(:first-child){display:none}
.goal-segs i{height:10px}
.hero-note{font-size:17px;font-weight:600}

/* macros: only fat and carbs (protein has its own card below) */
.chips{grid-template-columns:repeat(2,minmax(0,1fr))}
.chip2:nth-child(n+3){display:none}
.chip2{box-shadow:none!important}
.chip2:nth-child(2){box-shadow:inset 1px 0 0 var(--border)!important}
.chips{padding:2px 0}

/* goals: say how much of the goal, nothing else */
#proteinCard .sep,#waterCard .sep,#proLeft,#waterPct{display:none}
#waterSub,#proSub{font-size:15px}
.crea-row{display:none}
.row-extra:has(.crea-row){display:none}
.sec-h{font-size:22px}

/* big round scan button again (icon only) */
.tabbar{align-items:center}
.tab-scan{width:64px;height:64px;margin-top:-6px;border-radius:50%;background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 10px 26px -10px rgba(0,0,0,.7)}
.tab-scan:hover{color:var(--btn-fg)}
.tab-scan::before{display:none}
.tab-scan svg,.tabbar .tab-scan svg{box-sizing:border-box;width:32px;height:32px;padding:0;margin:0;background:none;border-radius:0;stroke:var(--btn-fg);stroke-width:2.1}
@media(min-width:900px){.tab-scan{width:58px;height:58px;margin-top:0}.tab-scan svg{width:28px;height:28px}}

/* profile page: gear top right, back arrow in settings */
.head-btns{display:flex;gap:8px;align-items:center}
.back-btn{display:none;margin-right:6px}
#settingsModal .back-btn{display:inline-grid}
#settingsModal .sheet-head{justify-content:flex-start}
#settingsModal .sheet-head .sheet-title{flex:1}
.overlay.page .head-btns [data-close]{display:none}
.overlay.page #profileSettingsBtn{background:var(--surface);color:var(--text)}

/* =====================================================================
   Profile page (days, stats, records, consistency)
   ===================================================================== */
.pf-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 18px}
.pf-handle{font-size:22px;font-weight:600;letter-spacing:-.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf .icon-btn{background:none;color:var(--text);width:44px;height:44px}
.pf .icon-btn svg{width:26px;height:26px;stroke-width:1.7}
.pf .icon-btn:hover{background:var(--surface)}
.overlay.page .pf .head-btns [data-close]{display:none}
.overlay.page .pf-top{margin-top:calc(2px + var(--safe-t))}
.overlay.page .sheet.pf{padding-top:12px}

.pf-banner{display:none;height:120px;margin:0 0 18px;border-radius:26px;background-size:cover;background-position:center;background-color:var(--surface)}
.pf-banner.has-banner{display:block}
.pf-head{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.pf-avatar{flex:0 0 auto;width:92px;height:92px;font-size:38px;margin:0;box-shadow:none}
.pf-id{min-width:0;flex:1}
.pf-name{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-stats{display:flex;gap:22px}
.pf-stats>div{display:grid;gap:3px;min-width:0}
.pf-stats b{font-size:19px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pf-stats span{font-size:13px;color:var(--dim);white-space:nowrap}

.pf-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.pf-act{display:flex;align-items:center;justify-content:center;gap:12px;height:64px;border:0;border-radius:22px;background:var(--surface);color:var(--text);font:inherit;font-size:17px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s var(--spring)}
.pf-act:hover{background:var(--surface-2)}
.pf-act:active{transform:scale(.97)}
.pf-act svg{width:26px;height:26px;stroke-width:1.7}
.pf-edit{margin:0 0 22px}
.pf-edit .set-card{background:var(--surface)}

.pf-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border);margin:0 -2px 18px}
.pf-tab{display:grid;place-items:center;height:56px;border:0;background:none;color:var(--dim);position:relative;cursor:pointer}
.pf-tab svg{width:28px;height:28px;stroke-width:1.6}
.pf-tab[aria-selected="true"]{color:var(--text)}
.pf-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--text);border-radius:3px}

.pf-cards{display:flex;gap:12px;overflow-x:auto;margin:0 -22px;padding:0 22px 8px;scroll-snap-type:x proximity;scrollbar-width:none}
.pf-cards::-webkit-scrollbar{display:none}
.pf-day{flex:0 0 150px;display:grid;gap:8px;align-content:start;padding:16px;border:0;border-radius:22px;background:var(--surface);color:var(--text);text-align:left;font:inherit;cursor:pointer;scroll-snap-align:start;transition:background .2s}
.pf-day:hover{background:var(--surface-2)}
.pf-day-l{font-size:14px;color:var(--muted);letter-spacing:.02em}
.pf-day-n{font-size:30px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.pf-day-n small{margin-left:4px;font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0}
.pf-day-bar{height:5px;border-radius:9px;background:var(--surface-3);overflow:hidden}
.pf-day-bar i{display:block;height:100%;background:var(--kcal);border-radius:inherit}
.pf-day-m{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pf-day-f{font-size:12.5px;color:var(--dim)}

.pf-chart,.pf-card{padding:20px;border-radius:26px;background:var(--surface)}
.pf-chart{margin-bottom:6px}
.pf-chart-top{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-bottom:14px}
.pf-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2)}
.pf-seg button{height:32px;padding:0 13px;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.pf-seg button[aria-checked="true"]{background:var(--btn-bg);color:var(--btn-fg)}
.pf-big{display:flex;align-items:baseline;gap:8px}
.pf-big b{font-size:34px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pf-big small{font-size:15px;color:var(--muted)}
.pf-big em{font-style:normal;font-size:13px;font-weight:700;padding:3px 9px;border-radius:9px}
.pf-big em.up{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.pf-big em.down{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger-text)}
.pf-big em[hidden]{display:none}
.pf-range{margin:4px 0 8px;font-size:13.5px;color:var(--dim)}
.pf-svg svg{display:block;width:100%;height:auto;overflow:visible}
.pf-svg text{font-size:10px;fill:var(--dim);font-family:var(--font)}
.pf-svg .g{stroke:var(--border);stroke-width:1}
.pf-svg .ln{fill:none;stroke:var(--c);stroke-width:2.5;stroke-linecap:round}
.pf-svg .dot{fill:var(--bg);stroke:var(--c);stroke-width:3}
.pf-svg .tip rect{fill:var(--surface-3)}
.pf-svg .tip .tv{font-size:12px;font-weight:700;fill:var(--text)}
.pf-svg .tip .tu{font-size:9px;fill:var(--muted)}

.pf-h{margin:26px 4px 12px;font-size:22px;font-weight:700;letter-spacing:-.025em}
.pf-card{display:grid;gap:0}
.pf-rec{display:flex;align-items:center;gap:14px;padding:14px 0}
.pf-rec+.pf-rec{box-shadow:inset 0 1px 0 var(--border)}
.pf-rec:first-child{padding-top:0}.pf-rec:last-child{padding-bottom:0}
.pf-rec-ic{display:grid;place-items:center;flex:0 0 auto;width:54px;height:54px;border-radius:50%;background:var(--surface-3);color:var(--text)}
.pf-rec-ic svg{width:26px;height:26px;stroke-width:1.7}
.pf-rec-t{display:grid;gap:3px;min-width:0}
.pf-rec-t b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.pf-rec-t span{font-size:14px;color:var(--muted)}
.pf-rec .new{font-style:normal;margin-left:6px;padding:2px 8px;border-radius:99px;background:var(--btn-bg);color:var(--btn-fg);font-size:10.5px;font-weight:800;letter-spacing:.06em;vertical-align:middle}
.pf-empty{margin:0;color:var(--muted);font-size:15px}

.pf-cons-top b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em}
.pf-cons-top span{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.pf-heat{display:flex;gap:10px;margin-top:16px}
.pf-heat .rows{display:grid;grid-template-rows:repeat(7,1fr);padding-top:18px;gap:4px}
.pf-heat .rows span{font-size:10.5px;color:var(--dim);display:flex;align-items:center;height:16px}
.pf-heat .grid{flex:1;min-width:0}
.pf-heat .months{display:grid;grid-template-columns:repeat(13,1fr);height:16px;margin-bottom:2px}
.pf-heat .months span{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:visible}
.pf-heat .cols{display:grid;grid-template-columns:repeat(13,1fr);gap:4px}
.pf-heat .c{display:grid;grid-template-rows:repeat(7,16px);gap:4px}
.pf-heat i{display:block;border-radius:5px;background:var(--surface-3)}
.pf-heat i.x{background:none}
.pf-heat i.l1{background:color-mix(in srgb,var(--text) 32%,var(--surface-3))}
.pf-heat i.l2{background:color-mix(in srgb,var(--text) 62%,var(--surface-3))}
.pf-heat i.l3{background:var(--text)}

.pf-pill{position:sticky;bottom:12px;display:flex;align-items:center;gap:16px;width:100%;margin-top:22px;padding:14px 16px;border:0;border-radius:999px;background:color-mix(in srgb,var(--surface-2) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--text);text-align:left;font:inherit;cursor:pointer;box-shadow:0 12px 30px -14px rgba(0,0,0,.7)}
.pf-ring{--v:0;display:grid;place-items:center;flex:0 0 auto;width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--text) calc(var(--v) * 360deg),var(--surface-3) 0);position:relative}
.pf-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface-2)}
.pf-ring b{position:relative;font-size:14px;font-weight:600}
.pf-pill-t{display:grid;gap:3px;flex:1;min-width:0}
.pf-pill-t b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.pf-pill-t span{font-size:15px;color:var(--muted)}
.pf-pill-go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface-3)}
.pf-pill-go svg{width:20px;height:20px}
@media(min-width:900px){.pf-cards{margin:0;padding:0 0 8px}}
.pf-day{flex-basis:172px}
.pf-day-m{font-size:12px;white-space:nowrap}
.sheet.pf{padding-bottom:40px}

/* day cards: two fit on screen, the third peeks in; no clipping at the edges */
.pf-cards{margin:0;padding:0 0 10px;gap:12px;scroll-snap-type:x mandatory}
.pf-day{flex:0 0 calc(50% - 6px);min-width:150px;padding:18px 16px 16px;gap:10px}
.pf-day-n{font-size:28px}
.pf-day-m{display:flex;gap:10px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.pf-day-m b{color:var(--text);font-weight:600;margin-right:3px;font-variant-numeric:tabular-nums}
.pf-day-bar{height:6px}
.pf-day-f{font-size:13px}
@media(min-width:900px){.pf-cards{margin:0;padding:0 0 10px}}

/* =====================================================================
   Gym front page
   ===================================================================== */

.gym-card{position:relative;display:flex;flex-direction:column;gap:18px;min-height:340px;padding:24px;border-radius:36px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.28),0 26px 44px -30px rgba(0,0,0,.9)}
.gym-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gym-tag{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:600;color:rgba(0,0,0,.72)}
.gym-card.on .rdot{animation:gymPulse 1.6s ease-in-out infinite}
@keyframes gymPulse{50%{box-shadow:0 0 0 7px rgba(229,50,42,.0),0 0 0 2px rgba(229,50,42,.45)}}
.gym-weeknote{font-size:13.5px;font-weight:600;color:rgba(0,0,0,.6);text-align:right}
.gym-main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px}
.gym-ask{font-size:38px;font-weight:800;letter-spacing:-.045em;line-height:1.05;color:#0a0a0b}
.gym-ask[hidden],.gym-timer[hidden]{display:none}
.gym-timer{font-size:clamp(64px,22vw,96px);font-weight:800;letter-spacing:-.06em;line-height:.95;font-variant-numeric:tabular-nums;color:#0a0a0b}
.gym-sub{font-size:16.5px;font-weight:500;color:rgba(0,0,0,.72)}
.gym-btn{height:68px;border:0;border-radius:999px;background:#0b0b0c;color:#fff;font:inherit;font-size:20px;font-weight:700;letter-spacing:-.01em;cursor:pointer;box-shadow:0 14px 28px -14px rgba(0,0,0,.7);transition:transform .25s var(--spring),opacity .2s}
.gym-btn:active{transform:scale(.97)}
.gym-btn:disabled{opacity:.6}
.gym-card.on .gym-btn{background:var(--kcal);color:#fff}

.gym-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:18px 0 4px}
.gd{display:grid;justify-items:center;gap:8px}
.gd i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--surface);color:var(--btn-fg)}
.gd i svg{width:20px;height:20px;stroke-width:3}
.gd.on i{background:var(--text)}
.gd.today i{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--border-2)}
.gd.on.today i{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--text)}
.gd b{font-size:13px;font-weight:600;color:var(--dim)}
.gd.today b{color:var(--text)}

.gym-list{gap:0;padding:6px 20px}
.gym-row{display:flex;align-items:center;gap:14px;padding:14px 0}
.gym-row+.gym-row{box-shadow:inset 0 1px 0 var(--border)}
.gym-row .avatar{width:44px;height:44px;flex:0 0 auto;font-size:18px}
.gym-row-t{display:grid;gap:3px;flex:1;min-width:0}
.gym-row-t b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.gym-row-t span{font-size:14px;color:var(--muted)}
.gym-dur{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.gym-del{width:36px;height:36px;background:none;color:var(--dim)}
.gym-del:hover{color:var(--danger);background:none}
.gym-live{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(95,214,138,.6);animation:gymLive 2s infinite}
@keyframes gymLive{70%{box-shadow:0 0 0 9px rgba(95,214,138,0)}100%{box-shadow:0 0 0 0 rgba(95,214,138,0)}}
.gym-list .pf-empty{padding:14px 0}
.gym-share{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:18px 20px;border-radius:24px;background:var(--surface);font-size:15.5px;font-weight:500}
.gym-share span{flex:1}


/* profile: type directly, icons over the pictures */
.pf-handle-wrap{display:flex;align-items:center;gap:2px;min-width:0;flex:1;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--muted)}
.pf-handle-in,.pf-name-in{min-width:0;width:100%;padding:6px 8px;margin:-6px 0 -6px -8px;border:0;border-radius:12px;background:transparent;color:var(--text);font:inherit;font-weight:inherit;letter-spacing:inherit;outline:none;transition:background .2s,box-shadow .2s}
.pf-handle-in:hover,.pf-name-in:hover{background:var(--surface)}
.pf-handle-in:focus,.pf-name-in:focus{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--border-2)}
.pf-handle-in::placeholder,.pf-name-in::placeholder{color:var(--dim)}
.pf-name-in{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.pf-banner{display:block;position:relative;height:120px;margin:0 0 18px}
.pf-banner:not(.has-banner){background:var(--surface)}
.pf-avatar-wrap{position:relative;flex:0 0 auto}
.pf-cam{position:absolute;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(18,18,18,.72);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;box-shadow:0 6px 16px -6px rgba(0,0,0,.6);transition:transform .2s var(--spring),background .2s}
.pf-cam:hover{background:rgba(18,18,18,.9)}
.pf-cam:active{transform:scale(.92)}
.pf-cam svg{width:22px;height:22px;stroke-width:1.9}
.pf-banner .pf-cam{top:12px;right:12px}
.pf-banner .pf-cam.rm{right:62px}
.pf-cam.sm{width:34px;height:34px;right:-4px;bottom:-2px;border:2px solid var(--bg)}
.pf-cam.sm svg{width:17px;height:17px}
.pf-cam.sm.rm{right:auto;left:-4px;bottom:-2px}
.pf-cam[hidden]{display:none}

/* page overlays fill the whole screen under the tab bar (no strip of the page behind) */
.overlay.page{inset:0}
.overlay.page .sheet{padding-bottom:calc(104px + var(--safe-b))}

/* gym tracker inside the profile */
#pfGymPane .gym-card{min-height:300px;margin-bottom:0}
#pfGymPane .gym-week{margin:18px 0 0}
#pfGymPane .pf-h{margin-top:28px}

/* =====================================================================
   Gym + Friends pages, more tabs
   ===================================================================== */
.view-gym,.view-friends{display:none}
body[data-view="gym"] .view-gym,body[data-view="friends"] .view-friends{display:block}
body[data-view="gym"] .view-today,body[data-view="gym"] .view-log,body[data-view="friends"] .view-today,body[data-view="friends"] .view-log{display:none}
@media(max-width:899px){
  body[data-view="gym"] .week,body[data-view="gym"] .daybar,body[data-view="friends"] .week,body[data-view="friends"] .daybar{display:none}
}
@media(min-width:900px){
  body[data-view="gym"] .view-gym,body[data-view="friends"] .view-friends{grid-column:1/-1;grid-row:3;max-width:760px}
  body[data-view="gym"] .week,body[data-view="gym"] .daybar,body[data-view="friends"] .week,body[data-view="friends"] .daybar{display:none}
}
.pg-title{font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1.05;margin:6px 4px 16px}
.pg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.pg-head .pg-title{margin-bottom:0}
.pf-act.mini{height:46px;padding:0 16px;font-size:15px;gap:8px;border-radius:999px}
.pf-act.mini svg{width:20px;height:20px}

/* six items in the bar */
.tabbar{gap:2px;padding-left:10px;padding-right:10px}
.tab{flex:1 1 0;min-width:0;max-width:70px;width:auto}
.tab-scan{flex:0 0 64px;max-width:none;width:64px}
@media(min-width:900px){.tab{flex:none;width:72px}.tab-scan{width:58px}}

.gym-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;border-radius:26px;background:var(--surface);overflow:hidden}
.gym-stats div{display:grid;gap:6px;padding:18px}
.gym-stats div+div{box-shadow:inset 1px 0 0 var(--border)}
.gym-stats b{font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gym-stats span{font-size:13px;color:var(--muted)}
.pf-week-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0 6px}
.pf-week-head b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.pf-week-head span{font-size:14px;color:var(--muted)}
.gym-dur.live{color:var(--ok);font-size:14px}
.fr-live{font-style:normal;margin-left:6px;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok);font-size:11px;font-weight:700;vertical-align:middle}
.fr-cheer{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:0;border-radius:999px;background:var(--surface-3);color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.fr-cheer svg{width:16px;height:16px;stroke-width:2.2}
.fr-cheer:disabled{opacity:.55;cursor:default}
.fr-meta{display:grid;gap:2px;font-size:14px;color:var(--muted)}
.fr-meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gym-row-t>.fr-meta{font-size:14px}

/* friends: tap-through list, friend profile, 7 items in the bar */
.pg-sub{margin:-8px 4px 16px;font-size:15px;line-height:1.4;color:var(--muted)}
.fr-row{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:0}
.fr-row:hover .fr-go{color:var(--text)}
.fr-go{display:grid;color:var(--dim)}
.fr-go svg{width:20px;height:20px;stroke-width:2.2}
.pf-actions.one{grid-template-columns:1fr}
.fp-live{display:flex;align-items:center;gap:10px;margin:-6px 0 16px;padding:12px 16px;border-radius:18px;background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok);font-size:14.5px;font-weight:600}
.fp-live[hidden]{display:none}
#friendModal .back-btn{display:inline-grid}
#friendModal .pf-top{justify-content:flex-start}
#friendModal .pf-handle{flex:1}
.gym-stats.two{grid-template-columns:1fr 1fr}
.gym-stats.two div:nth-child(n+3){box-shadow:inset 0 1px 0 var(--border)}
.gym-stats.two div:nth-child(even){box-shadow:inset 1px 0 0 var(--border)}
.gym-stats.two div:nth-child(n+3):nth-child(even){box-shadow:inset 1px 0 0 var(--border),inset 0 1px 0 var(--border)}
.gym-stats small{margin-left:4px;font-size:13px;font-weight:500;color:var(--muted)}
.tabbar{padding-left:6px;padding-right:6px;gap:0}
.tab{max-width:58px}
.tab::before{font-size:11px}
.tab-scan{flex:0 0 58px;width:58px;height:58px}
@media(min-width:900px){.tab{max-width:none}}

/* quiet Meals button (phone) that opens the day's meals */
.meals-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 12px;border:0;border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.meals-btn:hover{background:var(--surface-2);color:var(--text)}
.meals-btn svg{width:19px;height:19px;stroke-width:1.8}
.meals-btn i{font-style:normal;min-width:22px;padding:2px 7px;border-radius:99px;background:var(--surface-3);color:var(--text);font-size:12.5px;text-align:center}
@media(max-width:899px){
  .daybar .date-pill{display:none}
  .daybar{justify-content:space-between}
}
@media(min-width:900px){.meals-btn{display:none}}
#mealsModal .view-log{display:block!important;position:static;max-height:none;padding:0;background:none;border-radius:0}
#mealsModal .log-head{margin-top:0}
#mealsModal .sheet{padding-bottom:calc(24px + var(--safe-b))}
#mealsModal .meals{overflow:visible;margin:0;padding:0}

/* friends: switch + tidy rows */
.fr-seg{display:flex;width:100%;margin:2px 0 16px}
.fr-seg button{flex:1;height:38px}
.fr-seg button[aria-selected="true"]{background:var(--btn-bg);color:var(--btn-fg)}
.fr-sort{display:flex;width:100%;margin:0 0 14px}
.fr-sort button{flex:1}
.fr-lv{font-size:13px;font-weight:700;color:var(--muted);padding:3px 9px;border-radius:99px;background:var(--surface-3)}
.fr-rank{flex:0 0 26px;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--dim);font-variant-numeric:tabular-nums;text-align:center}
.fr-row.me{background:none}
.fr-row.me .fr-rank{color:var(--text)}
.fr-you{font-style:normal;margin-left:6px;padding:2px 8px;border-radius:99px;background:var(--btn-bg);color:var(--btn-fg);font-size:10.5px;font-weight:800;letter-spacing:.04em;vertical-align:middle}
.fr-val{display:grid;justify-items:end;line-height:1.05}
.fr-val b{font-size:20px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fr-val small{font-size:11.5px;color:var(--muted)}
#frFull{margin-top:14px}
.gym-row-t b{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.gym-row-t>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab{max-width:84px}
.tab-scan{max-width:none}
#mealsModal .meal,#mealsModal .log-foot{background:var(--surface-2)}
#mealsModal .log-head .sec-title{display:none}
#mealsModal .log-head{align-items:center}
#mealsModal .log-head .count{margin:0;font-size:15px}
#mealsModal .meals{gap:10px}
.fr-go.ph{width:20px}

/* =====================================================================
   Polish: floating tab bar + calmer scanner sheet
   ===================================================================== */
/* tab bar: original full-width bar, even spacing */
@media(max-width:899px){
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;justify-items:center;gap:0;max-width:none;padding:8px 8px calc(8px + var(--safe-b))}
  .tab{width:100%;max-width:76px;height:58px;flex:none}
  .tab-scan{width:64px;max-width:64px;height:64px;margin-top:-14px}
  .overlay.page .sheet{padding-bottom:calc(100px + var(--safe-b))}
  .app{padding-bottom:calc(120px + var(--safe-b))}
}

/* scanner: compact model switch, clearer steps */
#scanModal .tier{display:flex;gap:4px;padding:4px;margin:16px 0 0;border-radius:999px;background:var(--surface-2)}
#scanModal .tier button{flex:1;display:grid;justify-items:center;text-align:center;gap:1px;padding:9px 10px;border-radius:999px;background:none;box-shadow:none;min-width:0}
#scanModal .tier button b{font-size:14px;white-space:nowrap}
#scanModal .tier button span{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#scanModal .tier button[aria-checked="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:none}
#scanModal .tier button[aria-checked="true"] span{color:color-mix(in srgb,var(--btn-fg) 62%,transparent)}
#scanModal .pick-btns{margin-top:14px}
#scanModal .drop{min-height:190px}
#scanModal .field .label{margin-bottom:8px}

/* review step: calories on top, then protein / fat / carbs in a row */
.rv-form .macro-box:not(#rvKcalBox) .mi input{font-size:26px}
.rv-form #rvKcalBox .mi input{font-size:40px}
.rv-form .macro-box{padding:14px 14px 10px}
.rv-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.rv-form>*{grid-column:1/-1}
.rv-form>.macro-inputs{display:contents}
.rv-form .macro-box{grid-column:span 1;margin:0}
.rv-form #rvKcalBox{grid-column:1/-1}
.rv-form .macro-box:not(#rvKcalBox) .mi{flex-direction:column;align-items:flex-start;gap:0}
.rv-form .macro-box:not(#rvKcalBox) .mi .u{margin:-2px 0 0}
.review-actions{grid-template-columns:1fr 1.5fr}

/* =====================================================================
   Food rating card
   ===================================================================== */
.rate{display:grid;gap:12px;padding:18px;border-radius:22px;background:var(--surface-2)}
.rate[hidden]{display:none}
.rate-top{display:flex;align-items:center;gap:14px}
.rate-score{display:flex;align-items:baseline;gap:2px;padding:10px 14px;border-radius:18px;background:var(--surface-3);color:var(--text)}
.rate-score b{font-size:30px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.rate-score small{font-size:13px;font-weight:600;color:var(--muted)}
.rate-score.r-top{background:color-mix(in srgb,var(--ok) 24%,var(--surface-3));color:var(--ok)}
.rate-score.r-good{background:color-mix(in srgb,var(--creatine) 22%,var(--surface-3));color:var(--creatine)}
.rate-score.r-ok{background:color-mix(in srgb,var(--fat) 22%,var(--surface-3));color:var(--fat)}
.rate-score.r-low{background:color-mix(in srgb,var(--danger) 22%,var(--surface-3));color:var(--danger-text)}
.rate-word{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em}
.rate-sub{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.rate-row{display:grid;grid-template-columns:112px 1fr 46px;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.rate-row b{justify-self:end;color:var(--text);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.rate-bar{display:block;height:6px;border-radius:9px;background:var(--surface-3);overflow:hidden}
.rate-bar u{display:block;height:100%;border-radius:inherit;background:var(--text);transition:width .5s var(--ease)}
.rate-row.taste{grid-template-columns:112px 1fr auto}
.stars{display:flex;gap:2px}
.star{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;background:none;color:var(--surface-3);cursor:pointer;transition:transform .2s var(--spring),color .2s}
.star svg{width:24px;height:24px;fill:currentColor;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.star.on{color:var(--fat)}
.star:active{transform:scale(.85)}
.rate-pill{display:inline-flex!important;align-items:center;gap:3px;padding:1px 8px;border-radius:99px;background:var(--surface-3);font-size:12.5px;font-weight:700}
.rate-pill svg{width:12px;height:12px;fill:currentColor;stroke:none}
.rate-pill.r-top{color:var(--ok)}
.rate-pill.r-good{color:var(--creatine)}
.rate-pill.r-ok{color:var(--fat)}
.rate-pill.r-low{color:var(--danger-text)}
#addModal .rate{margin-top:12px}