:root {
  --bg: #080c0a; --surface: #0f1510; --surface2: #162019;
  --border: #1e2d22; --border2: #263a2b;
  --accent: #7dff6b; --accent-dim: #4ab83e; --accent-glow: rgba(125,255,107,0.12);
  --orange: #ff8c42; --blue: #4fc3f7; --purple: #b39ddb;
  --text: #e8f0ea; --muted: #9db3a5; --muted2: #7a9484;
  --danger: #ff5252; --success: #7dff6b; --warning: #ffca28;
  --radius: 10px; --radius-sm: 8px;
}
*{box-sizing:border-box;margin:0;padding:0}

/* ── REUSABLE UTILITY CLASSES (extracted from inline styles) ── */
.text-sm-muted{font-size:0.82rem;color:var(--muted)}
.text-xs-muted{font-size:0.72rem;color:var(--muted)}
.text-xs-muted2{font-size:0.65rem;color:var(--muted2)}
.text-sm-muted2{font-size:0.75rem;color:var(--muted)}
.mb1{margin-bottom:0.75rem}.mb-half{margin-bottom:0.5rem}
.explore-icon{font-size:1.2rem;margin-bottom:0.3rem}
.explore-title{font-weight:700;font-size:0.85rem;margin-bottom:0.2rem}
.explore-desc{font-size:0.78rem;color:var(--muted);line-height:1.4}
.explore-card{cursor:pointer;padding:0.85rem;margin:0}
.detail-row{display:flex;justify-content:space-between;font-size:0.78rem;padding:0.2rem 0;border-bottom:1px solid rgba(30,45,34,0.4)}
.detail-label{flex:0 0 80px;font-weight:600;color:var(--text)}

/* ── HELP TOOLTIPS — tap ? icon to see beginner-friendly explanations ── */
.help-tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--surface2);border:1px solid var(--border2);color:var(--muted);font-size:9px;font-weight:800;cursor:pointer;vertical-align:middle;margin-left:4px;flex-shrink:0;position:relative;-webkit-tap-highlight-color:transparent;line-height:1;font-family:'DM Sans',sans-serif}
/* Invisible hit-area expansion: the visual stays a 16px circle, but the tap
   target becomes ~36px — these "?" explainers are aimed at exactly the
   audience with the least precise taps. */
.help-tip::after{content:'';position:absolute;inset:-10px}
.help-tip:hover,.help-tip:focus{background:var(--accent-glow);border-color:var(--accent-dim);color:var(--accent)}
.help-tip-bubble{display:none;position:fixed;background:var(--surface);border:1px solid var(--border2);border-radius:8px;padding:0.6rem 0.8rem;font-size:0.85rem;font-weight:400;color:var(--text);line-height:1.5;width:230px;max-width:calc(100vw - 2rem);z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,0.4);text-align:left;pointer-events:auto}
.help-tip.open .help-tip-bubble{display:block}
@media(max-width:768px){.help-tip-bubble{width:210px}}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden}
/* Consistent touch behaviour on every interactive element: no grey flash on
   tap, no double-tap zoom delay on rapid taps (e.g. ticking meals). */
button,[onclick]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(125,255,107,0.04),transparent);pointer-events:none;z-index:0}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;background:rgba(8,12,10,0.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.logo{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:3px;color:var(--accent);display:flex;align-items:center;gap:0.5rem}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.nav-tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tab{padding:0 0.9rem;height:58px;display:flex;align-items:center;font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:all 0.2s;white-space:nowrap;user-select:none}
.nav-tab:hover{color:var(--text)}
.nav-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
/* ── MORE DROPDOWN ── */
.nav-more-wrapper{position:relative;display:flex;align-items:stretch}
.nav-more-btn{user-select:none}
.more-dropdown{display:none;position:fixed;min-width:200px;background:var(--surface);border:1px solid var(--border2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:1000;padding:0.5rem 0;max-height:70vh;overflow-y:auto}
.more-dropdown.open{display:block}
.more-section-label{padding:0.55rem 1rem 0.25rem;font-size:0.6rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.more-item{padding:0.55rem 1rem;font-size:0.78rem;cursor:pointer;color:var(--text);transition:background 0.15s;display:flex;align-items:center;gap:0.35rem;white-space:nowrap}
.more-item:hover{background:var(--surface2);color:var(--accent)}
.more-item.active{color:var(--accent);font-weight:600}
.more-locked{opacity:0.45;pointer-events:none}
.coach-mode .more-locked{opacity:0.65;pointer-events:auto;cursor:default}
.coach-mode .lock-icon{display:none}
.nav-right{display:flex;align-items:center;gap:0.75rem;flex-shrink:0}
.client-badge{display:flex;align-items:center;gap:0.5rem;padding:0.3rem 0.75rem;background:var(--surface2);border:1px solid var(--border2);border-radius:99px;font-size:0.75rem;cursor:pointer;transition:border-color 0.2s}
.client-badge:hover{border-color:var(--accent)}
.avatar{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#000;display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:800}

/* ── APP ── */
.app{padding-top:58px;position:relative}
.section{display:none;padding:1.75rem 1.5rem;max-width:1360px;margin:0 auto;animation:fadeIn 0.2s ease}
.section.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── TYPE ── */
.page-title{font-family:'Bebas Neue',sans-serif;font-size:3rem;letter-spacing:2px;line-height:1;margin-bottom:0.2rem}
.page-title em{color:var(--accent);font-style:normal}
.page-sub{color:var(--muted);font-size:0.85rem;margin-bottom:1.75rem}
.section-label{font-size:0.65rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:0.6rem}
.card-title{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:1px;color:var(--accent);margin-bottom:1rem}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.card-glass{background:rgba(15,21,16,0.7);backdrop-filter:blur(8px);border:1px solid var(--border2);border-radius:var(--radius);padding:1.25rem}

/* ── GRID ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ── STAT PILLS ── */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.25rem}
@media(max-width:700px){.stat-row{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);opacity:0.3}
.stat.green::before{background:var(--accent)}
.stat.orange::before{background:var(--orange)}
.stat.blue::before{background:var(--blue)}
.stat.purple::before{background:var(--purple)}
.stat-val{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;line-height:1;color:var(--text);margin-bottom:0.15rem}
.stat-val .unit{font-size:1.1rem;color:var(--muted)}
.stat-lbl{font-size:0.67rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted)}
.stat-delta{font-size:0.72rem;margin-top:0.2rem;font-family:'DM Mono',monospace}
.stat-delta.pos{color:var(--accent)}
.stat-delta.neg{color:var(--danger)}
/* Colored stat values */
.stat.green .stat-val{color:var(--accent)}
.stat.orange .stat-val{color:var(--orange)}
.stat.blue .stat-val{color:var(--blue)}
.stat.purple .stat-val{color:var(--purple)}

/* ── DASHBOARD REDESIGN ── */
/* Welcome banner */
.db-welcome{margin-bottom:1.25rem}
.db-welcome-tag{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:0.3rem}
.db-welcome-title{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;letter-spacing:2px;line-height:1}
.db-welcome-title em{color:var(--accent);font-style:normal}
.db-welcome-sub{font-size:0.82rem;color:var(--muted);margin-top:0.3rem}

/* Next action banner */
.db-next-action{background:linear-gradient(135deg,rgba(125,255,107,0.07),rgba(125,255,107,0.03));border:1px solid rgba(125,255,107,0.2);border-radius:var(--radius);padding:1rem 1.1rem;display:flex;align-items:center;gap:1rem;margin-bottom:1rem;cursor:pointer;transition:border-color 0.15s}
.db-next-action:hover{border-color:rgba(125,255,107,0.4)}
.na-icon{font-size:1.5rem;flex-shrink:0}
.na-label{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--accent);margin-bottom:0.2rem}
.na-title{font-size:0.88rem;font-weight:600}
.na-sub{font-size:0.75rem;color:var(--muted)}
.na-arrow{font-size:1.1rem;color:var(--accent);margin-left:auto;flex-shrink:0}

/* Main 2-col grid (legacy — no longer used, kept for compatibility) */
.db-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
@media(max-width:900px){.db-main-grid{grid-template-columns:1fr}}

/* Today's Progress card — macro bars */
.db-prog-row{display:flex;align-items:center;gap:0.5rem}
.db-prog-label{font-size:0.68rem;font-weight:700;width:3.2rem;flex-shrink:0}
.db-prog-track{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.db-prog-fill{height:100%;border-radius:3px;transition:width 0.5s ease}
.db-prog-num{font-size:0.65rem;color:var(--muted);font-family:'DM Mono',monospace;min-width:5.5rem;text-align:right;flex-shrink:0}
@media(max-width:500px){.db-prog-num{display:none}}

/* Phase badge row inside portion guide */
.db-phase-row{display:flex;align-items:center;gap:0.5rem;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:0.65rem 0.85rem;margin-bottom:0.75rem}
.db-phase-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);flex-shrink:0}
.db-phase-dot.bulk{background:var(--accent)}
.db-phase-dot.maintain{background:var(--blue)}
.db-phase-dot.cut{background:var(--danger)}
.db-phase-dot.mini{background:var(--orange)}
.db-phase-name{font-size:0.8rem;font-weight:600}
.db-phase-detail{font-size:0.7rem;color:var(--muted);font-family:'DM Mono',monospace}
.db-phase-week{font-size:10px;color:var(--muted2);background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:0.15rem 0.5rem;white-space:nowrap;flex-shrink:0}

/* Today's plate portion grid */
.db-plate-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:0.75rem}
.db-plate-item{background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:0.65rem 0.75rem;display:flex;align-items:flex-start;gap:0.55rem}
.db-plate-icon{font-size:1.3rem;flex-shrink:0;line-height:1.2}
.db-plate-name{font-size:0.77rem;font-weight:600;margin-bottom:0.15rem}
.db-plate-amount{font-size:0.68rem;color:var(--accent);font-family:'DM Mono',monospace}
.db-plate-ex{font-size:0.65rem;color:var(--muted);line-height:1.4;margin-top:0.15rem}

/* Meal timeline / quick rules */
.db-quick-rules{margin-top:0.85rem;padding-top:0.85rem;border-top:1px solid var(--border)}
.db-rules-text{font-size:0.75rem;color:var(--muted);line-height:1.7}

/* Portion guide full-width section */
.db-phase-tabs{display:flex;gap:0.4rem;margin-bottom:0.85rem;flex-wrap:wrap}
.db-ptab{padding:0.35rem 0.75rem;border:1.5px solid var(--border2);border-radius:99px;font-size:0.72rem;font-weight:600;cursor:pointer;transition:all 0.15s;color:var(--muted);background:none}
.db-ptab:hover{border-color:var(--accent-dim);color:var(--text)}
.db-ptab.active{border-color:var(--accent);color:var(--accent);background:rgba(125,255,107,0.08)}
.db-portion-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:0.6rem;margin-bottom:0.6rem}
@media(max-width:700px){.db-portion-cards{grid-template-columns:repeat(2,1fr)}}
.db-pc{background:var(--surface2);border-radius:8px;padding:0.8rem;text-align:center;border:1px solid var(--border2)}
.db-pc.removed{opacity:0.35}
.db-pc-icon{font-size:1.5rem;margin-bottom:0.35rem}
.db-pc-amount{font-size:0.7rem;font-weight:700;color:var(--accent);font-family:'DM Mono',monospace;margin-bottom:0.25rem}
.db-pc-type{font-size:0.72rem;font-weight:600;margin-bottom:0.3rem}
.db-pc-ex{font-size:0.65rem;color:var(--muted);line-height:1.45}
.db-phase-rule{background:rgba(125,255,107,0.06);border:1px solid rgba(125,255,107,0.12);border-radius:7px;padding:0.6rem 0.85rem;font-size:0.75rem;color:var(--muted);line-height:1.5}
.db-phase-rule strong{color:var(--accent)}
/* In coach mode, hide the client-facing dashboard (welcome, stats, plate etc.) */
body.coach-mode #db-client-view{display:none}
body.coach-mode .db-welcome{display:none}

/* ── PROGRESS BARS ── */
.prog-wrap{margin-bottom:0.85rem}
.prog-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.35rem}
.prog-name{font-size:0.8rem;font-weight:500}
.prog-nums{font-family:'DM Mono',monospace;font-size:0.72rem;color:var(--muted)}
.prog-track{height:6px;background:var(--surface2);border-radius:99px;overflow:hidden}
.prog-fill{height:100%;border-radius:99px;transition:width 1s cubic-bezier(.34,1.56,.64,1)}
.prog-fill.cal{background:linear-gradient(90deg,var(--accent-dim),var(--accent))}
.prog-fill.prot{background:var(--orange)}
.prog-fill.carb{background:var(--blue)}
.prog-fill.fat{background:var(--purple)}
.prog-fill.fiber{background:var(--success)}
.prog-fill.over{background:var(--danger)}

/* ── FORMS ── */
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:0.4rem}
.form-input,.form-select,.form-textarea{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:0.6rem 0.8rem;color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.88rem;outline:none;transition:border-color 0.2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent)}
.form-select option{background:var(--surface2);color:var(--text)}
.form-textarea{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
@media(max-width:600px){.form-row,.form-row3{grid-template-columns:1fr}}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.65rem 1.2rem;min-height:44px;border-radius:var(--radius-sm);font-size:0.82rem;font-weight:600;cursor:pointer;border:none;transition:all 0.15s;font-family:'DM Sans',sans-serif;letter-spacing:0.02em;white-space:nowrap}
.btn-primary{background:var(--accent);color:#000}
.btn-primary:hover{background:#8fff7d;transform:translateY(-1px);box-shadow:0 4px 20px rgba(125,255,107,0.25)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{background:rgba(255,82,82,0.15);color:var(--danger);border:1px solid rgba(255,82,82,0.3)}
.btn:disabled{opacity:0.6;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(0,0,0,0.2);border-top-color:#000;border-radius:50%;animation:spin 0.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-danger:hover{background:rgba(255,82,82,0.25)}
.btn-sm{padding:0.35rem 0.8rem;font-size:0.75rem}
.btn-row{display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center}
/* Focus-visible — keyboard accessibility */
.btn:focus-visible,.nav-tab:focus-visible,.mode-btn:focus-visible,.more-item:focus-visible,.dt-btn:focus-visible,.cp-tab:focus-visible,.health-chip:focus-visible,.intake-choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 4px var(--accent-glow)}
.form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ── BADGES ── */
.badge{display:inline-block;padding:0.18rem 0.55rem;border-radius:99px;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em}
.badge-cut{background:rgba(255,82,82,0.15);color:#ff7979;border:1px solid rgba(255,82,82,0.25)}
.badge-bulk{background:rgba(125,255,107,0.1);color:var(--accent);border:1px solid rgba(125,255,107,0.2)}
.badge-maintain{background:rgba(79,195,247,0.12);color:var(--blue);border:1px solid rgba(79,195,247,0.2)}
.badge-minicut{background:rgba(255,140,66,0.12);color:var(--orange);border:1px solid rgba(255,140,66,0.2)}
.badge-active{background:rgba(125,255,107,0.15);color:var(--accent);border:1px solid rgba(125,255,107,0.3)}

/* ── TABLE ── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -0.25rem;padding:0 0.25rem}
.tbl{width:100%;border-collapse:collapse;font-size:0.83rem}
.tbl th{text-align:left;padding:0.5rem 0.8rem;font-size:0.64rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.09em;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}
.tbl td{padding:0.65rem 0.8rem;border-bottom:1px solid rgba(30,45,34,0.6)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(125,255,107,0.02)}
.mono{font-family:'DM Mono',monospace;font-size:0.8rem}

/* ── DIVIDER ── */
.divider{height:1px;background:var(--border);margin:1.25rem 0}

/* ── MEAL CARDS ── */
.meal-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:0.6rem;overflow:hidden;transition:border-color 0.2s}
.meal-card:hover{border-color:var(--border2)}
.meal-head{display:flex;align-items:center;justify-content:space-between;padding:0.85rem 1rem;cursor:pointer;user-select:none}
.meal-time{font-family:'DM Mono',monospace;font-size:0.75rem;color:var(--accent);margin-right:0.75rem;flex-shrink:0}
.meal-name{font-weight:600;font-size:0.9rem;flex:1}
.meal-macro-pills{display:flex;gap:0.5rem;align-items:center}
.mp{font-size:0.72rem;font-family:'DM Mono',monospace;padding:0.15rem 0.4rem;border-radius:4px}
.mp.p{color:var(--orange);background:rgba(255,140,66,0.1)}
.mp.c{color:var(--blue);background:rgba(79,195,247,0.1)}
.mp.f{color:var(--purple);background:rgba(179,157,219,0.1)}
.mp.k{color:var(--accent);background:var(--accent-glow)}
.meal-body{display:none;padding:0.75rem 1rem;border-top:1px solid var(--border)}
.meal-body.open{display:block}
.ing-row{display:flex;justify-content:space-between;padding:0.35rem 0;border-bottom:1px solid rgba(30,45,34,0.5);font-size:0.82rem}
.ing-row:last-child{border-bottom:none}
.ing-macros{font-family:'DM Mono',monospace;font-size:0.72rem;color:var(--muted)}

/* ── PHASE TIMELINE ── */
.timeline{padding-left:1.4rem;position:relative}
.timeline::before{content:'';position:absolute;left:7px;top:4px;bottom:4px;width:1px;background:var(--border2)}
.tl-item{position:relative;margin-bottom:1.25rem}
.tl-dot{position:absolute;left:-1.4rem;top:3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg)}
.tl-dot.cut{background:var(--danger)}
.tl-dot.bulk{background:var(--accent)}
.tl-dot.maintain{background:var(--blue)}
.tl-dot.minicut{background:var(--orange)}
.tl-title{font-weight:600;font-size:0.9rem;display:flex;align-items:center;gap:0.5rem}
.tl-info{font-size:0.78rem;color:var(--muted);font-family:'DM Mono',monospace;margin-top:0.2rem}

/* ── RESULT BOX ── */
.result-box{background:var(--surface2);border:1px solid var(--accent-dim);border-radius:var(--radius);padding:1.1rem;margin-top:1rem}
.result-row{display:flex;justify-content:space-between;padding:0.38rem 0;border-bottom:1px solid rgba(30,45,34,0.6);font-size:0.84rem}
.result-row:last-child{border-bottom:none}
.result-val{font-family:'DM Mono',monospace;color:var(--accent);font-weight:600}

/* ── CHECKIN WIZARD ── */
.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0.4rem;margin:0.75rem 0}
.day-inp{text-align:center}
.day-inp .day-lbl{font-size:0.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.3rem}
.day-inp input{width:100%;text-align:center;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:0.45rem 0.1rem;color:var(--text);font-family:'DM Mono',monospace;font-size:0.82rem;outline:none;transition:border-color 0.2s}
.day-inp input:focus{border-color:var(--accent)}

/* ── ALERT BANNER ── */
.alert{display:flex;gap:0.65rem;padding:0.85rem 1rem;border-radius:var(--radius);margin-bottom:1.1rem;font-size:0.83rem;align-items:flex-start}
.alert.info{background:rgba(125,255,107,0.05);border:1px solid rgba(125,255,107,0.18)}
.alert.warning{background:rgba(255,202,40,0.06);border:1px solid rgba(255,202,40,0.2)}
.alert.danger{background:rgba(255,82,82,0.06);border:1px solid rgba(255,82,82,0.2)}
.alert-icon{font-size:1rem;flex-shrink:0;margin-top:1px}

/* ── SHOPPING LIST ── */
.shop-item{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid rgba(30,45,34,0.5);font-size:0.84rem}
.shop-item:last-child{border-bottom:none}
.shop-item label{display:flex;align-items:center;gap:0.6rem;cursor:pointer;flex:1}
.shop-item label.checked{text-decoration:line-through;color:var(--muted)}
.shop-item input[type=checkbox]{accent-color:var(--accent);width:20px;height:20px;cursor:pointer;flex-shrink:0}
.shop-amt{font-family:'DM Mono',monospace;font-size:0.73rem;color:var(--muted)}

/* ── SUPP ROW ── */
.supp-row{display:flex;align-items:center;padding:0.65rem 0;border-bottom:1px solid rgba(30,45,34,0.5);gap:1rem;font-size:0.83rem}
.supp-row:last-child{border-bottom:none}
.supp-name{flex:2;font-weight:500}
.supp-dose{flex:1;font-family:'DM Mono',monospace;font-size:0.76rem;color:var(--muted)}
.supp-timing{flex:1.5}
.timing-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle}

/* ── FOOD SEARCH DROPDOWN ── */
.food-search-wrap{position:relative}
.food-results{position:absolute;top:100%;left:0;right:0;z-index:50;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-sm);max-height:300px;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,0.6);display:none}
.food-result-item{padding:0.6rem 0.9rem;cursor:pointer;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:0.5rem;font-size:0.83rem;transition:background 0.1s}
.food-result-item:hover{background:var(--surface2)}
.food-result-item:last-child{border-bottom:none}
.food-macros-mini{font-size:0.68rem;color:var(--muted);font-family:'DM Mono',monospace;margin-top:0.15rem}
/* Category filter tabs */
.food-cat-tabs{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.1rem}
.food-cat-tab{padding:0.3rem 0.75rem;border-radius:20px;border:1.5px solid var(--border2);background:transparent;color:var(--muted);font-size:0.75rem;cursor:pointer;transition:all 0.15s;font-family:inherit}
.food-cat-tab:hover{border-color:var(--accent);color:var(--text)}
.food-cat-tab.active{border-color:var(--accent);background:var(--accent-glow);color:var(--accent);font-weight:600}
/* Food type badges */
.food-badge{font-size:0.65rem;padding:0.2rem 0.5rem;border-radius:10px;white-space:nowrap;flex-shrink:0;font-weight:600}
.food-badge-food{background:rgba(0,213,160,0.12);color:var(--accent)}
.food-badge-takeaway{background:rgba(255,140,0,0.14);color:var(--orange)}
.food-badge-recipe{background:rgba(130,80,255,0.14);color:var(--purple)}
/* Recent food chips */
.recent-food-chip{padding:0.25rem 0.65rem;border-radius:20px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);font-size:0.73rem;cursor:pointer;transition:all 0.12s;font-family:inherit;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.recent-food-chip:hover{border-color:var(--accent);color:var(--accent)}

/* ── DAY TYPE TABS ── */
.day-type-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1.25rem}
.dt-btn{padding:0.9rem 0.5rem;text-align:center;border-radius:var(--radius);border:1.5px solid var(--border);cursor:pointer;background:var(--surface2);transition:all 0.15s;user-select:none}
.dt-btn .dt-name{font-weight:600;font-size:0.88rem}
.dt-btn .dt-cal{font-size:0.72rem;color:var(--muted);margin-top:0.15rem;font-family:'DM Mono',monospace}
.dt-btn.selected{border-color:var(--accent);background:var(--accent-glow)}
.dt-btn.selected .dt-name{color:var(--accent)}

/* ── TOAST ── */
.toast{position:fixed;bottom:1.75rem;right:1.75rem;left:auto;z-index:999;background:var(--surface);border:1px solid var(--accent-dim);color:var(--text);padding:0.85rem 1.2rem;border-radius:var(--radius);font-size:0.84rem;font-weight:500;transform:translateY(80px);opacity:0;transition:all 0.3s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;gap:0.6rem;box-shadow:0 8px 32px rgba(0,0,0,0.4);max-width:340px}
.toast.show{transform:translateY(0);opacity:1}
.toast-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* ── ADJUSTMENT RESULT ── */
.adj-panel{border:1px solid rgba(125,255,107,0.25);background:rgba(125,255,107,0.04);border-radius:var(--radius);padding:1.1rem;margin-top:1rem}
.adj-title{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--accent);letter-spacing:1px;margin-bottom:0.75rem;display:flex;align-items:center;gap:0.5rem}
.adj-change{display:flex;align-items:center;gap:0.5rem;font-size:0.83rem;margin-bottom:0.4rem;font-family:'DM Mono',monospace}
.adj-change .old{color:var(--muted);text-decoration:line-through}
.adj-change .arrow{color:var(--muted)}
.adj-change .new{color:var(--accent);font-weight:600}
.adj-reason{font-size:0.8rem;color:var(--muted);line-height:1.5;margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid var(--border)}

/* ── FLEX UTILS ── */
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-gap{display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap}
.mt1{margin-top:0.75rem}.mt2{margin-top:1.25rem}.mb1{margin-bottom:0.75rem}.mb2{margin-bottom:1.25rem}
.text-muted{color:var(--muted);font-size:0.84rem}
.text-accent{color:var(--accent)}
.text-orange{color:var(--orange)}

/* ── ONBOARDING MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem}
/* max-height + overflow: without these, tall modals (e.g. the onboarding form
   at 375px) were clipped off-screen with the submit button unreachable. */
.modal{position:relative;background:var(--surface);border:1px solid var(--border2);border-radius:14px;width:100%;max-width:560px;padding:2rem;animation:fadeIn 0.3s ease;max-height:calc(100dvh - 2rem);overflow-y:auto}
.modal-title{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:2px;margin-bottom:0.25rem}
.modal-sub{color:var(--muted);font-size:0.85rem;margin-bottom:1.5rem}
.hidden{display:none}

/* ── MACRO CHANGE HIGHLIGHT ── */
@keyframes flash{0%{background:rgba(125,255,107,0.2)}100%{background:transparent}}
.flashed{animation:flash 1.5s ease}

/* ── AD LIBITUM TIPS ACCORDION ── */
.al-tip-row{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:0.4rem;overflow:hidden;cursor:pointer;transition:border-color 0.15s}
.al-tip-row:hover{border-color:var(--border2)}
.al-tip-head{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;user-select:none}
.al-tip-num{width:22px;height:22px;border-radius:50%;background:var(--accent-glow);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--accent);flex-shrink:0;font-family:'DM Mono',monospace}
.al-tip-chevron{font-size:1.2rem;color:var(--muted);transition:transform 0.2s;flex-shrink:0}
.al-tip-body{display:none;padding:0 1rem 0.75rem 1rem;font-size:0.8rem;color:var(--muted);line-height:1.6;border-top:1px solid var(--border)}
.al-tip-body.open{display:block}
/* ── SATIETY RANK STRIP ── */
.si-rank-bar{height:8px;border-radius:99px;margin-top:0.25rem}

/* ══ MODE TOGGLE BUTTON (nav, coach-only) ══ */
.mode-toggle-btn{background:transparent;border:1px solid rgba(255,140,66,0.4);border-radius:20px;padding:0.22rem 0.7rem;font-size:0.68rem;font-weight:600;color:var(--orange);cursor:pointer;font-family:'DM Sans',sans-serif;letter-spacing:0.04em;transition:all 0.2s;white-space:nowrap}
.mode-toggle-btn:hover{border-color:var(--orange);background:rgba(255,140,66,0.12)}
body.coach-mode .mode-toggle-btn{color:var(--accent);border-color:rgba(125,255,107,0.4)}
body.coach-mode .mode-toggle-btn:hover{border-color:var(--accent);background:rgba(125,255,107,0.1)}
.nav-tab.tier-locked{display:none!important}
.coach-mode .nav-tab.tier-locked{display:flex!important}

/* ══ INTAKE QUESTIONNAIRE OVERLAY ══ */
.intake-overlay{position:fixed;inset:0;z-index:400;background:var(--bg);overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem 4rem}
.intake-overlay.hidden{display:none}

/* ── Package Landing Page ── */
.package-landing{position:fixed;inset:0;z-index:390;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:1.5rem;animation:pkgFadeIn 0.4s ease}
.package-landing.hidden{display:none}
@keyframes pkgFadeIn{from{opacity:0}to{opacity:1}}
.package-landing-inner{text-align:center;max-width:520px;width:100%}
.package-landing-logo{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:0.12em;color:var(--text);display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-bottom:0.5rem}
.package-landing-logo .logo-dot{width:10px;height:10px;background:var(--accent);border-radius:50%;flex-shrink:0}
.package-landing-sub{font-size:0.88rem;color:var(--muted);margin-bottom:2rem}
.package-landing-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}
.package-card{background:var(--card);border:2px solid var(--border);border-radius:16px;padding:2rem 1.25rem;cursor:pointer;transition:all 0.25s ease;display:flex;flex-direction:column;align-items:center;gap:0.6rem;text-align:center;-webkit-tap-highlight-color:transparent}
.package-card:hover,.package-card:focus{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.25)}
.package-card:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.package-card-icon{font-size:2.5rem;margin-bottom:0.25rem}
.package-card-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:0.06em;color:var(--text)}
.package-card-desc{font-size:0.78rem;color:var(--muted);line-height:1.45}
.package-landing-hint{font-size:0.72rem;color:var(--muted2)}
@media(max-width:480px){
  .package-landing-cards{grid-template-columns:1fr 1fr;gap:0.75rem}
  .package-card{padding:1.5rem 1rem;border-radius:14px}
  .package-card-icon{font-size:2rem}
  .package-card-title{font-size:1.3rem}
}
.intake-card{width:100%;max-width:680px}
.intake-logo{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:4px;color:var(--accent);text-align:center;margin-bottom:0.4rem}
.intake-tagline{color:var(--muted);font-size:0.82rem;text-align:center;margin-bottom:2rem}
.intake-step{display:none;animation:fadeIn 0.25s ease}
.intake-step.active{display:block}
.intake-step-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:2px;color:var(--text);margin-bottom:0.2rem}
.intake-step-sub{color:var(--muted);font-size:0.8rem;margin-bottom:1.25rem;line-height:1.5}
.intake-progress{display:flex;gap:4px;margin-bottom:1.75rem}
.intake-pip{flex:1;height:3px;border-radius:99px;background:var(--border2);transition:background 0.3s}
.intake-pip.done{background:var(--accent)}
.intake-pip.active-pip{background:rgba(125,255,107,0.5)}
.intake-choice{padding:0.7rem 1rem;border:1.5px solid var(--border2);border-radius:var(--radius);cursor:pointer;transition:all 0.15s;margin-bottom:0.45rem;font-size:0.84rem;line-height:1.5;user-select:none;display:flex;align-items:flex-start;gap:0.6rem}
.intake-choice:hover{background:var(--surface2)}
.intake-choice.selected{border-color:var(--accent);background:rgba(125,255,107,0.05);color:var(--accent)}
.intake-choice-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0;margin-top:1px;transition:all 0.15s}
.intake-choice.selected .intake-choice-dot{border-color:var(--accent);background:var(--accent)}
.intake-nav{display:flex;gap:0.75rem;margin-top:1.25rem}
.intake-health-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem}
@media(max-width:520px){.intake-health-grid{grid-template-columns:1fr}}
.health-chip{display:flex;align-items:center;gap:0.45rem;padding:0.4rem 0.7rem;border:1px solid var(--border);border-radius:99px;cursor:pointer;font-size:0.76rem;transition:all 0.15s;user-select:none;background:var(--surface2)}
.health-chip.selected{border-color:var(--danger);background:rgba(255,82,82,0.06);color:var(--danger)}
.health-chip-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);flex-shrink:0}
.health-chip.selected .health-chip-dot{background:var(--danger)}

/* ══ CLIENT JOURNEY VIEW ══ */
#journey-view{display:none;padding:1.75rem 1.5rem;max-width:860px;margin:0 auto;animation:fadeIn 0.3s ease}
#journey-view.active{display:block}
.journey-greeting{margin-bottom:1.75rem}
.journey-greeting h1{font-family:'Bebas Neue',sans-serif;font-size:2.5rem;letter-spacing:2px;line-height:1;margin-bottom:0.2rem}
.journey-greeting p{color:var(--muted);font-size:0.85rem}
.tier-card{border:1.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:0.85rem;transition:border-color 0.2s,box-shadow 0.2s}
.tier-card.current{border-color:var(--accent);box-shadow:0 0 24px rgba(125,255,107,0.07)}
.tier-card.completed{border-color:rgba(125,255,107,0.3)}
.tier-card.locked-tier{opacity:0.6}
.tier-head{display:flex;align-items:center;gap:0.85rem;padding:0.9rem 1.1rem;cursor:pointer;user-select:none;background:var(--surface)}
.tier-emoji{font-size:1.3rem;flex-shrink:0}
.tier-info{flex:1}
.tier-name{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;line-height:1.1}
.tier-subtitle{font-size:0.72rem;color:var(--muted);margin-top:0.1rem}
.tier-status-badge{font-size:0.62rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:0.18rem 0.5rem;border-radius:99px}
.tier-chevron{font-size:1.2rem;color:var(--muted);transition:transform 0.2s;flex-shrink:0}
.tier-body{display:none;padding:0.85rem 1.1rem 1.1rem;border-top:1px solid var(--border);background:var(--surface)}
.tier-body.open{display:block}
.topic-chips{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:0.85rem}
.topic-chip{padding:0.35rem 0.65rem;border-radius:99px;border:1px solid var(--border2);font-size:0.74rem;font-weight:500;cursor:pointer;transition:all 0.15s;background:var(--surface2)}
.topic-chip:hover{border-color:var(--accent);color:var(--accent)}
.topic-chip.chip-locked{opacity:0.5;cursor:default;pointer-events:none}
.unlock-hint-box{font-size:0.76rem;color:var(--muted);padding:0.55rem 0.75rem;background:var(--surface2);border-radius:var(--radius-sm);border-left:2px solid var(--border2);line-height:1.5}

/* ══ COACH CLIENT MANAGER ══ */
.coach-mgr{background:rgba(255,140,66,0.04);border:1px solid rgba(255,140,66,0.2);border-radius:var(--radius);padding:1.1rem;margin-bottom:1.25rem}
.coach-mgr-title{font-family:'Bebas Neue',sans-serif;font-size:0.95rem;letter-spacing:1px;color:var(--orange);margin-bottom:0.75rem;display:flex;align-items:center;gap:0.5rem}
.client-roster-row{display:flex;align-items:center;gap:0.75rem;padding:0.55rem 0;border-bottom:1px solid var(--border);font-size:0.82rem}
.client-roster-row:last-child{border:none}
.tier-pips{display:flex;gap:3px}
.tier-pip{width:10px;height:10px;border-radius:50%;background:var(--border2)}
.tier-pip.lit{background:var(--accent)}
/* ══ PROGRESS PHOTOS + MEASUREMENTS ══ */
.photo-slot{border:2px dashed var(--border2);border-radius:var(--radius);aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;overflow:hidden;position:relative;background:var(--surface2)}
.photo-slot:hover{border-color:var(--accent);background:rgba(125,255,107,0.03)}
.photo-slot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.photo-slot .photo-placeholder{display:flex;flex-direction:column;align-items:center;gap:0.4rem;color:var(--muted2);font-size:0.75rem;z-index:1}
.photo-slot .photo-placeholder .icon{font-size:2rem}
.photo-slot input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.photo-badge{position:absolute;top:6px;left:6px;background:rgba(8,12,10,0.82);padding:0.15rem 0.45rem;border-radius:99px;font-size:0.65rem;font-weight:700;color:var(--accent);z-index:2;backdrop-filter:blur(4px)}
.photo-remove{position:absolute;top:6px;right:6px;background:rgba(255,82,82,0.8);width:34px;height:34px;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:0.85rem;cursor:pointer;z-index:2;color:#fff}
.photo-slot:hover .photo-remove{display:flex}
.meas-table td{padding:0.45rem 0.6rem;font-size:0.82rem;vertical-align:middle}
.meas-table th{font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted2);padding:0.4rem 0.6rem}
.meas-input{width:62px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:0.3rem 0.4rem;color:var(--text);font-size:0.82rem;text-align:center;font-family:'DM Mono',monospace}
.meas-input:focus{outline:none;border-color:var(--accent)}
.delta-pos{color:var(--accent);font-size:0.75rem;font-family:'DM Mono',monospace}
.delta-neg{color:var(--danger);font-size:0.75rem;font-family:'DM Mono',monospace}
.delta-neu{color:var(--muted);font-size:0.75rem;font-family:'DM Mono',monospace}
.reminder-banner{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;border-radius:var(--radius);border:1.5px solid rgba(125,255,107,0.35);background:rgba(125,255,107,0.06);margin-bottom:1.25rem;animation:pulse 2s infinite}
.caliper-site{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem}
.caliper-site label{font-size:0.79rem;color:var(--muted);width:160px;flex-shrink:0}
.checkpoint-tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:thin;border-bottom:1px solid var(--border);margin-bottom:1.25rem}
.cp-tab{padding:0.5rem 0.85rem;font-size:0.72rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:all 0.15s;user-select:none}
.cp-tab:hover{color:var(--text)}
.cp-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.cp-tab.has-data::after{content:'●';color:var(--accent);font-size:0.5rem;margin-left:0.35rem;vertical-align:middle}
/* ══ MENSTRUAL CYCLE TRACKER ══ */
.cycle-wheel{position:relative;width:220px;height:220px;flex-shrink:0}
.cycle-wheel svg{width:100%;height:100%}
.phase-card{border:1.5px solid var(--border);border-radius:var(--radius);padding:0.85rem 1rem;margin-bottom:0.6rem;transition:all 0.2s;cursor:default}
.phase-card.active-phase{box-shadow:0 0 16px rgba(125,255,107,0.12)}
.phase-icon{font-size:1.4rem;flex-shrink:0}
.symptom-chip{display:inline-block;padding:0.2rem 0.55rem;border-radius:99px;font-size:0.72rem;font-weight:600;margin:0.15rem;border:1px solid}
.cycle-log-row{display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0;border-bottom:1px solid var(--border);font-size:0.81rem}
.cycle-log-row:last-child{border:none}
.flow-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ══ DIET PHASE PLANNER ══ */
.phase-block{border-radius:10px;padding:0.85rem 1rem;margin-bottom:0.5rem;border:1.5px solid transparent;transition:all 0.2s}
.phase-block:hover{border-color:rgba(255,255,255,0.1)}
.phase-timeline{position:relative;padding-left:1.5rem}
.phase-timeline::before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--border2);border-radius:2px}
.phase-dot{position:absolute;left:-1.5rem;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;border:2px solid;flex-shrink:0}
.planner-chart-wrap{height:220px;position:relative}
.phase-summary-row{display:flex;gap:0.5rem;align-items:center;padding:0.45rem 0.6rem;border-radius:var(--radius-sm);margin-bottom:0.35rem;font-size:0.8rem}
/* ══ MEAL PLANNER ══ */
.mp-meal-card{border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:0.75rem;transition:border-color 0.2s}
.mp-meal-card:hover{border-color:var(--border2)}
.mp-meal-head{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;background:var(--surface);cursor:pointer;user-select:none}
.mp-meal-time{font-family:'DM Mono',monospace;font-size:0.72rem;color:var(--muted2);flex-shrink:0;width:52px}
.mp-meal-name{font-family:'Bebas Neue',sans-serif;font-size:0.95rem;letter-spacing:1px;flex:1}
.mp-meal-cals{font-family:'DM Mono',monospace;font-size:0.78rem;color:var(--accent);flex-shrink:0}
.mp-meal-body{display:none;padding:0.75rem 1rem;border-top:1px solid var(--border);background:var(--surface)}
.mp-meal-body.open{display:block}
.mp-food-row{display:flex;align-items:flex-start;gap:0.5rem;padding:0.55rem 0;border-bottom:1px solid var(--border);font-size:0.81rem;flex-wrap:wrap}
.mp-food-row:last-child{border:none}
.mp-food-top{display:flex;align-items:center;gap:0.5rem;width:100%}
.mp-food-name{flex:1;min-width:0}
.mp-food-qty{font-family:'DM Mono',monospace;font-size:0.75rem;color:var(--muted2);flex-shrink:0;text-align:right}
.mp-food-macros{display:flex;gap:4px;flex-wrap:wrap;width:100%;padding-top:0.3rem}
.mp-macro-pill{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:99px;font-family:'DM Mono',monospace;font-size:0.67rem;font-weight:600;line-height:1.4;white-space:nowrap}
.mp-macro-pill.cal{background:rgba(125,255,107,0.1);color:var(--accent);border:1px solid rgba(125,255,107,0.2)}
.mp-macro-pill.prot{background:rgba(255,140,66,0.1);color:var(--orange);border:1px solid rgba(255,140,66,0.2)}
.mp-macro-pill.carb{background:rgba(79,195,247,0.1);color:var(--blue);border:1px solid rgba(79,195,247,0.2)}
.mp-macro-pill.fat{background:rgba(179,157,219,0.1);color:var(--purple);border:1px solid rgba(179,157,219,0.2)}
.mp-total-row{display:flex;gap:1rem;flex-wrap:wrap;padding:0.5rem 0.75rem;background:var(--surface2);border-radius:var(--radius-sm);margin-top:0.5rem;font-size:0.78rem}
.mp-total-item{display:flex;gap:0.3rem;align-items:baseline}
.mp-total-val{font-family:'DM Mono',monospace;font-weight:700}
.mp-avoid-chip{padding:0.3rem 0.65rem;border-radius:99px;border:1.5px solid var(--border2);font-size:0.75rem;cursor:pointer;transition:all 0.15s;background:var(--surface2);user-select:none}
.mp-avoid-chip.avoided{border-color:var(--danger);background:rgba(255,82,82,0.06);color:var(--danger)}
.mp-mode-btn.active{background:var(--accent)!important;color:var(--bg)!important}
.mp-meal-pick{padding:0.4rem 0.75rem;border-radius:99px;border:1.5px solid var(--border2);font-size:0.78rem;cursor:pointer;transition:all 0.15s;background:var(--surface2);color:var(--text)}
.mp-meal-pick.active{border-color:var(--accent);background:rgba(125,255,107,0.08);color:var(--accent);font-weight:600}
.mp-log-meal-btn{display:inline-flex;align-items:center;gap:0.3rem;padding:0.3rem 0.65rem;border-radius:var(--radius-sm);border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:0.72rem;cursor:pointer;transition:all 0.15s;margin-top:0.35rem}
.mp-log-meal-btn:hover{background:rgba(125,255,107,0.08)}
.mp-shop-cat{margin-bottom:0.75rem}
.mp-shop-cat-title{font-size:0.78rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.3rem;padding-bottom:0.2rem;border-bottom:1px solid var(--border)}
.mp-shop-item{display:flex;justify-content:space-between;align-items:center;padding:0.3rem 0;font-size:0.8rem;border-bottom:1px solid var(--border)}
.mp-shop-item:last-child{border:none}
.mp-shop-row{display:flex;justify-content:space-between;align-items:center;padding:0.45rem 0.4rem;font-size:0.8rem;border-bottom:1px solid var(--border);cursor:pointer;border-radius:4px;transition:background 0.15s}
.mp-shop-row:hover{background:rgba(125,255,107,0.04)}
.mp-shop-row:last-child{border:none}
.mp-shop-row.mp-shop-checked{opacity:0.5}
.mp-shop-row.mp-shop-checked .mp-shop-item-name{text-decoration:line-through}
.mp-shop-qty{font-family:'DM Mono',monospace;font-size:0.75rem;color:var(--muted);white-space:nowrap}
.mp-shop-usage{font-size:0.68rem;color:var(--muted2);margin-left:0.5rem}
.mp-day-tab{padding:0.35rem 0.6rem;border-radius:var(--radius-sm);font-size:0.72rem;cursor:pointer;border:1px solid var(--border2);background:var(--surface);color:var(--muted);transition:all 0.15s;min-width:32px;text-align:center}
.mp-day-tab.active{border-color:var(--accent);background:rgba(125,255,107,0.08);color:var(--accent);font-weight:600}
.mp-prep-badge{display:inline-flex;align-items:center;gap:0.25rem;padding:0.15rem 0.5rem;border-radius:99px;font-size:0.68rem;background:rgba(79,195,247,0.08);color:var(--blue);border:1px solid rgba(79,195,247,0.2)}
.mp-day-summary{display:flex;gap:0.6rem;flex-wrap:wrap;padding:0.75rem 1rem;background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--radius);margin-bottom:1.25rem}
.mp-summary-item{text-align:center;flex:1;min-width:70px}
.mp-summary-val{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:1px;line-height:1}
.mp-summary-lbl{font-size:0.68rem;color:var(--muted2);text-transform:uppercase;letter-spacing:0.06em}
.mp-timing-note{font-size:0.76rem;color:var(--blue);padding:0.4rem 0.6rem;background:rgba(79,195,247,0.06);border-radius:var(--radius-sm);border-left:2px solid var(--blue);margin-top:0.5rem}

/* ── Pie chart ── */
.mp-pie-section{display:flex;align-items:center;gap:1.2rem;padding:0.85rem 1rem;background:var(--surface);border:1.5px solid var(--border2);border-radius:var(--radius);margin-bottom:1rem}
.mp-pie-legend{display:flex;flex-direction:column;gap:0.45rem}
.mp-pie-leg-item{font-size:0.78rem;color:var(--muted);display:flex;align-items:center;gap:0.45rem}
.mp-pie-leg-item strong{color:var(--text);font-family:'DM Mono',monospace;font-size:0.82rem}
.mp-pie-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ── Target vs Actual cards ── */
.mp-tva-cards{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem}
.mp-tva-card{display:flex;align-items:center;gap:0.6rem;padding:0.6rem 0.8rem;background:var(--surface);border:1.5px solid var(--border2);border-radius:var(--radius);flex:1;min-width:140px}
.mp-tva-card svg{flex-shrink:0}
.mp-tva-card-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.mp-tva-card-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em}
.mp-tva-card-nums{font-family:'DM Mono',monospace;font-size:0.82rem;display:flex;align-items:baseline;gap:2px}
.mp-tva-card-plan{font-weight:700}
.mp-tva-card-slash{color:var(--muted2);font-size:0.7rem}
.mp-tva-card-goal{color:var(--muted);font-size:0.75rem}
.mp-tva-card-unit{font-size:0.6rem;color:var(--muted2);margin-left:2px}
.mp-tva-card-diff{font-family:'DM Mono',monospace;font-size:0.68rem;font-weight:600}

/* ── Swap button ── */
.mp-swap-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border2);background:var(--surface2);color:var(--muted);font-size:0.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all 0.15s;padding:0;line-height:1;flex-shrink:0}
.mp-food-swappable:hover .mp-swap-btn,.mp-food-swappable:focus-within .mp-swap-btn{opacity:1}
.mp-swap-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(125,255,107,0.08)}
.mp-swap-meal-btn{display:inline-flex;align-items:center;gap:4px;padding:0.3rem 0.7rem;border-radius:99px;border:1.5px solid var(--border2);background:var(--surface2);color:var(--muted);font-size:0.72rem;font-family:'DM Mono',monospace;font-weight:500;cursor:pointer;transition:all 0.15s;margin-bottom:0.5rem}
.mp-swap-meal-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(125,255,107,0.08)}

/* ══ RECIPE BROWSER ══ */
.mp-recipe-book{margin-bottom:0.5rem}
.mp-recipe-book-title{display:flex;align-items:center;gap:0.4rem;padding:0.55rem 0.5rem;font-weight:600;font-size:0.82rem;cursor:pointer;border-radius:var(--radius-sm);transition:background 0.15s}
.mp-recipe-book-title:hover{background:var(--surface2)}
.mp-recipe-book-list{display:none;padding:0 0 0.5rem 1rem}
.mp-recipe-book-list.open{display:block}
.mp-recipe-item{padding:0.5rem 0.6rem;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:0.35rem;cursor:pointer;transition:all 0.15s}
.mp-recipe-item:hover{border-color:var(--accent);background:rgba(125,255,107,0.05)}

/* ══ JOURNEY AUTOPILOT TIMELINE ══ */
.jp-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem}
.jp-timeline-bar{display:flex;gap:2px;height:8px;border-radius:99px;overflow:hidden}
.jp-phase-block{display:flex;flex-direction:column;align-items:center;min-width:0}
.jp-phase-bar{height:8px;border-radius:99px;width:100%;position:relative;overflow:hidden;transition:background 0.3s}
.jp-phase-fill{height:100%;border-radius:99px;transition:width 0.4s ease}
.jp-phase-label{font-size:0.6rem;margin-top:0.2rem;line-height:1}
.jp-phase-block.jp-active .jp-phase-bar{box-shadow:0 0 6px rgba(125,255,107,0.3)}
.jp-active-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.85rem;margin-top:0.65rem}
.jp-upcoming-phase{padding:0.45rem 0.65rem;margin-bottom:0.35rem;background:var(--surface2);border-radius:var(--radius-sm)}
.jp-add-break-btn{background:transparent;border:1px solid var(--border2);border-radius:4px;padding:0.1rem 0.4rem;font-size:0.65rem;color:var(--muted);cursor:pointer;transition:all 0.15s;white-space:nowrap}
.jp-add-break-btn:hover{border-color:var(--blue);color:var(--blue);background:rgba(79,195,247,0.08)}

/* ══ WEEKLY COACHING NOTIFICATION ══ */
.wc-notification{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem}
.wc-header{display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem}

/* ══ ADHERENCE SUPPORT ══ */
.as-option{display:flex;align-items:center;gap:0.6rem;padding:0.6rem 0.75rem;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;margin-bottom:0.4rem;transition:all 0.15s}
.as-option:hover{border-color:var(--accent);background:rgba(125,255,107,0.04)}
.as-option.selected{border-color:var(--accent);background:rgba(125,255,107,0.08)}
.as-option-check{width:18px;height:18px;border-radius:4px;border:2px solid var(--border2);flex-shrink:0;transition:all 0.15s;position:relative}
.as-option.selected .as-option-check{background:var(--accent);border-color:var(--accent)}
.as-option.selected .as-option-check::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--bg);font-size:0.7rem;font-weight:700}
.as-response{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem}
.as-response-card{background:var(--surface2);border-radius:var(--radius-sm);padding:0.75rem 0.85rem}

/* ── Bariatric Support ── */
.bari-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem}
.bari-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.65rem}
.bari-stat{flex:1;min-width:70px;padding:0.4rem 0.55rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center}
.bari-stat-label{font-size:0.6rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:0.15rem}
.bari-stat-val{font-size:0.82rem;color:var(--text);font-weight:600}
.bari-supp-list{display:flex;flex-direction:column;gap:0.35rem}
.bari-supp-item{display:flex;align-items:center;gap:0.45rem;padding:0.45rem 0.6rem;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all 0.15s}
.bari-supp-item:hover{border-color:var(--accent);background:rgba(125,255,107,0.04)}
.bari-supp-item.checked{border-color:var(--accent);background:rgba(125,255,107,0.06)}
.bari-supp-check{width:18px;height:18px;border-radius:4px;border:2px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--bg);transition:all 0.15s}
.bari-supp-item.checked .bari-supp-check{background:var(--accent);border-color:var(--accent)}

/* ══ MOBILE RESPONSIVE ══ */
@media(max-width:768px){
  nav{padding:0 0.75rem;height:50px}
  .logo-text{display:none}
  .section{padding:1.25rem 0.75rem}
  .page-title{font-size:2rem}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:0.65rem}
  .stat-val{font-size:1.7rem}
  .card{padding:1rem}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .form-row,.form-row3{grid-template-columns:1fr}
  .btn-row{flex-wrap:wrap;gap:0.4rem}
  .flex-between{flex-wrap:wrap;gap:0.75rem}
  .mp-macro-pill{font-size:0.6rem;padding:2px 6px}
  .mp-meal-head{padding:0.65rem 0.85rem}
  .mp-summary-item{min-width:55px}
  .mp-summary-val{font-size:1.1rem}
  .mp-pie-section{flex-direction:column;gap:0.75rem;text-align:center}
  .mp-pie-legend{flex-direction:row;gap:0.75rem;justify-content:center;flex-wrap:wrap}
  .mp-tva-cards{gap:0.4rem}
  .mp-tva-card{min-width:120px;padding:0.5rem 0.65rem;gap:0.45rem}
  .mp-tva-card svg{width:42px;height:42px}
  .mp-tva-card-nums{font-size:0.75rem}
  .mp-swap-btn{opacity:0.7;width:24px;height:24px;font-size:0.78rem}
  .phase-block{padding:0.65rem 0.75rem}
  .coach-mgr{padding:0.85rem}
  .modal{padding:1.25rem;margin:0.5rem}
  #dp-summary-stats{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
  /* Slim top nav on mobile */
  nav{height:48px;padding:0 0.75rem}
  .logo{font-size:1.1rem;letter-spacing:1.5px}
  .nav-tab{padding:0 0.5rem;font-size:0.6rem}
  .client-badge span{display:none}
  .page-title{font-size:1.7rem}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:0.5rem}
  /* Extra bottom padding so content clears the bottom nav bar.
     Horizontal padding matches nav (0.75rem) so the dashboard cards
     align flush with the NutriCoach top bar edges. */
  .app{padding-top:48px}
  .section{padding:0.75rem 0.75rem 5.5rem}
  .mp-day-summary{gap:0.35rem;padding:0.6rem 0.75rem}
  .mp-meal-cals{font-size:0.72rem}
  .nav-tabs{display:none}
  /* Bottom nav already visible by default — no override needed here */
  /* Hide the floating menu button — bottom nav replaces it */
  #mob-menu-btn{display:none !important}
  /* (Chat mobile overrides removed) */
  /* Phase & Goals grid goes single column on small screens */
  #db-phase-goals-grid{grid-template-columns:1fr!important}

  /* ── MOBILE DASHBOARD — compact layout to minimise scrolling ── */

  /* Welcome: slim single line — no subtitle, tight spacing */
  .db-welcome{padding:0.5rem 0 0.25rem;margin-bottom:0.5rem}
  .db-welcome-tag{display:none}
  .db-welcome-title{font-size:1.35rem!important;letter-spacing:1px}
  .db-welcome-sub{display:none}

  /* Phase card — tighter */
  #db-phase-goals-card{margin-bottom:0.5rem!important}
  #db-phase-goals-card .card-title{margin-bottom:0.35rem}

  /* Progress card — smaller ring, compact bars */
  #db-progress-card{margin-bottom:0.5rem!important;padding:0.65rem 0.75rem!important}
  #db-progress-card svg{width:85px;height:85px}
  #cal-ring-eaten{font-size:1.15rem!important}
  .db-prog-row{gap:0.35rem;margin-bottom:0.1rem}
  .db-prog-track{height:5px}
  .db-prog-label{font-size:0.62rem;width:2.8rem}
  #db-progress-status{margin-top:0.35rem;font-size:0.7rem}

  /* Next action — slim single line */
  .db-next-action{padding:0.6rem 0.75rem;gap:0.6rem;margin-bottom:0.5rem;border-radius:8px}
  .na-icon{font-size:1.1rem}
  .na-label{display:none}
  .na-title{font-size:0.8rem}
  .na-sub{display:none}
  .na-arrow{font-size:0.9rem}

  /* Adherence snap — tighter */
  #db-adherence-snap{margin-bottom:0.5rem!important}

  /* AI insight — compact */
  .ai-insight-inner{padding:0.65rem 0.75rem!important}
  .ai-insight-avatar{width:28px;height:28px;font-size:0.85rem}
  .ai-insight-label{font-size:0.58rem;margin-bottom:0.25rem}
  #ai-checkin-text{font-size:0.78rem;line-height:1.5}

  /* "What should I eat?" — hide on mobile (available in More sheet) */
  #dashboard > #db-client-view > .card[onclick="togglePlateGuide()"]{display:none}

  /* Meal tracker — compact wrapper */
  .meal-tracker-wrap{padding:0.75rem;margin-bottom:0.5rem}
  .mt-header{margin-bottom:0.65rem;gap:0.4rem}
  .mt-title{font-size:0.9rem}
  #nc-mode-sub{display:none}
  .meal-list{gap:0.35rem;display:flex;flex-direction:column;gap:0.35rem}
  .nc-meal-item{padding:0.55rem 0.6rem;min-height:48px;gap:0.5rem}
  .nc-meal-time{font-size:0.62rem;width:38px}
  .nc-meal-name{font-size:0.78rem}
  .nc-meal-desc{font-size:0.62rem}
  .nc-meal-check{width:30px;height:30px;font-size:0.9rem}
  .nc-simple-hint{display:none}

  /* Detail mode meal tracker — compact inputs */
  .meal-tracker-item{margin-bottom:0.35rem}
  .meal-tracker-head{padding:0.5rem 0.65rem;gap:0.5rem}
  .mt-time{font-size:0.62rem}
  .mt-name{font-size:0.78rem}

  /* Macro bars — more compact */
  #nc-macro-bars{padding:0.35rem 0 0.15rem}
  .prog-wrap{margin-bottom:0.35rem}
  /* Quick-add pills — wrap nicely */
  .quick-add-row{flex-wrap:wrap;gap:0.35rem}
  .qa-pill{font-size:0.7rem;padding:0.3rem 0.55rem}
  /* Cards — tighter padding to match TrainCoach mobile feel */
  .card{padding:0.75rem 0.85rem}
  .card-glass{padding:0.75rem 0.85rem}
  /* Page titles */
  .card-title{font-size:0.72rem}
  /* Buttons — slightly larger touch targets on mobile */
  .btn{padding:0.6rem 1rem;font-size:0.84rem;border-radius:8px}
  .btn-sm{padding:0.4rem 0.75rem;font-size:0.76rem}
  /* Form inputs — comfortable on mobile */
  .form-input,.form-select,.form-textarea{font-size:16px;padding:0.65rem 0.85rem}
  /* Stats row — tighter */
  .stat{padding:0.75rem 0.85rem}
  /* Hide desktop More dropdown wrapper on mobile */
  .nav-more-wrapper{display:none!important}
  /* Nav right controls — compact on mobile */
  /* Nav-right must shrink so it doesn't push content off-screen */
  .nav-right{gap:0.3rem;flex-shrink:1;min-width:0;flex-wrap:nowrap;overflow:hidden}
  /* Keep top-bar buttons tappable: 36px minimum even in the compact bar
     (Sign out used to shrink to ~14px tall and mis-taps hit the badge). */
  .mode-toggle-btn{font-size:0.62rem;padding:0.3rem 0.5rem;min-height:36px}
  /* Compact client-badge on mobile so it fits alongside logo + toggles */
  .client-badge{padding:0.25rem 0.4rem;gap:0.3rem;flex-shrink:1;min-width:0}
  .client-badge button{padding:0.3rem 0.5rem !important;font-size:0.62rem !important;min-height:36px !important}
  /* Theme toggle — shrink to just the icon */
  .theme-toggle{padding:3px 7px;font-size:13px}
  /* Logo shrink on mobile (size set above) */
  .logo{flex-shrink:0}
  /* Mob-more-sheet padding aligns with nav/section for visual consistency */
  #mob-more-sheet{padding-left:0.75rem;padding-right:0.75rem}
  /* Toast above mobile menu button */
  .toast{bottom:calc(80px + env(safe-area-inset-bottom));right:0.75rem;left:0.75rem;max-width:none}
  /* Photo remove button always visible on touch (no hover) */
  .photo-slot .photo-remove{display:flex}
  /* Cycle wheel scales down on smaller screens */
  .cycle-wheel{width:180px;height:180px}
  /* Caliper labels don't force fixed width on mobile */
  .caliper-site label{width:auto;min-width:100px}
  /* Measurement inputs slightly wider for fat-finger tapping */
  .meas-input{width:70px;min-height:38px}
  /* Tables scroll horizontally on mobile */
  .tbl{min-width:500px}

  /* ══ SECTION-SPECIFIC MOBILE POLISH ══ */

  /* ── Page titles & subtitles — compact across all sections ── */
  .page-title{font-size:1.4rem!important;margin-bottom:0.15rem}
  .page-sub{font-size:0.74rem;margin-bottom:0.65rem}

  /* ── Check-In wizard ── */
  #checkin .page-title{margin-bottom:0.35rem}
  .checkin-step{padding:0.85rem!important}
  .checkin-step .form-label{font-size:0.76rem}
  /* 7-day weight grid — allow wrapping so it doesn't overflow */
  .weight-day-grid{display:flex!important;flex-wrap:wrap;gap:0.35rem}
  .weight-day-grid .form-group{flex:1;min-width:calc(25% - 0.35rem)}
  .weight-day-grid .form-input{padding:0.5rem 0.4rem;text-align:center}
  .checkin-nav{gap:0.5rem}
  .checkin-nav .btn{padding:0.55rem 0.85rem;font-size:0.8rem}

  /* ── Macros ── */
  #macros .page-title{margin-bottom:0.35rem}
  .day-type-row{gap:0.3rem}
  .day-type-row .btn{padding:0.4rem 0.65rem;font-size:0.72rem}
  .macro-ring-wrap{gap:0.75rem}
  .macro-ring{width:80px;height:80px}

  /* ── Meal Log ── */
  #meallog .card-title{font-size:0.68rem}
  .food-search-wrap{margin-bottom:0.5rem}
  #ml-results{max-height:200px}

  /* ── Daily Log ── */
  #dailylog .page-title{margin-bottom:0.35rem}
  .dl-nav{flex-wrap:wrap;gap:0.35rem}
  .dl-nav .btn{padding:0.4rem 0.65rem;font-size:0.74rem}

  /* ── Progress ── */
  #progress .page-title{margin-bottom:0.35rem}
  .photo-grid{grid-template-columns:1fr 1fr!important;gap:0.5rem}
  .photo-slot{min-height:120px}
  .photo-slot .photo-remove{min-height:32px;min-width:32px}
  .checkpoint-form .form-group{margin-bottom:0.65rem}

  /* ── Phases ── */
  #phases .page-title{margin-bottom:0.35rem}
  .phase-card{padding:0.75rem}
  .phase-timeline-item{padding:0.6rem 0.75rem}

  /* ── Meal Planner ── */
  #mealplanner .page-title{margin-bottom:0.35rem}
  .mp-mode-btns{gap:0.3rem;flex-wrap:wrap}
  .mp-mode-btns .btn{padding:0.4rem 0.6rem;font-size:0.72rem;flex:1;min-width:0;text-align:center;justify-content:center}
  .mp-meal-head{padding:0.55rem 0.65rem}
  .mp-meal-name{font-size:0.82rem}
  .mp-food-name{font-size:0.76rem}
  .mp-summary-item{min-width:48px}
  .mp-summary-val{font-size:1rem}
  .mp-summary-label{font-size:0.72rem}

  /* ── Diet Planner ── */
  #dietplanner .page-title{margin-bottom:0.35rem}
  .jp-phase{padding:0.65rem 0.75rem}

  /* ── Body Comp ── */
  #bodycomp .page-title{margin-bottom:0.35rem}
  .caliper-site{flex-wrap:wrap;gap:0.3rem}
  .caliper-site label{font-size:0.74rem;min-width:80px}
  .caliper-site input{min-height:40px}
  .meas-grid{grid-template-columns:1fr 1fr!important;gap:0.4rem}

  /* ── Cycle Tracker ── */
  #cycle .page-title{margin-bottom:0.35rem}
  .cycle-wheel{width:160px;height:160px;margin:0 auto 0.75rem}
  .cycle-phase-card{padding:0.65rem}

  /* ── Shopping List ── */
  #shopping .page-title{margin-bottom:0.35rem}

  /* ── Supplements ── */
  #supplements .page-title{margin-bottom:0.35rem}
  .supp-item{padding:0.55rem 0.65rem}

  /* ── Calculator ── */
  #calculator .page-title{margin-bottom:0.35rem}
  #calculator .form-label{font-size:0.74rem}
  #calculator .form-row3{gap:0.4rem}
  #calculator .card{margin-bottom:0.65rem}
  .calc-result{padding:0.65rem 0.75rem;font-size:0.82rem}

  /* ── Health / Food Quality ── */
  #health .page-title{margin-bottom:0.35rem}
  .food-rater{flex-direction:column;gap:0.5rem}
  .hydration-setup .form-row3{gap:0.35rem}

  /* ── Client dashboard — compact phase card ── */
  #db-phase-goals-card{padding:0.55rem 0.65rem!important;margin-bottom:0.4rem!important}
  #db-phase-goals-card .btn-sm{padding:0.2rem 0.4rem;font-size:0.65rem}

  /* ── Coach Dashboard ── */
  /* Header — stack title and buttons vertically */
  #coach-clients-panel > div:first-child{flex-direction:column;gap:0.5rem;margin-bottom:0.75rem!important}
  #coach-clients-panel .page-title{font-size:1.4rem!important}
  #coach-clients-panel > div:first-child > div:last-child{width:100%;justify-content:stretch}
  #coach-clients-panel > div:first-child > div:last-child .btn{flex:1}

  /* Stats — compact 2x2 grid */
  #coach-stats-row{grid-template-columns:repeat(2,1fr)!important;gap:0.4rem!important;margin-bottom:0.75rem!important}
  #coach-stats-row .stat{padding:0.5rem 0.65rem}
  #coach-stats-row .stat-val{font-size:1.4rem!important}
  #coach-stats-row .stat-lbl{font-size:0.6rem}

  /* Search/filter — stack on very small screens */
  #coach-search{min-width:0!important;font-size:0.8rem;padding:0.45rem 0.65rem}
  #coach-filter{font-size:0.8rem;padding:0.45rem 0.55rem}

  /* Client cards — tighter on mobile */
  #coach-clients-list > div{grid-template-columns:1fr!important;gap:0.5rem}

  /* Client detail modal — mobile-friendly */
  #coach-client-modal > div{padding:1rem;border-radius:12px;margin:0.5rem}
  #coach-client-modal #modal-client-name{font-size:1.25rem}
  /* Package buttons wrap better */
  #coach-client-modal [style*="display:flex;gap:0.4rem"]{gap:0.25rem}
  #coach-client-modal .btn-sm{font-size:0.68rem!important;padding:0.25rem 0.45rem!important}

  /* Invite manager modal — mobile-friendly */
  #invite-mgr-modal > div{padding:1rem;margin:0.5rem auto}

  /* ── Universal card spacing on mobile ── */
  .section .card{margin-bottom:0.65rem}
  .section .mb2{margin-bottom:0.65rem!important}
  .form-row{gap:0.5rem}
  .form-row3{gap:0.4rem}
  .form-group{margin-bottom:0.5rem}
}

/* Global horizontal overflow guard — prevents any rogue child from pushing
   the body sideways on mobile (the source of "top bar goes off screen"). */
html,body{max-width:100vw;overflow-x:hidden}

/* ── MOBILE MENU BUTTON ── (single floating button that opens the sheet) */
/* Hidden by default; the @media(max-width:768px) block above enables it. */
#mob-menu-btn{display:none;position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:250;align-items:center;gap:0.45rem;height:52px;padding:0 1.15rem 0 1rem;background:var(--accent);color:#000;border:none;border-radius:26px;font-size:0.85rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;box-shadow:0 6px 22px rgba(0,0,0,0.35),0 0 0 1px rgba(0,0,0,0.1);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 0.15s ease, box-shadow 0.15s ease}
#mob-menu-btn:active{transform:scale(0.95)}
#mob-menu-btn #mob-menu-icon{font-size:1.25rem;line-height:1;font-weight:900}
#mob-menu-btn #mob-menu-label{font-size:0.78rem;line-height:1}
/* When the sheet is open, morph the button so it's clearly "close" */
#mob-menu-btn.open{background:var(--surface2);color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,0.3)}
/* In training mode the bottom bar becomes a slim "← Back to Nutrition" strip
   (see TRAINING MODE block below), so the floating Menu pill is not needed —
   it used to appear on desktop too and opened the full mobile sheet. */

/* ── MOBILE MORE SHEET ── */
/* Now anchored to the bottom of the viewport (no bottom nav bar above it). */
#mob-more-sheet{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9992;background:var(--surface);border-top:1px solid var(--border);border-radius:20px 20px 0 0;padding:1rem 0.9rem calc(1.25rem + env(safe-area-inset-bottom));max-height:78vh;overflow-y:auto;box-shadow:0 -12px 40px rgba(0,0,0,0.5);transform:translateY(100%);transition:transform 0.25s ease}
#mob-more-sheet.open{display:block;transform:translateY(0)}
#mob-more-sheet .mob-more-section-label{font-size:0.64rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);padding:0 0.25rem 0.4rem}
#mob-more-sheet .mob-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem}
#mob-more-sheet .mob-more-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0.85rem 0.35rem;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--border);cursor:pointer;font-size:0.7rem;font-weight:600;color:var(--muted);text-align:center;-webkit-tap-highlight-color:transparent;min-height:68px;justify-content:center;transition:background 0.15s, border-color 0.15s, color 0.15s}
#mob-more-sheet .mob-more-item:active{background:var(--accent-glow);border-color:var(--accent)}
/* Primary items: slightly brighter so clients see "use these first" at a glance */
#mob-more-sheet .mob-more-item.mob-primary{background:var(--surface);color:var(--text, #fff);border-color:var(--border2, var(--border))}
/* Current section: highlighted with accent ring so user knows where they are */
#mob-more-sheet .mob-more-item.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}
#mob-more-sheet .mob-more-icon{font-size:1.5rem;line-height:1}
#mob-more-sheet .mob-more-label{font-size:0.66rem;text-transform:uppercase;letter-spacing:0.04em}
#mob-more-backdrop{display:none;position:fixed;inset:0;z-index:9991;background:rgba(0,0,0,0.55)}
#mob-more-backdrop.open{display:block}

/* ── MOBILE BOTTOM NAV ── */
#mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:9990;height:auto;background:var(--bg2,rgba(8,12,10,0.97));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);justify-content:space-around;align-items:stretch;padding:0 4px;padding-bottom:env(safe-area-inset-bottom)}
.mob-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--muted);font-size:10px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;transition:color 0.2s;border:none;background:none;padding:10px 4px 12px;-webkit-tap-highlight-color:transparent;position:relative;touch-action:manipulation;min-height:44px;line-height:1.3;overflow:visible;white-space:nowrap}
.mob-tab.active{color:var(--accent);font-weight:700}
.mob-tab.active::after{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:var(--accent);border-radius:0 0 2px 2px}
.mob-tab-icon{font-size:1.3rem;line-height:1}

/* Hide mobile nav on desktop — shown by default, hidden on wide screens */
@media(min-width:769px){
  #mobile-nav{display:none !important}
  nav{max-width:100%;padding:0 2rem}
  .nav-tab{padding:0 1rem;font-size:0.73rem}
  .section{padding:2rem 2.5rem}
}

/* Touch targets — ensure all interactive elements meet 44px minimum */
@media(max-width:768px){
  .btn{padding:0.65rem 1.1rem;font-size:0.82rem;min-height:44px}
  .btn-sm{min-height:36px}
  .form-input,.form-select,.form-textarea{font-size:16px;padding:0.65rem 0.75rem} /* 16px prevents iOS zoom */
  /* Catch-all: EVERY input must be ≥16px on phones or iOS zooms the viewport
     on focus. Covers the auth screen (inline 0.88rem), .inp-field macro
     entries (0.82rem), .day-inp check-in weights, .meas-input, etc.
     !important so it beats inline style="" font sizes. */
  input,select,textarea{font-size:16px !important}
  /* Chip rows: keep tap heights ≥38px */
  .qa-pill,.recent-food-chip,.food-cat-tab,.topic-chip,.db-ptab,.cp-tab{min-height:38px;display:inline-flex;align-items:center}
  .intake-choice{padding:1rem 1rem;min-height:52px}
  .health-chip{padding:0.6rem 0.9rem;min-height:44px}
  .topic-chip{padding:0.45rem 0.75rem}
  /* Meal tracker mode buttons — easier to tap */
  .mode-btn{padding:0.45rem 0.85rem;min-height:38px}
  /* More dropdown items — easier to tap on mobile */
  .more-item{padding:0.75rem 1rem;min-height:44px;font-size:0.85rem}
}

/* ══ CONSENT SCREEN ══ */
#consent-screen{position:fixed;inset:0;z-index:500;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:1.5rem;overflow-y:auto}
#consent-screen.hidden{display:none}
.consent-card{max-width:520px;width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:16px;padding:2.5rem 2rem;animation:fadeIn 0.4s ease}
@media(max-width:480px){.consent-card{padding:1.75rem 1.25rem}}

/* ══ GUEST SPLASH ══ */
#guest-splash{position:fixed;inset:0;z-index:450;background:var(--bg);overflow-y:auto;display:none}
#guest-splash.active{display:block}
.splash-hero{padding:4rem 1.5rem 2rem;text-align:center;max-width:700px;margin:0 auto}
.splash-hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.8rem,8vw,5rem);letter-spacing:3px;line-height:0.95;margin-bottom:1rem}
.splash-hero h1 em{color:var(--accent);font-style:normal;display:block}
.splash-hero p{color:var(--muted);font-size:1rem;line-height:1.7;max-width:480px;margin:0 auto 2rem}
.splash-cta-row{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap}
.splash-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:760px;margin:2.5rem auto;padding:0 1.5rem}
@media(max-width:640px){.splash-features{grid-template-columns:1fr 1fr}}
@media(max-width:380px){.splash-features{grid-template-columns:1fr}}
.splash-feature{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.25rem;text-align:left}
.splash-feature-icon{font-size:1.6rem;margin-bottom:0.5rem}
.splash-feature-name{font-weight:700;font-size:0.88rem;margin-bottom:0.3rem}
.splash-feature-desc{font-size:0.76rem;color:var(--muted);line-height:1.5}
.splash-demo-strip{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1.5rem;text-align:center;margin:1rem 0}
.splash-social-proof{max-width:700px;margin:0 auto;padding:1.5rem}
.splash-testimonial{background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:1.1rem;margin-bottom:0.75rem;font-size:0.84rem;line-height:1.6;color:var(--muted)}
.splash-testimonial strong{color:var(--text)}
.splash-lock-row{display:flex;align-items:center;gap:0.4rem;font-size:0.72rem;color:var(--muted2);justify-content:center;margin-top:0.5rem}

/* ══ GUEST DEMO BANNER ══ */
#guest-banner{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(8,12,10,0.97);border-top:1px solid var(--border2);padding:0.75rem 1.5rem;display:none}
#guest-banner.active{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
@media(max-width:480px){#guest-banner{padding:0.65rem 1rem;gap:0.5rem}}

/* ══ THEME TOGGLE BUTTON ══ */
.theme-toggle{background:none;border:1px solid var(--border);border-radius:20px;padding:4px 10px;cursor:pointer;font-size:14px;color:var(--text3);transition:all 0.2s;display:flex;align-items:center;gap:5px}
.theme-toggle:hover{border-color:var(--green);color:var(--green)}

/* (AI Chat widget CSS removed) */

/* ══ LIGHT THEME OVERRIDES ══ */
html.light {
  --bg: #f0f4f1;
  --surface: #ffffff;
  --surface2: #e4ece6;
  --border: #c8d4ca;
  --border2: #b0c0b4;
  --text: #1a2b1e;
  --muted: #4a6452;
  --muted2: #4d6956;
  --accent: #157a2a;
  --accent-dim: #14692a;
  --accent-glow: rgba(26,138,50,0.12);
  --success: #1a8a32;
}
html.light body{background:var(--bg);color:var(--text)}
html.light body::before{background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(34,140,50,0.05),transparent)}
html.light nav{background:rgba(240,244,241,0.95);border-bottom-color:var(--border)}
html.light .card-glass{background:rgba(255,255,255,0.85)}
html.light #mobile-nav{background:rgba(240,244,241,0.97)}
html.light #mob-more-sheet{background:rgba(240,244,241,0.99);box-shadow:0 -8px 32px rgba(0,0,0,0.15)}
html.light #guest-banner{background:rgba(240,244,241,0.97)}
html.light .modal-overlay{background:rgba(0,0,0,0.35)}
html.light .intake-overlay{background:var(--bg)}
html.light .btn-primary{color:#fff}
html.light .btn-primary:hover{background:#22a63e;box-shadow:0 4px 20px rgba(26,138,50,0.25)}
html.light .meal-log-btn{color:#fff;background:var(--accent);border-color:var(--accent-dim)}
html.light .meal-log-btn:hover{background:var(--accent-dim)}
html.light .avatar{color:#fff}
html.light .db-ptab.active{background:rgba(26,138,50,0.08)}
html.light .badge-bulk{background:rgba(26,138,50,0.08);border-color:rgba(26,138,50,0.2)}
html.light .badge-active{background:rgba(26,138,50,0.1);border-color:rgba(26,138,50,0.25)}
html.light #chat-fab{box-shadow:0 4px 20px rgba(26,138,50,0.3);color:#fff}
html.light #chat-fab:hover{box-shadow:0 6px 28px rgba(26,138,50,0.45)}
html.light .ql-snap-btn{color:#fff !important}
/* ── DUAL-MODE MEAL TRACKER ──────────────────────────────────────────────── */
.meal-tracker-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.mt-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.1rem}
.mt-title{font-family:'Bebas Neue',sans-serif;font-size:1.05rem;letter-spacing:1px;color:var(--accent);margin-bottom:0.15rem}
.mt-sub{font-size:0.72rem;color:var(--muted)}
.mode-toggle{display:flex;background:var(--surface2);border:1px solid var(--border2);border-radius:99px;padding:3px;gap:3px;flex-shrink:0}
.mode-btn{padding:0.38rem 0.9rem;border-radius:99px;font-size:0.72rem;font-weight:700;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;letter-spacing:0.04em;transition:all 0.2s;color:var(--muted);background:transparent}
.mode-btn.active{background:var(--accent);color:#000}
html.light .mode-btn.active{color:#fff}
/* ── Date navigation ───────────────────────────────────────────── */
.nc-date-nav{display:flex;align-items:center;justify-content:center;gap:0.75rem;margin-bottom:1rem;padding:0.4rem 0;position:relative}
.nc-date-arrow{background:var(--surface2);border:1px solid var(--border2);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:var(--text);cursor:pointer;transition:all 0.15s;padding:0;line-height:1}
.nc-date-arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}
.nc-date-arrow:disabled{opacity:0.3;cursor:default}
.nc-date-label{font-family:'DM Mono',monospace;font-size:0.82rem;font-weight:600;color:var(--text);min-width:120px;text-align:center}
.nc-date-label.is-past{color:var(--accent)}
/* ── Macro pie chart ───────────────────────────────────────────── */
.macro-pie-wrap{display:flex;align-items:center;gap:1.1rem;margin-bottom:1rem;padding:0.85rem 0.9rem;background:var(--surface2);border-radius:var(--radius);border:1px solid var(--border)}
.macro-pie-chart{flex-shrink:0}
.macro-pie-chart svg{display:block}
.macro-pie-legend{flex:1;display:flex;flex-direction:column;gap:0.35rem}
.mpl-row{display:flex;align-items:center;gap:0.5rem}
.mpl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.mpl-row.prot .mpl-dot{background:var(--orange)}
.mpl-row.carb .mpl-dot{background:var(--blue)}
.mpl-row.fat  .mpl-dot{background:var(--purple)}
.mpl-lbl{font-size:0.72rem;color:var(--muted);flex:1;text-transform:uppercase;letter-spacing:0.05em}
.mpl-val{font-family:'DM Mono',monospace;font-size:0.7rem;color:var(--text);white-space:nowrap}
.mpl-cal-row{display:flex;align-items:center;gap:0.5rem;margin-top:0.25rem;padding-top:0.35rem;border-top:1px solid var(--border)}
.mpl-cal-row .mpl-lbl{font-size:0.68rem;color:var(--muted2)}
.mpl-cal-row .mpl-val{font-size:0.7rem;color:var(--muted)}
.meal-list{display:flex;flex-direction:column;gap:0.4rem}
.nc-meal-item{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0.85rem;background:var(--surface2);border:1.5px solid var(--border2);border-radius:8px;cursor:pointer;transition:all 0.15s;user-select:none}
.nc-meal-item:hover{border-color:var(--accent-dim)}
.nc-meal-item.logged{border-color:rgba(125,255,107,0.35);background:rgba(125,255,107,0.05)}
.nc-meal-time{font-family:'DM Mono',monospace;font-size:0.7rem;color:var(--accent);width:44px;flex-shrink:0}
.nc-meal-info{flex:1}
.nc-meal-name{font-size:0.82rem;font-weight:600}
.nc-meal-desc{font-size:0.68rem;color:var(--muted);margin-top:0.1rem}
.nc-meal-check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:0.65rem;flex-shrink:0;transition:all 0.2s}
.nc-meal-item.logged .nc-meal-check{background:var(--accent);border-color:var(--accent);color:#000;font-weight:800}
.nc-simple-hint{font-size:0.71rem;color:var(--muted);text-align:center;padding:0.5rem;border-top:1px solid var(--border);margin-top:0.6rem}
.meal-tracker-item{background:var(--surface2);border:1.5px solid var(--border2);border-radius:8px;margin-bottom:0.5rem;overflow:hidden;transition:border-color 0.15s}
.meal-tracker-item.has-data{border-color:rgba(125,255,107,0.3)}
.meal-tracker-head{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0.85rem;cursor:pointer;user-select:none}
.meal-tracker-head:hover{background:rgba(255,255,255,0.02)}
.mt-time{font-family:'DM Mono',monospace;font-size:0.7rem;color:var(--accent);width:44px;flex-shrink:0}
.mt-name{font-size:0.82rem;font-weight:600;flex:1}
.mt-summary{font-family:'DM Mono',monospace;font-size:0.68rem;color:var(--muted);white-space:nowrap;margin-right:0.5rem;display:flex;align-items:center;gap:0.4rem}
.mt-summary.filled{color:var(--accent)}
.nc-meal-clear-btn{background:none;border:1px solid var(--border2);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--muted);cursor:pointer;padding:0;line-height:1;flex-shrink:0;transition:all 0.15s}
.nc-meal-clear-btn:hover{border-color:var(--danger);color:var(--danger);background:rgba(255,82,82,0.08)}
.mt-chevron{font-size:0.9rem;color:var(--muted);transition:transform 0.2s;flex-shrink:0}
.mt-chevron.open{transform:rotate(90deg)}
.meal-inputs{display:none;padding:0.75rem 0.85rem;border-top:1px solid var(--border)}
.meal-inputs.open{display:block}
.input-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;margin-bottom:0.6rem}
@media(max-width:400px){.input-grid{grid-template-columns:repeat(2,1fr)}}
.inp-group{display:flex;flex-direction:column;gap:0.3rem}
.inp-label{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;font-weight:700}
.inp-label.cal{color:var(--accent)}.inp-label.prot{color:var(--orange)}.inp-label.carb{color:var(--blue)}.inp-label.fat{color:var(--purple)}
.inp-field{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:0.45rem 0.5rem;color:var(--text);font-family:'DM Mono',monospace;font-size:0.82rem;outline:none;width:100%;text-align:center;transition:border-color 0.2s}
.inp-field:focus{border-color:var(--accent)}.inp-field.prot:focus{border-color:var(--orange)}.inp-field.carb:focus{border-color:var(--blue)}.inp-field.fat:focus{border-color:var(--purple)}
.meal-log-btn{width:100%;padding:0.48rem;background:var(--accent-glow);border:1px solid rgba(125,255,107,0.2);border-radius:var(--radius-sm);color:var(--accent);font-family:'DM Sans',sans-serif;font-size:0.75rem;font-weight:700;cursor:pointer;transition:all 0.15s;letter-spacing:0.04em}
.meal-log-btn:hover{background:rgba(125,255,107,0.15);border-color:var(--accent-dim)}
.auto-calc-hint{font-size:0.67rem;color:var(--muted2);text-align:center;margin-top:0.45rem}
.quick-add-row{display:flex;gap:0.4rem;flex-wrap:wrap;margin-top:0.65rem;padding-top:0.65rem;border-top:1px solid var(--border)}
.qa-label{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);width:100%;margin-bottom:0.15rem}
.qa-pill{font-size:0.7rem;padding:0.25rem 0.6rem;border:1px solid var(--border2);border-radius:99px;cursor:pointer;color:var(--muted);transition:all 0.15s;background:transparent;font-family:'DM Sans',sans-serif}
.qa-pill:hover{border-color:var(--accent-dim);color:var(--accent);background:var(--accent-glow)}
.nc-totals-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;margin-top:0.75rem}
.nc-total-pill{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0.55rem;text-align:center}
.nc-total-val{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;line-height:1}
.nc-total-val.cal{color:var(--accent)}.nc-total-val.prot{color:var(--orange)}.nc-total-val.carb{color:var(--blue)}.nc-total-val.fat{color:var(--purple)}
.nc-total-lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-top:0.15rem}
.nc-total-remaining{font-size:0.62rem;font-family:'DM Mono',monospace;margin-top:0.1rem}
.nc-remaining-pos{color:var(--accent)}.nc-remaining-neg{color:var(--danger)}

/* ── AI Coach Insight card ─────────────────────────────────────── */
.ai-insight-inner{border-color:rgba(125,255,107,0.25);background:linear-gradient(135deg,rgba(125,255,107,0.04) 0%,rgba(125,255,107,0.01) 100%);animation:ai-pulse 3s ease-in-out infinite}
@keyframes ai-pulse{0%,100%{border-color:rgba(125,255,107,0.25)}50%{border-color:rgba(125,255,107,0.5)}}
.ai-insight-avatar{width:34px;height:34px;border-radius:50%;background:rgba(125,255,107,0.15);border:1px solid rgba(125,255,107,0.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.ai-insight-label{font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:0.45rem}

/* ── Weekly Review Dashboard Card ──────────────────────────────── */
.wr-pill{display:inline-flex;align-items:center;gap:0.2rem;padding:0.2rem 0.55rem;border-radius:999px;background:var(--surface2);border:1px solid var(--border2);font-size:0.72rem;font-family:'DM Mono',monospace;color:var(--text);white-space:nowrap}

/* ── Phase Context Card (inside check-in results) ────────────── */
.wc-phase-context{margin-top:0.75rem;padding:0.75rem 0.85rem;background:var(--surface2);border-radius:var(--radius);border:1px solid var(--border2)}
.wc-phase-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.45rem}
.wc-phase-name{font-size:0.82rem;font-weight:700;letter-spacing:0.05em}
.wc-phase-bar{height:4px;border-radius:2px;background:var(--border2);overflow:hidden;margin-bottom:0.4rem}
.wc-phase-bar-fill{height:100%;border-radius:2px;transition:width 0.5s}
.wc-phase-weights{display:flex;justify-content:space-between;font-size:0.68rem;color:var(--muted);font-family:'DM Mono',monospace;margin-bottom:0.45rem}
.wc-phase-explain{font-size:0.78rem;color:var(--text);line-height:1.6;opacity:0.85}
.wc-phase-next{margin-top:0.35rem;font-size:0.72rem;color:var(--muted);font-style:italic}

/* ── AI Weekly Review Section (inside check-in results) ──────── */
#wc-ai-review{margin-top:0.85rem;padding:0.75rem 0.85rem;background:linear-gradient(135deg,rgba(125,255,107,0.04),rgba(125,255,107,0.01));border:1px solid rgba(125,255,107,0.2);border-radius:var(--radius)}
#wc-ai-review > div:first-child{font-family:'Bebas Neue',sans-serif;font-size:0.85rem;letter-spacing:1.5px;color:var(--accent);margin-bottom:0.45rem}
#wc-ai-review-text{font-size:0.82rem;color:var(--text);line-height:1.7}

/* ── Weekly Coaching Notification Cards ─────────────────────────── */
.wc-notification{margin-top:0.75rem}
.wc-card{background:var(--surface2);border-radius:var(--radius);padding:0.65rem 0.75rem;margin-bottom:0.5rem;border-left:3px solid var(--border2);transition:border-color 0.2s}
.wc-card-win{border-left-color:var(--accent)}
.wc-card-struggle{border-left-color:var(--orange)}
.wc-card-tip{border-left-color:var(--blue)}
.wc-card-icon{font-size:1.1rem;flex-shrink:0;width:24px;text-align:center}
.wc-card-body{flex:1;min-width:0}
.wc-card-text{font-size:0.82rem;color:var(--text);line-height:1.5}
.wc-card-why{font-size:0.75rem;color:var(--muted);line-height:1.45;margin-top:0.3rem;padding-top:0.3rem;border-top:1px solid var(--border);display:none}
.wc-card-why.open{display:block}
.wc-card-toggle{font-size:0.7rem;color:var(--muted2);cursor:pointer;margin-top:0.25rem;display:inline-flex;align-items:center;gap:0.25rem}
.wc-card-toggle:hover{color:var(--text)}
.wc-card-toggle .chevron{transition:transform 0.2s;display:inline-block}
.wc-card-toggle .chevron.open{transform:rotate(90deg)}
.wc-section-label{font-size:0.65rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:0.4rem;display:flex;align-items:center;gap:0.35rem}
.wc-section-wins .wc-section-label{color:var(--accent)}
.wc-section-struggles .wc-section-label{color:var(--orange)}
.wc-section-tips .wc-section-label{color:var(--blue)}
.wc-section-count{font-size:0.6rem;font-weight:600;padding:0.1rem 0.35rem;border-radius:8px;color:#000}
.wc-section-wins .wc-section-count{background:var(--accent)}
.wc-section-struggles .wc-section-count{background:var(--orange)}
.wc-section-tips .wc-section-count{background:var(--blue)}

/* ── TRAINING MODE (unified app) ─────────────────────────────── */
/* When the Training section is active, the iframe goes full-screen.
   TrainCoach has its own bottom nav INSIDE the iframe, so NutriCoach's bar
   collapses to a single slim "← Back to Nutrition" strip on ALL screen
   sizes (clients and coaches alike). Previously: two full nav bars stacked
   on phones, an empty bar for coaches (#mobNavBackBtn didn't exist), and on
   desktop a floating Menu pill that opened the mobile sheet over the page. */
#training.active { padding: 0; overflow: hidden; }
#tc-frame { display: none; }
body.training-mode #tc-frame { display: block; }
body.training-mode #mobile-nav {
  display: flex !important; /* also on desktop — it's the only way back */
  z-index: 9995 !important; pointer-events: auto !important;
  height: 44px !important; min-height: 44px !important; padding: 0 !important;
  justify-content: center !important; align-items: stretch !important;
}
body.training-mode #mobile-nav .mob-tab { display: none !important; }
body.training-mode #mobile-nav #mobNavBackBtn {
  display: flex !important; flex-direction: row; align-items: center; justify-content: center;
  gap: 8px; width: 100%; min-height: 44px; padding: 0 1rem;
  font-size: 12px; font-weight: 700; color: var(--accent);
}
/* Training section stops above the slim back strip */
body.training-mode #training { position: fixed; top: 0; left: 0; right: 0; bottom: calc(44px + env(safe-area-inset-bottom)); z-index: 400; padding: 0; margin: 0; max-width: 100%; }
body.training-mode #tc-frame { bottom: 0 !important; height: 100% !important; position: absolute !important; z-index: auto !important; }
/* Hide NutriCoach chat FAB in training-mode for regular clients — TrainCoach has its own.
   Coaches keep the parent chat FAB so they always have chatbot access. */
body.training-mode:not(.coach-viewing) #chat-fab { display: none !important; }
body.training-mode.coach-viewing #chat-fab { z-index: 9999 !important; }

/* ═══════════════ PULL-TO-REFRESH ═══════════════ */
#ptr-indicator {
  position: fixed; top: 0; left: 50%; z-index: 9998;
  transform: translateX(-50%) translateY(-60px);
  opacity: 0;
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; padding: 0.45rem 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  font-size: 0.78rem; color: var(--muted);
  transition: opacity 0.2s, transform 0.25s ease-out;
  pointer-events: none;
}
#ptr-indicator.ptr-ready .ptr-text { color: var(--accent); font-weight: 700; }
.ptr-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border2);
  border-top-color: var(--accent);
  animation: none;
}
#ptr-indicator.ptr-loading .ptr-spinner { animation: ptr-spin 0.7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ── Meal photo thumbnails ─────────────────────────────────────────── */
.meal-photo-thumb {
  margin: 0.3rem 0 0.4rem 0.3rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 60px;
  position: relative;
}
.meal-photo-thumb img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}
.meal-photo-thumb.expanded {
  max-height: 300px;
}
.meal-photo-thumb.expanded img {
  width: 100%;
  max-width: 300px;
  height: auto;
  max-height: 280px;
}
.meal-photo-label {
  display: block;
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 0.1rem;
}
.meal-photo-thumb.expanded .meal-photo-label {
  display: none;
}