/* ══════════════════════════════════════
   BodyTrack — Charte THG (The Home Gym 1410)
   Light theme · Graphite Teal · Brass
   ══════════════════════════════════════ */

:root{
  /* Surfaces (light, marbré) */
  --bg:#F4F2EC;          /* fond app — crème marbre */
  --s1:#FFFFFF;          /* cards principales */
  --s2:#FBF9F4;          /* surface alt / nav / chips */
  --s3:#F0EDE5;          /* inputs, hover */
  --s4:#E6E2D7;          /* élements actifs */

  /* Borders */
  --b1:rgba(31,61,58,0.06);
  --b2:rgba(31,61,58,0.14);
  --b3:rgba(31,61,58,0.18);

  /* Texte */
  --t1:#1A2422;          /* primaire — presque noir tirant vers le teal */
  --t2:#5C6361;          /* secondaire */
  --t3:#9AA09D;          /* tertiaire */

  /* Couleurs sémantiques — palette THG */
  --gr:#1F3D3A;          /* GRAPHITE TEAL — marque, primaire, succès */
  --gr-a:rgba(31,61,58,0.08);
  --gr-b:rgba(31,61,58,0.16);

  --bl:#3C5A82;          /* protéines — bleu denim sourd */
  --bl-a:rgba(60,90,130,0.10);

  --or:#B89461;          /* OR LAITON — lipides, accents */
  --or-a:rgba(184,148,97,0.14);

  --re:#A33A3A;          /* alertes — brique */
  --re-a:rgba(163,58,58,0.10);

  --pu:#6B5D8E;          /* glucides — prune sourd */
  --pu-a:rgba(107,93,142,0.10);

  --r:12px;--r2:8px;
  --nav-h:64px;
  --font-title:'Inter',sans-serif;
  --font-mono:'DM Mono',monospace;
  --font-body:'Inter',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html{height:100%;overflow-y:auto;overflow-x:hidden}
body{font-family:var(--font-body);background:var(--bg);color:var(--t1);min-height:100%;overflow-x:hidden;line-height:1.45}

/* ══ PAGES ══ */
.page{display:none;padding:18px 14px max(calc(var(--nav-h) + 28px), calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)));min-height:100vh;max-width:520px;margin:0 auto}
.page.active{display:block}

/* ══ BOTTOM NAV ══ */
.bnav{
  position:fixed;bottom:0;left:0;right:0;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--s2);
  border-top:1px solid var(--b2);
  display:flex;align-items:stretch;z-index:100;
}
.bn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;border:none;background:transparent;cursor:pointer;
  color:var(--t3);font-family:var(--font-body);font-size:9.5px;font-weight:500;
  letter-spacing:0.06em;transition:color 0.15s;
  padding:8px 4px 6px;position:relative;min-height:44px;
}
.bn svg{width:22px;height:22px;stroke-width:1.6}
.bn.active{color:var(--gr)}
.bn.active::after{
  content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:16px;height:2px;border-radius:1px;background:var(--or);
}

/* ══ PAGE HEADER ══ */
.ph{margin-bottom:20px;padding:4px 2px 0}
.ph-title{font-size:24px;font-weight:700;letter-spacing:-0.4px;color:var(--t1);line-height:1.15}
.ph-sub{font-size:12.5px;color:var(--t3);margin-top:5px;font-weight:500;letter-spacing:0.02em}

/* ══ CARDS ══ */
.card{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r);padding:18px;margin-bottom:10px;box-shadow:0 1px 2px rgba(31,61,58,0.03)}
.card-label{font-size:10.5px;font-weight:600;letter-spacing:0.10em;text-transform:uppercase;color:var(--t3);margin-bottom:12px}

/* ══ FORM ══ */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11.5px;font-weight:600;color:var(--t2);letter-spacing:0.02em}
input[type=text],input[type=number],input[type=date],input[type=email],select,textarea{
  background:var(--s2);border:1px solid var(--b2);border-radius:10px;
  color:var(--t1);font-family:var(--font-body);font-size:14px;font-weight:500;
  padding:0 14px;width:100%;outline:none;transition:border-color 0.15s,box-shadow 0.15s;-webkit-appearance:none;
  min-height:48px;
}
textarea{padding:12px 14px;min-height:80px;resize:vertical;font-family:var(--font-body)}
input:focus,select:focus,textarea:focus{border-color:var(--gr);box-shadow:0 0 0 3px var(--gr-a)}
input::placeholder,textarea::placeholder{color:var(--t3);font-weight:400}
select{background:var(--s1);background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),linear-gradient(135deg,var(--t3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
select option{background:var(--s1);color:var(--t1)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* ══ TOGGLE ══ */
.tgl{display:flex;background:var(--s3);border:none;border-radius:10px;padding:4px;gap:3px}
.tgl-btn{flex:1;padding:9px;border:none;background:transparent;border-radius:7px;
  color:var(--t2);font-family:var(--font-body);font-size:13px;font-weight:600;
  cursor:pointer;transition:all 0.15s;text-align:center;min-height:38px}
.tgl-btn.on{background:var(--s1);color:var(--t1);font-weight:600;box-shadow:0 1px 3px rgba(31,61,58,0.08);border-radius:7px}

/* ══ BOUTONS ══ */
.btn{padding:0 18px;border-radius:10px;font-family:var(--font-body);font-size:13px;
  font-weight:500;cursor:pointer;transition:all 0.15s;border:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px}
.btn-primary{background:var(--gr);color:#FFFFFF;width:100%;min-height:48px;border-radius:10px;font-size:13px;font-weight:500}
.btn-primary:hover{background:#2A4F4B;box-shadow:0 4px 12px rgba(31,61,58,0.15)}
.btn-ghost{background:transparent;border:1px solid var(--b2);color:var(--t1)}
.btn-ghost:hover{background:var(--gr-a);border-color:var(--gr)}
.btn-ghost.on{background:var(--gr);color:#FFFFFF;border-color:var(--gr)}
.btn-sm{min-height:36px;font-size:11px;padding:0 14px}
.btn-danger{background:var(--re-a);border:1px solid rgba(163,58,58,0.2);color:var(--re)}

/* ══ STAT BOXES ══ */
.stat2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.stat3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.stat-box{background:var(--s2);border:1px solid var(--b1);border-radius:10px;padding:14px}
.stat-lbl{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.stat-num{font-size:26px;font-weight:700;font-family:var(--font-mono);letter-spacing:-0.6px;line-height:1;color:var(--t1)}
.stat-unit{font-size:11px;color:var(--t2);margin-top:4px}
.c-gr{color:var(--gr)}.c-bl{color:var(--bl)}.c-or{color:var(--or)}.c-re{color:var(--re)}.c-pu{color:var(--pu)}

/* ══ NOTE ══ */
.note{border-left:2px solid var(--or);background:var(--s2);border-radius:0 8px 8px 0;
  padding:10px 14px;font-size:12.5px;color:var(--t2);line-height:1.6;margin-top:10px}
.note strong{color:var(--t1)}
.note-warn{border-color:var(--re)}
.err-box{border-left:2px solid var(--re);background:var(--re-a);padding:10px 14px;font-size:12.5px;color:var(--re);display:none;margin-top:8px;border-radius:0 8px 8px 0}

.div{height:1px;background:var(--b1);margin:14px 0}
.fnote{font-size:11px;color:var(--t3);font-style:italic;line-height:1.5;margin-top:6px}

/* ══ PROFIL BANNER ══ */
.profile-banner{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r);
  padding:14px 16px;margin-bottom:12px;display:none;}
.profile-banner.show{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pb-avatar{width:42px;height:42px;border-radius:50%;background:var(--gr);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;color:#FFFFFF;font-weight:700;letter-spacing:0.05em}
.pb-info{flex:1}
.pb-name{font-size:15px;font-weight:700;color:var(--t1)}
.pb-sub{font-size:12px;color:var(--t2);margin-top:2px}
.pb-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pb-chip{background:#FFFFFF;border:1px solid var(--b2);border-radius:99px;padding:4px 10px;font-size:11.5px;font-weight:600;color:var(--t2)}
.pb-chip span{color:var(--t1);font-family:var(--font-mono)}

/* ══ ADJ BUTTONS ══ */
.adj-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:2px}
.adj-btn{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 6px;border-radius:10px;border:1px solid var(--b2);
  background:#FFFFFF;cursor:pointer;font-family:var(--font-body);
  transition:all 0.15s;width:100%;min-height:54px}
.adj-pct{font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--t2);line-height:1}
.adj-lbl{font-size:10px;font-weight:600;color:var(--t3);letter-spacing:0.03em;white-space:nowrap}
.adj-btn.on{box-shadow:0 1px 3px rgba(31,61,58,0.06)}
.adj-btn.on .adj-pct{color:var(--t1)}
.adj-btn.on .adj-lbl{color:var(--t2)}
.adj-btn.on.adj-neg{border-color:var(--re);background:var(--re-a)}
.adj-btn.on.adj-neg .adj-pct{color:var(--re)}
.adj-btn.on.adj-pos{border-color:var(--gr);background:var(--gr-a)}
.adj-btn.on.adj-pos .adj-pct{color:var(--gr)}
.adj-btn.on.adj-zero{border-color:var(--or);background:var(--or-a)}
.adj-btn.on.adj-zero .adj-pct{color:var(--or)}
input[type=range]{accent-color:var(--gr)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%}

/* ══ CAL HERO ══ */
.cal-hero{background:var(--gr);border-radius:var(--r);padding:22px;text-align:center;margin-bottom:14px;color:#FFFFFF}
.cal-num{font-size:48px;font-weight:700;font-family:var(--font-mono);color:#FFFFFF;letter-spacing:-2px;line-height:1}
.cal-lbl{font-size:11px;color:rgba(255,255,255,0.75);margin-top:8px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600}

/* ══ STEPS ══ */
.step{border:1px solid var(--b1);border-radius:var(--r);margin-bottom:10px;overflow:hidden;transition:opacity 0.2s;background:var(--s1)}
.step-head{display:flex;align-items:center;gap:12px;padding:14px;background:var(--s2)}
.step-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;font-family:var(--font-mono)}
.sn-gr{background:var(--gr);color:#FFFFFF}
.sn-bl{background:var(--bl);color:#FFFFFF}
.sn-or{background:var(--or);color:#FFFFFF}
.step-title{font-size:14px;font-weight:700;color:var(--t1);letter-spacing:0.01em}
.step-sub{font-size:11.5px;color:var(--t2);margin-top:2px}
.step-body{padding:14px;border-top:1px solid var(--b1);background:var(--s1)}
.step.locked{opacity:0.4;pointer-events:none}

.prot-preset-row{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.prot-preset{padding:6px 12px;border-radius:99px;border:1px solid var(--b2);background:#FFFFFF;color:var(--t2);font-size:11.5px;font-weight:600;cursor:pointer;transition:all 0.15s;font-family:var(--font-body);min-height:32px}
.prot-preset:hover{border-color:var(--bl);color:var(--bl)}
.prot-preset.on{background:var(--bl-a);border-color:var(--bl);color:var(--bl)}

.gluc-lip-result{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.gluc-box,.lip-box{background:var(--s2);border:1px solid var(--b1);border-radius:10px;padding:14px}
.macro-lbl-sm{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px}
.macro-big{font-size:24px;font-weight:700;font-family:var(--font-mono);color:var(--t1);letter-spacing:-0.4px}
.macro-sub{font-size:11px;color:var(--t3);margin-top:3px;font-family:var(--font-mono)}

/* ══ TARGETS SAVED ══ */
.target-saved{background:var(--s1);border:1px solid var(--b2);border-left:3px solid var(--or);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;display:none}
.target-saved.show{display:block}
.ts-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.ts-title{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gr)}
.ts-chips{display:flex;gap:6px;flex-wrap:wrap}
.ts-chip{background:var(--s2);border:1px solid var(--b1);border-radius:99px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:5px}
.ts-chip span{color:var(--t1);font-family:var(--font-mono)}

.ptable{background:var(--s2);border:1px solid var(--b1);border-radius:10px;overflow:hidden;margin-top:10px}
.prow{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid var(--b1);gap:8px}
.prow:last-child{border-bottom:none}
.prow-lbl{font-size:12px;color:var(--t2);min-width:0;flex-shrink:1}
.prow-val{font-size:12px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:6px;font-family:var(--font-mono);flex-shrink:0}
.tag{font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:0.05em;font-family:var(--font-body);text-transform:uppercase}
.tag-gr{background:var(--gr-a);color:var(--gr)}.tag-or{background:var(--or-a);color:var(--or)}

/* ══ SUIVI ══ */
.score-field{display:flex;flex-direction:column;gap:6px}
.score-field label{font-size:13px;font-weight:600;color:var(--t1)}
.score-wrap{display:flex;align-items:center;gap:12px}
.score-wrap input[type=range]{flex:1;accent-color:var(--gr)}
.score-num{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--gr);min-width:24px;text-align:right}

/* ══ TABLE ══ */
.tbl-wrap{overflow-x:auto;margin-top:4px}
table{width:100%;border-collapse:collapse;font-size:12px}
th{padding:9px 10px;text-align:left;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--b2);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--b1);color:var(--t2);font-family:var(--font-mono);font-size:12px}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--s2)}
td.td-main{color:var(--t1);font-weight:700;font-family:var(--font-body);font-size:12.5px}
td.pos{color:var(--gr)}td.neg{color:var(--re)}td.neu{color:var(--t3)}td.warn{color:var(--or)}

/* ══ REPORTING ══ */
.report-gran{background:var(--s3);border:none;border-radius:99px;padding:3px;display:inline-flex;gap:4px;width:fit-content;margin-bottom:16px}
.rg-btn{padding:6px 14px;border:none;background:transparent;border-radius:99px;color:var(--t2);font-family:var(--font-body);font-size:11.5px;font-weight:700;cursor:pointer;transition:all 0.15s;letter-spacing:0.06em;text-transform:uppercase;min-height:36px}
.rg-btn.on{background:var(--gr);color:#FFFFFF;border-radius:99px;font-weight:600;}

.kpi4{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.kpi{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r);padding:14px;}
.kpi-lbl{font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.kpi-num{font-size:26px;font-weight:700;font-family:var(--font-mono);letter-spacing:-0.5px;line-height:1;color:var(--t1)}
.kpi-sub{font-size:11px;color:var(--t2);margin-top:4px}
.kpi-delta{font-size:11px;font-weight:700;margin-top:5px;font-family:var(--font-mono)}
.kpi-delta.pos{color:var(--gr)}.kpi-delta.neg{color:var(--re)}.kpi-delta.neu{color:var(--t3)}

.chart-card{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r);padding:16px;margin-bottom:10px;box-shadow:0 1px 2px rgba(31,61,58,0.03)}
.cc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:6px}
.cc-title{font-size:13px;font-weight:700;color:var(--t1);letter-spacing:0.02em}
.cc-tabs{display:flex;gap:4px;flex-wrap:wrap}
.cct{padding:5px 11px;border-radius:99px;border:1px solid var(--b2);background:#FFFFFF;color:var(--t2);font-size:10.5px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all 0.15s;min-height:30px;letter-spacing:0.04em;text-transform:uppercase}
.cct.on{background:var(--gr);border-color:var(--gr);color:#FFFFFF}
.chart-h{position:relative;height:180px}
.chart-ht{position:relative;height:210px}
.chart-stat-row{display:flex;flex-wrap:wrap;gap:10px;padding:8px 4px 0;font-size:11px;color:var(--t2)}
.chart-stat-row b{font-weight:700;color:var(--t1)}

.donut-wrap{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 0;flex-wrap:wrap}
.donut-canvas{width:110px!important;height:110px!important;flex-shrink:0}
.donut-leg{display:flex;flex-direction:column;gap:8px}
.dl{display:flex;align-items:center;gap:7px;font-size:12px}
.dl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dl-lbl{color:var(--t2)}.dl-val{color:var(--t1);font-family:var(--font-mono);font-weight:700;margin-left:auto;padding-left:10px}

.recap-bar{height:8px;border-radius:4px;overflow:hidden;display:flex;margin:8px 0 12px;background:var(--s3)}
.rb-seg{height:100%;transition:width 0.3s}

.report-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
@media(max-width:700px){
  .report-2col{grid-template-columns:1fr}
  .kpi4{grid-template-columns:1fr 1fr}
  .donut-canvas{width:90px!important;height:90px!important}
}

.empty-state{text-align:center;padding:60px 20px;color:var(--t3)}
.empty-icon{font-size:32px;margin-bottom:10px;opacity:0.5}
.empty-txt{font-size:13px;line-height:1.8}

.rec-filter{padding:6px 12px;border-radius:99px;border:1px solid var(--b2);background:#FFFFFF;color:var(--t2);font-family:var(--font-body);font-size:11.5px;font-weight:600;cursor:pointer;transition:all 0.15s;min-height:32px}
.rec-filter.on{background:var(--gr-a);border-color:var(--gr);color:var(--gr)}

.rec-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:16px;margin-bottom:10px;cursor:pointer;transition:all 0.15s;box-shadow:0 1px 2px rgba(31,61,58,0.03)}
.rec-card:hover{border-color:var(--b3);box-shadow:0 4px 12px rgba(31,61,58,0.06)}
.rec-card-title{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:6px;line-height:1.3;letter-spacing:0.01em}
.rec-badge{font-size:10px;font-weight:600;padding:3px 9px;border-radius:99px;display:inline-block;margin-right:4px;margin-bottom:4px;letter-spacing:0.04em}
.rb-pdj{background:var(--or-a);color:var(--or)}
.rb-dejeuner{background:var(--gr-a);color:var(--gr)}
.rb-diner{background:var(--pu-a);color:var(--pu)}
.rb-collation{background:var(--bl-a);color:var(--bl)}
.rb-proteine{background:var(--bl-a);color:var(--bl)}
.rb-glucidique{background:var(--pu-a);color:var(--pu)}
.rb-equilibre{background:var(--gr-a);color:var(--gr)}
.rec-card-macros,.rec-macros{display:flex;gap:10px;font-size:11.5px;color:var(--t3);margin-top:8px;flex-wrap:wrap;font-family:var(--font-mono)}
.rec-macros b{font-family:var(--font-mono);font-weight:700;color:var(--t2)}

.rm-obj-btn{padding:7px 14px;border-radius:99px;border:1px solid var(--b2);background:#FFFFFF;color:var(--t2);font-family:var(--font-body);font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;min-height:34px}
.rm-obj-btn.on{background:var(--gr);border-color:var(--gr);color:#FFFFFF}

.day-type-card{background:var(--s2);border:1px solid var(--b1);border-radius:10px;padding:14px;margin-bottom:10px}
.day-type-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}

.counter-ctrl{display:flex;align-items:center;background:#FFFFFF;border:1px solid var(--b2);border-radius:8px;overflow:hidden}
.counter-ctrl button{width:32px;height:32px;border:none;background:transparent;color:var(--t1);font-size:16px;cursor:pointer}
.counter-ctrl button:hover{background:var(--s3)}
.counter-ctrl span{width:26px;text-align:center;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--t1)}

.tips-guide{background:var(--s1);border-radius:var(--r);overflow:hidden;border:1px solid var(--b1);margin-bottom:8px}
.tips-guide-head{display:flex;align-items:center;gap:10px;padding:14px;cursor:pointer;min-height:48px}
.tips-tip{background:var(--s2);border-radius:var(--r);padding:14px;border-left:2px solid var(--or);margin-bottom:8px}

.adv-per{padding:7px 14px;border-radius:99px;border:1px solid var(--b2);background:#FFFFFF;color:var(--t2);font-family:var(--font-body);font-size:11.5px;font-weight:700;cursor:pointer;transition:all 0.15s;min-height:34px;letter-spacing:0.04em}
.adv-per.on{background:var(--gr);border-color:var(--gr);color:#FFFFFF}

.reg-stat{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--b1)}
.reg-stat:last-child{border-bottom:none}
.reg-stat-lbl{font-size:12.5px;color:var(--t2)}
.reg-stat-val{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--t1)}

.food-grp-btn{padding:7px 13px;border-radius:99px;border:1px solid var(--b2);background:#FFFFFF;color:var(--t2);font-family:var(--font-body);font-size:11.5px;font-weight:600;cursor:pointer;transition:all 0.15s;margin-right:6px;white-space:nowrap;min-height:34px;display:inline-flex;align-items:center}
.food-grp-btn.on{background:var(--gr);border-color:var(--gr);color:#FFFFFF}

.food-item{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--b1);cursor:pointer;min-height:52px}
.food-item-name{font-size:13.5px;font-weight:600;color:var(--t1);flex:1;line-height:1.3}
.food-item-sub{font-size:11px;color:var(--t3);margin-top:2px}
.food-item-kcal{font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--gr);flex-shrink:0}

.meal-slot{background:transparent;border:none;border-bottom:1px solid var(--b1);border-radius:0;margin-bottom:0;overflow:hidden;}
.meal-slot-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;}
.meal-slot-title{font-size:13px;font-weight:700;color:var(--t1);letter-spacing:0.02em}
.meal-slot-kcal{font-family:var(--font-mono);font-size:11.5px;color:var(--t3)}
.meal-food-item{display:flex;align-items:center;gap:8px;padding:11px 14px;border-top:1px solid var(--b1)}
.meal-food-item:first-of-type{border-top:none}
.meal-food-name{font-size:13px;color:var(--t1);flex:1;line-height:1.3}
.meal-food-macros{font-size:11px;color:var(--t3);white-space:nowrap;text-align:right;font-family:var(--font-mono)}

.ns-badge{display:inline-block;width:18px;height:18px;border-radius:4px;font-size:11px;font-weight:700;color:#fff;text-align:center;line-height:18px;text-transform:uppercase;flex-shrink:0}

.act-preset{padding:8px 14px;border-radius:99px;border:1px solid var(--b2);background:#FFFFFF;color:var(--t2);font-family:var(--font-mono);font-size:12.5px;font-weight:700;cursor:pointer;transition:all 0.15s;min-height:36px}
.act-preset.on{background:var(--gr);border-color:var(--gr);color:#FFFFFF}

.training-type-row{display:flex;align-items:center;gap:8px;background:var(--s2);border:1px solid var(--b1);border-radius:10px;padding:12px;margin-bottom:8px}

.tag-btn{padding:6px 12px;border-radius:99px;border:1px solid var(--b2);background:#FFFFFF;color:var(--t2);font-family:var(--font-body);font-size:11.5px;font-weight:600;cursor:pointer;transition:all 0.15s;white-space:nowrap;min-height:32px}
.tag-btn.on{background:var(--gr-a);border-color:var(--gr);color:var(--gr)}

.tag-chip{display:inline-block;padding:3px 9px;border-radius:99px;font-size:10px;font-weight:600;background:var(--s3);color:var(--t2);margin:2px 3px 2px 0}

.ob-goal-card{display:flex;align-items:center;gap:14px;background:var(--s1);border:1.5px solid var(--b2);border-radius:var(--r);padding:18px;cursor:pointer;transition:all 0.15s;min-height:80px;box-shadow:0 1px 2px rgba(31,61,58,0.03)}
.ob-goal-card.selected{border-color:var(--gr);background:var(--gr-a)}
.ob-goal-card:hover{border-color:var(--b3)}

#save-reminder{font-size:11px;color:var(--t3);margin-top:4px;transition:color 0.3s}

.data-progress-bar{height:4px;background:var(--s3);border-radius:2px;overflow:hidden;margin-top:6px}
.data-progress-fill{height:100%;border-radius:2px;background:var(--gr);transition:width 0.5s}

.wm-btn{padding:7px 13px;border-radius:99px;border:1px solid var(--b2);background:#FFFFFF;color:var(--t2);font-family:var(--font-body);font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all 0.15s;min-height:34px}
.wm-btn.on{background:var(--gr);border-color:var(--gr);color:#FFFFFF}

.auj-action-btn{display:flex;align-items:center;gap:12px;padding:16px;background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--t1);transition:all 0.15s;min-height:64px;text-align:left;box-shadow:0 1px 2px rgba(31,61,58,0.03)}
.auj-action-btn:hover{border-color:var(--gr);background:var(--gr-a)}
.auj-action-btn svg{flex-shrink:0;color:var(--gr);width:20px;height:20px}

.prot-src-btn{padding:7px 13px;border-radius:99px;border:1px solid var(--bl);background:var(--bl-a);color:var(--bl);font-family:var(--font-body);font-size:11.5px;font-weight:600;cursor:pointer;min-height:32px}

body.mode-simple .advanced-only{display:none!important}
.mode-simple .simple-hide{display:none!important}
body.mode-simple .simple-only{display:block!important}
.simple-only{display:none!important}
body.mode-simple .simple-chip{display:inline-flex!important}
.simple-chip{display:none;align-items:center;gap:4px;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:700}
.simple-ok{background:var(--gr-a);color:var(--gr)}
.simple-warn{background:var(--or-a);color:var(--or)}
.simple-alert{background:var(--re-a);color:var(--re)}

.sub-mini-panel{background:var(--s2);border:1px solid var(--b1);border-radius:10px;padding:10px;margin-top:6px}
.sub-result-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--t1);min-height:38px}
.sub-result-item:hover{background:var(--s3)}

/* ══ AUJOURD'HUI — refonte THG ══ */
.auj-brand-mark{display:none}
.auj-greeting{font-size:24px;font-weight:600;letter-spacing:-0.4px;color:var(--t1)}
.auj-greeting-line{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.auj-divider{display:none}
.auj-date{font-size:11px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--t3);margin-bottom:4px}

.priority-card{
  background:var(--gr);
  border-radius:16px;
  padding:24px 22px;
  margin-bottom:14px;
  color:#FFFFFF;
  position:relative;
  overflow:hidden;
}
.priority-card::before{
  content:'';position:absolute;top:0;right:0;width:60px;height:60px;
  background:radial-gradient(circle at top right,var(--or) 0%,transparent 70%);
  opacity:0.16;pointer-events:none;
}
.priority-label{font-size:10.5px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.65);margin-bottom:18px}
.priority-msg{font-size:22px;font-weight:700;color:#FFFFFF;line-height:1.25;margin-bottom:10px;letter-spacing:-0.3px}
.priority-why{font-size:13px;color:rgba(255,255,255,0.78);line-height:1.55;margin-bottom:18px}
.priority-action{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 18px;background:var(--or);color:#1A2422;border:none;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;min-height:48px;width:100%;font-family:var(--font-body);letter-spacing:0.08em;text-transform:uppercase;transition:all 0.15s}
.priority-action:hover{background:#C9A571;transform:translateY(-1px)}
.priority-action svg{flex-shrink:0;stroke:#1A2422}

.coherence-card{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r);padding:18px;margin-bottom:10px;box-shadow:0 1px 2px rgba(31,61,58,0.03)}
.coherence-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.coherence-label{font-size:20px;font-weight:700;color:var(--t1);font-family:var(--font-title);letter-spacing:-0.3px}
.coherence-trend{font-size:12px;color:var(--gr);font-weight:600}
.coherence-factor{font-size:12px;color:var(--t3);margin-bottom:10px}
.coherence-link{background:none;border:none;padding:6px 2px;margin:-6px -2px;cursor:pointer;font-size:11.5px;color:var(--gr);font-family:var(--font-body);font-weight:700;letter-spacing:0.04em;text-transform:uppercase;border-bottom:1px solid var(--or);padding-bottom:2px}
.coherence-link:hover{color:var(--or)}

.minimum-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:18px;margin-bottom:10px;box-shadow:0 1px 2px rgba(31,61,58,0.03)}
.minimum-list{display:flex;gap:8px;flex-wrap:wrap}
.minimum-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--s2);border:1px solid var(--b1);border-radius:99px;font-size:12.5px;font-weight:600;color:var(--t2);min-height:34px}
.minimum-pill.done{background:var(--gr-a);border-color:var(--gr);color:var(--gr)}
.minimum-foot{font-size:11px;color:var(--t3);margin-top:12px;padding-top:10px;border-top:1px solid var(--b1);font-style:italic}

.macros-card{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r);padding:18px;margin-bottom:10px;box-shadow:0 1px 2px rgba(31,61,58,0.03)}
.macros-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.macros-head canvas{flex-shrink:0;width:68px!important;height:68px!important}
.macros-info{flex:1;min-width:0}
.macros-kcal-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:8px}
.macros-kcal{font-size:22px;font-weight:700;font-family:var(--font-mono);color:var(--t1);letter-spacing:-0.5px;line-height:1}
.macros-rem{font-size:12px;color:var(--gr);font-weight:600;font-family:var(--font-mono)}
.macros-bar{height:6px;background:var(--s3);border-radius:3px;overflow:hidden}
.macros-bar > div{height:100%;border-radius:3px;background:var(--gr);width:0%;transition:width 0.3s}
.macro-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.macro-stat{background:var(--s2);border:1px solid var(--b1);border-radius:10px;padding:12px 8px;text-align:center}
.macro-stat-num{font-size:18px;font-weight:700;font-family:var(--font-mono);line-height:1;letter-spacing:-0.3px;color:var(--t1)}
.macro-stat-lbl{font-size:9.5px;color:var(--t3);margin-top:6px;letter-spacing:0.08em;text-transform:uppercase;font-weight:600}

.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.quick-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:14px;min-height:72px;display:flex;align-items:center;gap:11px;cursor:pointer;text-align:left;font-family:var(--font-body);transition:all 0.15s;box-shadow:0 1px 2px rgba(31,61,58,0.03)}
.quick-card:hover{border-color:var(--gr);background:var(--gr-a)}
.quick-card-title{font-size:13px;font-weight:700;color:var(--t1);line-height:1.3;letter-spacing:0.01em}
.quick-card-sub{font-size:11.5px;color:var(--t3);font-family:var(--font-mono)}

.insight-note{background:var(--s1);border:1px solid var(--b1);border-left:2px solid var(--or);border-radius:0 var(--r) var(--r) 0;padding:14px 16px;margin-bottom:10px;display:none;box-shadow:0 1px 2px rgba(31,61,58,0.03)}
.insight-note.show{display:block}
.insight-label{font-size:10.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--or);margin-bottom:8px}
.insight-msg{font-size:13px;color:var(--t2);line-height:1.55}

.section-label{font-size:10.5px;font-weight:600;letter-spacing:0.10em;text-transform:uppercase;color:var(--t3);margin:18px 2px 10px;display:flex;align-items:center;gap:10px}
.section-label::after{content:'';flex:1;height:1px;background:var(--b1)}

.activity-mini{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:16px;margin-bottom:10px;box-shadow:0 1px 2px rgba(31,61,58,0.03)}
.activity-mini-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:8px}
.activity-mini-row > :first-child{color:var(--t1);font-weight:600}
.activity-mini-row > :last-child{color:var(--t3);font-family:var(--font-mono)}
.activity-mini-bar{height:4px;background:var(--s3);border-radius:2px;overflow:hidden}
.activity-mini-bar > div{height:100%;background:var(--gr);width:0%;border-radius:2px;transition:width 0.3s}
.activity-mini-foot{font-size:11.5px;color:var(--t3);margin-top:10px}

.week-mode-wrap{margin-top:20px;padding-top:18px;border-top:1px solid var(--b1);display:none;}
body.mode-advanced .week-mode-wrap{display:block;}
.week-mode-label{font-size:10.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--t3);margin-bottom:10px}
.week-mode-row{display:flex;gap:6px;flex-wrap:wrap}

.data-progress-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 2px rgba(31,61,58,0.03)}
.data-progress-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
.data-progress-title{font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:0.12em}
.data-progress-label{font-size:11px;color:var(--t3);font-family:var(--font-mono)}

/* Modal common */
.modal-root{display:none;position:fixed;inset:0;background:rgba(20,30,28,0.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:500;overflow-y:auto}
.modal-sheet{background:var(--bg);min-height:100vh;max-width:520px;margin:0 auto;padding-bottom:40px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.modal-close{width:36px;height:36px;border-radius:50%;background:var(--s2);border:1px solid var(--b2);color:var(--t1);cursor:pointer;font-size:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}

/* ════ INLINE-STYLE OVERRIDES ════
   Override les couleurs hardcodées dans le HTML inline (global).
   Note : ces sélecteurs d'attributs ne s'appliquent qu'aux éléments DOM,
   donc les couleurs hex utilisées dans les datasets Chart.js (JS) ne sont pas affectées. */

[style*="background:var(--s1)"]{background:var(--bg)!important}
[style*="background:var(--s3)"]{background:var(--s2)!important;border-color:var(--b1)!important}
[style*="background:var(--bg)"]{background:var(--bg)!important}
[style*="background:var(--s2)"]{background:var(--s2)!important}
[style*="background:#22d68a"]{background:var(--gr)!important}

[style*="color:var(--t1)"]{color:var(--t1)!important}
[style*="color:var(--t2)"]{color:var(--t2)!important}
[style*="color:var(--t3)"]{color:var(--t3)!important}
[style*="color:var(--gr)"]{color:var(--gr)!important}
[style*="color:#0a0c0f"]{color:#FFFFFF!important}

[style*="border-bottom:1px solid var(--b1)"],
[style*="border:1px solid rgba(255,255,255,0.05)"],
[style*="border:1px solid rgba(255,255,255,0.1)"],
[style*="border:1px solid rgba(255,255,255,0.12)"],
[style*="border-bottom:1px solid var(--b1)"],
[style*="border-bottom:1px solid rgba(255,255,255,0.05)"],
[style*="border-top:1px solid rgba(255,255,255,0.07)"]{border-color:var(--b2)!important}

/* Modals : fond translucide → backdrop clair tamisé */
#qty-modal,#rec-modal,#saved-meals-modal,#shopping-modal{
  background:rgba(20,30,28,0.45)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* Onboarding overlay — fond crème */
#onboarding{background:var(--bg)!important}

/* Streak banner — réinterprétation light */
#streak-banner{background:var(--s1)!important;border:1px solid var(--b2)!important;border-left:3px solid var(--or)!important}
#streak-banner [style*="color:var(--gr)"],#streak-banner span{color:var(--gr)!important}

/* food-item / food-item-name hardcoded colors fix */
.food-item-name{color:var(--t1)}
.food-item-sub{color:var(--t3)}
.food-item-kcal{color:var(--gr)}

/* Macros prot bar — couleur native bleue laissée mais désaturée pour cohérence brand */

/* Charts (Chart.js) : datasets hardcodés en JS — désaturation visuelle légère */
canvas{filter:saturate(0.78)}
.macros-head canvas,.donut-canvas,#auj-donut,#macro-donut{filter:saturate(0.9)}
#macro-donut{display:block;width:80px!important;height:80px!important;}


/* ── PROFIL PAGE ── */
.profil-header{display:flex;align-items:center;gap:14px;padding:16px 0 20px}
.profil-avatar{width:56px;height:56px;border-radius:50%;background:var(--gr);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;color:#FFFFFF;font-family:var(--font-mono)}
.profil-header-info{flex:1;min-width:0}
.profil-name{font-size:20px;font-weight:700;color:var(--t1);font-family:'Syne',sans-serif}
.profil-sub{font-size:12px;color:var(--t2);margin-top:2px}
.profil-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.profil-section-label{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--t3);padding:16px 0 6px}
.profil-group{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden;margin-bottom:4px}
.profil-row{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;background:none;border:none;cursor:pointer;text-align:left;min-height:52px}
.profil-row-icon{font-size:16px;flex-shrink:0;width:22px;text-align:center}
.profil-row-label{flex:1;font-size:14px;color:var(--t1);font-family:'Inter',sans-serif}
.profil-row-value{font-size:12.5px;color:var(--t2);margin-right:4px}
.profil-row-chevron{font-size:18px;color:var(--t3);flex-shrink:0;font-weight:300}
.profil-row-sep{height:1px;background:var(--b1);margin:0 16px}
.profil-mode-toggle{display:flex;background:var(--s2);border:1px solid var(--b1);border-radius:6px;padding:2px;gap:2px;flex-shrink:0}
.profil-mode-btn{padding:4px 12px;border:none;border-radius:4px;font-family:'Syne',sans-serif;font-size:11.5px;font-weight:700;cursor:pointer;background:transparent;color:var(--t2)}
.profil-mode-btn.on{background:var(--gr);color:#FFFFFF}

/* ═══ SUIVI ACCORDÉONS ═══ */
.suivi-section{background:var(--s1);border-radius:var(--r);border:1px solid var(--b2);margin-bottom:10px;overflow:hidden}
.suivi-section-header{width:100%;display:flex;align-items:center;padding:14px 16px;background:none;border:none;cursor:pointer;text-align:left;gap:8px}
.suivi-section-header.open{border-bottom:1px solid var(--b1)}
.suivi-section-title{font-size:14px;font-weight:500;color:var(--t1);flex:1;font-family:var(--font-body)}
.suivi-section-meta{font-size:12px;color:var(--t3)}
.suivi-section-arrow{font-size:10px;color:var(--t3);flex-shrink:0}
.suivi-section-body{padding:14px 16px}
.fav-tab-btn{flex:1;padding:7px 4px;border:none;border-radius:var(--r2);background:var(--s2);color:var(--t2);font-family:'Syne',sans-serif;font-size:12px;font-weight:700;cursor:pointer}
.fav-tab-btn.on{background:var(--gr);color:#FFFFFF}

.res-tab-btn{flex:1;padding:7px 4px;border:none;border-radius:5px;background:transparent;color:var(--t2);font-family:var(--font-body);font-size:11px;font-weight:500;cursor:pointer}
.res-tab-btn.on{background:var(--s1);color:var(--t1);font-weight:600;box-shadow:0 1px 3px rgba(31,61,58,0.08);border-radius:7px}

@keyframes spin{to{transform:rotate(360deg)}}

/* ── Feedback visuel au tap ── */
button:active, [onclick]:active {
  transform: scale(0.95);
  opacity: 0.85;
  transition: transform 0.08s ease, opacity 0.08s ease;
}
.btn:active {
  transform: scale(0.97);
  opacity: 0.9;
  transition: transform 0.08s, opacity 0.08s;
}
/* Animation checkmark pour les boutons save */
@keyframes saveFlash {
  0%   { box-shadow: 0 0 0 0 rgba(34,214,138,0.5); }
  50%  { box-shadow: 0 0 0 8px rgba(34,214,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,214,138,0); }
}
.btn-save-flash {
  animation: saveFlash 0.4s ease-out;
}
[style*="Syne"]{font-family:'Inter',sans-serif !important}
[style*="font-family:'Syne'"]{font-family:'Inter',sans-serif !important}

/* ══ LOGIN OVERLAY (Hygie Server) ══ */
#login-overlay{
  position:fixed;inset:0;background:var(--bg);z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px;
}
#login-overlay.hidden{display:none}
.login-box{
  width:100%;max-width:380px;background:var(--s1);border:1px solid var(--b2);
  border-radius:var(--r);padding:28px 24px;
  box-shadow:0 4px 24px rgba(31,61,58,0.10)
}
.login-logo{
  font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--t3);margin-bottom:24px;text-align:center
}
.login-tabs{
  display:flex;background:var(--s3);border-radius:8px;padding:3px;
  gap:3px;margin-bottom:22px
}
.login-tab{
  flex:1;padding:8px;border:none;background:transparent;border-radius:6px;
  color:var(--t2);font-family:var(--font-body);font-size:13px;font-weight:600;
  cursor:pointer;transition:all 0.15s
}
.login-tab.on{
  background:var(--s1);color:var(--t1);
  box-shadow:0 1px 3px rgba(31,61,58,0.08)
}
.login-field{margin-bottom:14px}
.login-field label{
  display:block;font-size:11.5px;font-weight:600;color:var(--t2);margin-bottom:6px
}
.login-err{
  font-size:12px;color:var(--re);margin-top:10px;display:none;
  padding:8px 12px;background:var(--re-a);border-radius:6px;
  border-left:2px solid var(--re)
}
.login-spinner{
  display:none;width:16px;height:16px;
  border:2px solid rgba(255,255,255,0.35);border-top-color:#fff;
  border-radius:50%;animation:spin 0.7s linear infinite
}

/* ══ MOBILE POLISH — iOS touch & safe areas ══ */
/* Prevent 300ms tap delay on all interactive elements */
button,a,[role=button],.btn,.bn,.tgl-btn,.suivi-section-header,.cct{touch-action:manipulation}
/* Prevent iOS font size bump on input focus */
input[type=text],input[type=number],input[type=date],input[type=email],select,textarea{font-size:max(16px,14px)}
/* Bottom sheets: max-height with internal scroll so keyboard doesn't clip content */
.bottom-sheet-inner{max-height:90dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* Modals: cap height to viewport, add scroll */
[id$="-modal"] > div,[id$="-modal"] > .modal-sheet{max-height:95dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* dvh fallback for browsers without dvh */
@supports not (height:1dvh){
  .bottom-sheet-inner{max-height:90vh}
  [id$="-modal"] > div,[id$="-modal"] > .modal-sheet{max-height:95vh}
}

/* ══ MOBILE 390px FIXES ══ */
@media(max-width:420px){
  /* Priority card: shrink message text to avoid overflow */
  .priority-msg{font-size:18px}
  /* Cal hero number: reduce on very small screens */
  .cal-num{font-size:36px}
  /* Stat numbers: reduce size */
  .stat-num{font-size:22px}
  .kpi-num{font-size:22px}
  /* Protein preset chips: allow horizontal scroll on very small screens */
  .prot-preset-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  /* Protein table tags: allow wrapping so they don't push layout */
  .prow-val{flex-wrap:wrap;gap:4px}
  /* adj-row: if 4 columns are used, reduce to 2x2 */
  .adj-row{grid-template-columns:repeat(2,1fr)}
  /* Login box padding */
  .login-box{padding:22px 18px}
  /* Reduce page horizontal padding */
  .page{padding-left:10px;padding-right:10px}
  /* Enlarge action buttons for easier tapping */
  .auj-action-btn{min-height:54px}
}