/* =====================================================================
   FlashDish — mobile dashboard. Two themes: Verdant (light) · Midnight (dark)
   ===================================================================== */

:root {
  /* Verdant (default) */
  --bg: #ebeee6;
  --frame: #d9ddd0;
  --card: #ffffff;
  --ink-card: #14160f;
  --text: #14160f;
  --text-2: #7c836f;
  --text-3: #9aa08f;
  --on-ink: #f4f6ee;
  --on-ink-2: #b9c0a8;

  /* THE ONE SIGNAL — lime. Rationed to CTAs / energy / the one bold device. */
  --signal: #c8f04e;
  --signal-2: #94cf1e;          /* hover / pressed (was --lime-deep) */
  --signal-soft: #dff58a;       /* tint / wash */
  --signal-glow: rgba(190,235,58,.45);
  --signal-grad: linear-gradient(135deg, #d4f25e, #94cf1e);
  /* back-compat aliases so existing var(--lime*) usage keeps working */
  --lime: var(--signal);
  --lime-grad: var(--signal-grad);
  --lime-deep: var(--signal-2);

  /* SEMANTIC / category only — muted, never a CTA or brand fill */
  --coral: #ff5a3c;  --coral-2: #ff8268;   /* danger / over-budget */
  --green: #3fc06a;  --green-2: #76de8e;    /* positive / live */
  --orange: #ff9120; --orange-2: #ffb454;   /* warn */
  --sky: #3aa6d0;    --sky-2: #86dcea;      /* info / neutral category */
  --streak-bg: #dff58a; --streak-tx: #3d4a14;

  --line: rgba(20,22,15,.08);
  --chip: #eef1e7;
  --track: #e7eadf;

  --r-card: 28px;
  --r-md: 18px;
  --r-sm: 14px;
  --pill: 999px;

  --sh-card: 0 18px 40px -28px rgba(28,38,12,.40);
  --sh-hero: 0 24px 52px -30px rgba(28,38,12,.42);
  --sh-tile: 0 10px 26px -20px rgba(28,38,12,.40);

  /* TYPE TRIPLET — body grotesk · mono eyebrow · serif-italic accent */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --ease: cubic-bezier(.25,1,.5,1);          /* tap / spring */
  --ease-reveal: cubic-bezier(.2,.7,.2,1);   /* house reveal easing */
}

[data-theme="midnight"] {
  --bg: #0a0d10;
  --frame: #04060a;
  --card: rgba(255,255,255,.045);
  --ink-card: rgba(255,255,255,.04);
  --text: #eef2ea;
  --text-2: #7a8278;
  --text-3: #9aa595;
  --on-ink: #eef2ea;
  --on-ink-2: #9aa595;

  --signal: #c6ff3a;
  --signal-2: #9be01e;
  --signal-soft: rgba(198,255,58,.16);
  --signal-glow: rgba(198,255,58,.42);
  --signal-grad: linear-gradient(135deg, #e2ff7a, #9be01e);
  --lime: var(--signal);
  --lime-grad: var(--signal-grad);
  --lime-deep: var(--signal-2);

  --coral: #ff7a5c;  --coral-2: #ff9a82;
  --green: #3fd07e;  --green-2: #76e3a4;
  --orange: #ffb23e; --orange-2: #ffc874;
  --sky: #5fe0d0;    --sky-2: #2ab8c8;
  --streak-bg: rgba(198,255,58,.16); --streak-tx: #d8ff8a;

  --line: rgba(255,255,255,.09);
  --chip: rgba(255,255,255,.06);
  --track: rgba(255,255,255,.08);

  --sh-card: 0 24px 54px -30px rgba(0,0,0,.7);
  --sh-hero: 0 24px 54px -28px rgba(0,0,0,.72);
  --sh-tile: 0 18px 40px -26px rgba(0,0,0,.7);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

/* Transparent, blended scrollbars everywhere */
html, body, .screen, .diet-chips, .shop-list { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.screen::-webkit-scrollbar,
.diet-chips::-webkit-scrollbar,
.shop-list::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
body {
  font-family: var(--font);
  background: var(--frame);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Device / screen */
.device { min-height: 100dvh; display: flex; align-items: stretch; justify-content: center; }
.screen {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--bg);
  min-height: 100dvh;
  overflow: hidden;
  transition: background .4s ease, color .4s ease;
}
[data-theme="midnight"] .screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(34rem 26rem at -10% -4%, rgba(198,255,58,.16), transparent 60%),
    radial-gradient(30rem 24rem at 112% 14%, rgba(95,224,208,.12), transparent 58%),
    radial-gradient(34rem 30rem at 50% 116%, rgba(255,122,92,.10), transparent 62%);
}
@media (min-width: 480px) {
  .device { align-items: center; padding: 24px 0; }
  .screen { min-height: auto; height: min(92dvh, 900px); border-radius: 44px; box-shadow: 0 50px 120px -40px rgba(0,0,0,.5); overflow-y: auto; }
}

/* Status bar */
.statusbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px 2px; font-size: 14px; font-weight: 700;
}
.sb-island { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 86px; height: 24px; border-radius: 999px; background: #000; }
[data-theme="midnight"] .sb-island { background: #000; }
.sb-icons { display: flex; gap: 6px; font-size: 15px; }

.app { position: relative; z-index: 1; padding: max(18px, env(safe-area-inset-top)) 16px 0; }

/* Eyebrow — house mono micro-label */
.eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }

/* Serif-italic accent word — the house tell. Use <i class="ac"> inside a headline. */
.ac, h1 .ac, h2 .ac { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--signal-2); }

/* Top bar */
.topbar { display: flex; align-items: center; gap: 12px; padding: 8px 0 18px; }
.avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--chip); display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--line); color: var(--text-3); font-size: 12px; font-weight: 700;
  background-size: cover; background-position: center;
}
.greet { flex: 1; min-width: 0; }
.greet h1 { font-size: 22px; font-weight: 800; letter-spacing: -.035em; }
.icon-btn {
  width: 46px; height: 46px; border-radius: 16px; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  display: grid; place-items: center; font-size: 19px; cursor: pointer;
  box-shadow: var(--sh-tile); transition: transform .12s var(--ease);
}
.icon-btn:active { transform: scale(.9); }

/* 2 · Stat tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.tile { border-radius: var(--r-md); padding: 18px; position: relative; overflow: hidden; box-shadow: var(--sh-tile); }
.tile-num { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.tile-num span { font-size: 16px; font-weight: 700; color: var(--text-3); margin-left: 2px; }
.tile-label { font-size: 12.5px; font-weight: 600; color: var(--text-3); margin-top: 6px; }
.tile-accent { background: var(--ink-card); color: var(--on-ink); }
.tile-accent .tile-num { color: var(--lime); }
.tile-accent .tile-label { color: var(--on-ink-2); }
.tile-glow { position: absolute; inset: 0; background: radial-gradient(60% 75% at 88% 22%, rgba(190,235,58,.40), rgba(190,235,58,.10) 45%, transparent 68%); pointer-events: none; }
.tile-neutral { background: var(--card); border: 1px solid var(--line); }
[data-theme="midnight"] .tile { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
[data-theme="midnight"] .tile-accent { background: var(--lime-grad); color: #0c1206; }
[data-theme="midnight"] .tile-accent .tile-num { color: #0c1206; }
[data-theme="midnight"] .tile-accent .tile-label { color: rgba(12,18,6,.7); }
[data-theme="midnight"] .tile-accent .tile-glow { display: none; }
/* --- richer stat tiles --- */
.tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; position: relative; z-index: 1; }
.tile-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; background: rgba(255,255,255,.12); color: var(--lime); }
.tile-neutral .tile-ic, .tile-ic.sky { background: color-mix(in srgb, var(--sky) 16%, transparent); color: var(--sky); }
.tile-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: var(--pill); background: rgba(255,255,255,.12); color: var(--on-ink); }
.tile-chip i { color: var(--orange); }
.tile-neutral .tile-chip, .tile-chip.down { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--lime-deep); }
.tile-chip.down i { color: var(--green); }
.tile-accent .tile-num, .tile-neutral .tile-num { position: relative; z-index: 1; }
.tile-accent .tile-label, .tile-neutral .tile-label { position: relative; z-index: 1; }
.streak-bar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 12px; position: relative; z-index: 1; }
.streak-bar span { height: 6px; border-radius: 999px; background: var(--track); }
.streak-bar span.on { background: var(--lime); }
.tile-accent .streak-bar span { background: rgba(255,255,255,.14); }
.tile-accent .streak-bar span.on { background: var(--lime); }
.spark { width: 100%; height: 30px; margin-top: 10px; display: block; position: relative; z-index: 1; }
.spark-line { fill: none; stroke: var(--lime-deep); stroke-width: 2.5; }
.spark-area { fill: url(#sparkFade, var(--lime)); fill: color-mix(in srgb, var(--lime-deep) 16%, transparent); stroke: none; }
.spark-dot { fill: var(--lime-deep); }
[data-theme="midnight"] .spark-line, [data-theme="midnight"] .spark-dot { stroke: var(--lime); fill: var(--lime); filter: drop-shadow(0 0 4px rgba(198,255,58,.7)); }
[data-theme="midnight"] .spark-area { fill: color-mix(in srgb, var(--lime) 14%, transparent); }
/* Midnight: cyan "Days tracked" tile */
[data-theme="midnight"] .tile-accent { background: linear-gradient(155deg, #7ff0e2, #26b6c8); color: #0a0d10; backdrop-filter: none; }
[data-theme="midnight"] .tile-accent .tile-num { color: #0a0d10; }
[data-theme="midnight"] .tile-accent .tile-label { color: rgba(10,13,16,.66); }
[data-theme="midnight"] .tile-accent .tile-ic { background: rgba(10,13,16,.14); color: #0a0d10; }
[data-theme="midnight"] .tile-accent .tile-chip { background: rgba(10,13,16,.16); color: #0a0d10; }
[data-theme="midnight"] .tile-accent .tile-chip i { color: #0a3d2e; }
[data-theme="midnight"] .tile-accent .streak-bar span { background: rgba(10,13,16,.18); }
[data-theme="midnight"] .tile-accent .streak-bar span.on { background: #0a0d10; }

/* Card base */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 20px; margin-bottom: 16px;
  box-shadow: var(--sh-card);
}
[data-theme="midnight"] .card { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--sh-card), inset 0 1px 0 rgba(255,255,255,.08); }

/* 3 · Hero */
.hero { box-shadow: var(--sh-hero); }
.hero-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.streak { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--streak-tx); background: var(--streak-bg); padding: 6px 11px; border-radius: var(--pill); }
.streak i { color: var(--orange); }
.hero-body { display: flex; align-items: center; gap: 16px; }
.ring-wrap { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.ring { display: block; }
.ring-track { fill: none; stroke: var(--ring-track); stroke-width: 14; }
.ring-fill {
  fill: none; stroke: url(#ringGrad); stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 345.58; stroke-dashoffset: 345.58;
  filter: drop-shadow(0 2px 6px rgba(132,194,24,.45));
  transition: stroke-dashoffset .7s cubic-bezier(.34,1.18,.64,1);
}
[data-theme="midnight"] .ring-fill { filter: drop-shadow(0 0 9px rgba(198,255,58,.6)); }
.ring-knob { fill: #fff; stroke: var(--lime-deep); stroke-width: 3.5; transform-box: view-box; transform-origin: 66px 66px; transition: transform .7s cubic-bezier(.34,1.18,.64,1); filter: drop-shadow(0 1px 3px rgba(0,0,0,.28)); }
[data-theme="midnight"] .ring-knob { fill: var(--lime); stroke: #0a0d10; filter: drop-shadow(0 0 6px rgba(198,255,58,.85)); }
/* --- calorie equation --- */
.cal-eq { flex: 1; min-width: 0; }
.eq-row { display: flex; align-items: center; gap: 11px; padding: 7px 0; }
.eq-row + .eq-row { border-top: 1px solid var(--line); }
.eq-ic { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 16px; background: var(--chip); color: var(--text-2); box-shadow: var(--sh-tile); }
[data-theme="midnight"] .eq-ic { background: rgba(255,255,255,.05); box-shadow: none; }
.eq-ic.food { background: color-mix(in srgb, var(--coral) 15%, transparent); color: var(--coral); }
.eq-ic.ex { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.eq-txt { min-width: 0; }
.eq-lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.eq-val { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin-top: 1px; }
/* --- meal-budget bar --- */
.mbudget { margin-top: 16px; }
.mb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mb-pct { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.mb-pct b { font-size: 14px; font-weight: 800; color: var(--text); }
.mb-bar { display: flex; height: 11px; border-radius: 999px; background: var(--track); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.mb-seg { height: 100%; }
.mb-seg.b, .dot.b { background: var(--orange); }
.mb-seg.l, .dot.l { background: var(--green); }
.mb-seg.s, .dot.s { background: var(--sky); }
.mb-seg.d, .dot.d { background: var(--coral); }
.mb-legend { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 10px; font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.mb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mb-legend .dot { width: 8px; height: 8px; border-radius: 50%; }
/* --- macro tiles (3-up) --- */
.macro-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.mt { background: var(--chip); border-radius: 14px; padding: 12px 12px 13px; }
[data-theme="midnight"] .mt { background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.mt-top { display: flex; flex-direction: column; gap: 2px; margin-bottom: 9px; }
.mt-top > span:first-child { font-size: 12px; font-weight: 700; color: var(--text-2); }
.mt-val { font-size: 13px; font-weight: 600; color: var(--text-3); }
.mt-val b { color: var(--text); font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.mt-track { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.mt-fill { height: 100%; border-radius: 999px; width: 0; transition: width .5s var(--ease); }
.mt[data-macro="protein"] .mt-fill { background: linear-gradient(90deg, var(--coral-2), var(--coral)); }
.mt[data-macro="carbs"] .mt-fill { background: linear-gradient(90deg, var(--green-2), var(--green)); }
.mt[data-macro="fat"] .mt-fill { background: linear-gradient(90deg, var(--orange-2), var(--orange)); }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-num { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.ring-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

.macro-bars { flex: 1; display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.mbar-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.mbar-val { color: var(--text-3); font-weight: 600; }
.mbar-track { height: 9px; border-radius: 999px; background: var(--track); overflow: hidden; }
.mbar-fill { height: 100%; border-radius: 999px; width: 0; transition: width .6s var(--ease); }
.mbar[data-macro="protein"] .mbar-fill { background: linear-gradient(90deg, var(--coral-2), var(--coral)); }
.mbar[data-macro="carbs"]   .mbar-fill { background: linear-gradient(90deg, var(--green-2), var(--green)); }
.mbar[data-macro="fat"]     .mbar-fill { background: linear-gradient(90deg, var(--orange-2), var(--orange)); }

.intensity { display: flex; gap: 6px; margin-top: 18px; background: var(--chip); padding: 5px; border-radius: var(--r-md); }
.seg { flex: 1; border: none; background: transparent; border-radius: 13px; padding: 9px 4px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--text-2); transition: transform .12s var(--ease); }
.seg:active { transform: scale(.95); }
.seg-label { font-size: 14px; font-weight: 800; }
.seg-kcal { font-size: 10.5px; font-weight: 600; opacity: .8; }
.seg.active { background: var(--ink-card); color: var(--on-ink); box-shadow: var(--sh-tile); }
.seg.active .seg-label { color: var(--lime); }
[data-theme="midnight"] .seg.active { background: var(--lime-grad); color: #0c1206; }
[data-theme="midnight"] .seg.active .seg-label { color: #0c1206; }

/* 4 · Coach */
.coach { display: flex; align-items: center; gap: 14px; background: color-mix(in srgb, var(--lime) 16%, var(--card)); }
[data-theme="midnight"] .coach { background: var(--card); box-shadow: var(--sh-card), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(198,255,58,.12); }
.coach-icon { width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; background: var(--lime-grad); display: grid; place-items: center; font-size: 22px; color: #14160f; }
[data-theme="midnight"] .coach-icon { box-shadow: 0 0 18px rgba(198,255,58,.5); }
.coach-text { flex: 1; min-width: 0; }
.coach-text p { font-size: 14px; font-weight: 600; margin-top: 3px; line-height: 1.45; }
.coach-arrow { font-size: 18px; color: var(--text-3); }

/* 5 · Hydration */
.hyd-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.hyd-litres { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin-top: 2px; }
.hyd-icon { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--sky-2), var(--sky)); display: grid; place-items: center; color: #fff; font-size: 20px; }
.droplets { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; margin-bottom: 12px; }
.drop { aspect-ratio: 1; border-radius: 12px; background: var(--chip); border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer; color: var(--text-3); font-size: 15px; transition: transform .12s var(--ease), background .2s ease; }
.drop:active { transform: scale(.88); }
.drop.on { background: linear-gradient(160deg, var(--sky-2), var(--sky)); border-color: transparent; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--sky) 80%, transparent); }
[data-theme="midnight"] .drop.on { box-shadow: 0 0 14px rgba(95,224,208,.5); }
.hyd-foot { font-size: 13px; font-weight: 600; color: var(--text-2); }
.hyd-foot span { font-weight: 800; color: var(--sky); }

/* 6 · Featured */
.featured { position: relative; height: 190px; border-radius: var(--r-card); overflow: hidden; margin-bottom: 16px; box-shadow: var(--sh-card); background: #cdd2c2 center/cover no-repeat; }
.featured-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.72)); }
.play-btn { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--lime-grad); color: #14160f; display: grid; place-items: center; font-size: 20px; cursor: pointer; z-index: 2; box-shadow: 0 8px 18px -6px rgba(148,207,30,.7); transition: transform .12s var(--ease); }
.play-btn:active { transform: scale(.9); }
[data-theme="midnight"] .play-btn { box-shadow: 0 0 20px rgba(198,255,58,.6); }
.featured-body { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; color: #fff; }
.featured-body h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 4px; }
.featured-meta { font-size: 12.5px; font-weight: 600; opacity: .92; }
.pill { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--pill); background: var(--lime); color: #14160f; }

/* 7 · Meal Plan */
.mealplan { margin-bottom: 16px; }
.mp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mp-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.view-toggle { display: flex; gap: 4px; background: var(--chip); padding: 4px; border-radius: var(--pill); }
.view-toggle button { border: none; background: transparent; color: var(--text-2); font-weight: 700; font-size: 13px; padding: 7px 15px; border-radius: var(--pill); cursor: pointer; transition: transform .12s var(--ease); }
.view-toggle button:active { transform: scale(.95); }
.view-toggle button.active { background: var(--ink-card); color: var(--on-ink); }
[data-theme="midnight"] .view-toggle button.active { background: var(--lime-grad); color: #0c1206; }

.diet-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.diet-chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; border: 1px solid var(--line); background: var(--card); color: var(--text-2); font-weight: 700; font-size: 13.5px; padding: 9px 16px; border-radius: var(--pill); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform .12s var(--ease); }
.chip:active { transform: scale(.95); }
.chip i { color: var(--coral); }
.chip.active { background: var(--lime); border-color: transparent; color: #14160f; }
.chip.active i { color: #14160f; }
[data-theme="midnight"] .chip.active { background: var(--lime-grad); color: #0c1206; box-shadow: 0 0 16px rgba(198,255,58,.35); }

.meal-list { display: flex; flex-direction: column; gap: 10px; }
.meal-card { display: flex; align-items: center; gap: 13px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 12px; box-shadow: var(--sh-tile); transition: transform .12s var(--ease); }
.meal-card:active { transform: scale(.99); }
.meal-thumb { width: 66px; height: 66px; border-radius: var(--r-sm); flex-shrink: 0; background: var(--chip) center/cover no-repeat; display: grid; place-items: center; color: var(--text-3); font-size: 24px; overflow: hidden; }
.meal-info { flex: 1; min-width: 0; }
.meal-row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.time-pill { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: var(--pill); }
.meal-type { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.meal-name { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meal-macros { font-size: 12px; font-weight: 600; color: var(--text-3); margin-top: 2px; }
.meal-kcal { text-align: right; flex-shrink: 0; }
.meal-kcal b { display: block; font-size: 18px; font-weight: 800; color: var(--lime-deep); letter-spacing: -.02em; }
[data-theme="midnight"] .meal-kcal b { color: var(--lime); }
.meal-kcal span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
/* slot accent colors on time pills */
.tp-breakfast { background: color-mix(in srgb, var(--orange) 20%, transparent); color: var(--orange); }
.tp-lunch { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
.tp-snack { background: color-mix(in srgb, var(--sky) 22%, transparent); color: var(--sky); }
.tp-dinner { background: color-mix(in srgb, var(--coral) 20%, transparent); color: var(--coral); }

.mp-actions { display: flex; gap: 10px; margin-top: 14px; }
.btn { border: none; border-radius: 16px; font-family: var(--font); font-weight: 800; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s var(--ease); }
.btn:active { transform: scale(.96); }
.btn-primary { flex: 1; padding: 16px; background: var(--ink-card); color: var(--on-ink); }
.btn-primary i { color: var(--lime); }
[data-theme="midnight"] .btn-primary { background: var(--lime-grad); color: #0c1206; }
[data-theme="midnight"] .btn-primary i { color: #0c1206; }
.btn-square { width: 54px; padding: 16px; background: var(--card); border: 1px solid var(--line); color: var(--text); font-size: 18px; }

/* Weekly */
.weekly { display: flex; flex-direction: column; gap: 12px; margin-top: 0; }
.wk-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; }
.wk-day { font-size: 13px; font-weight: 700; color: var(--text-2); }
.wk-bar { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.wk-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--lime-deep); }
.wk-row.today .wk-bar > span { background: var(--lime-grad); }
[data-theme="midnight"] .wk-row.today .wk-bar > span { box-shadow: 0 0 12px rgba(198,255,58,.5); }
.wk-kcal { font-size: 13px; font-weight: 700; color: var(--text-2); }

/* 8 · Weight projection */
.wp-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.wp-range { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.wp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); padding: 6px 11px; border-radius: var(--pill); }
.wp-chart { display: block; }
.wp-line { stroke: var(--lime-deep); stroke-width: 3; }
[data-theme="midnight"] .wp-line { stroke: var(--lime); filter: drop-shadow(0 0 6px rgba(198,255,58,.6)); }
.wp-grad-top { stop-color: var(--lime-deep); stop-opacity: .35; }
.wp-grad-bot { stop-color: var(--lime-deep); stop-opacity: 0; }
.wp-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--text-3); }
.wp-controls { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.wp-controls input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: var(--track); padding: 0; cursor: pointer; }
.wp-controls input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--lime-deep); cursor: pointer; box-shadow: 0 4px 10px -2px rgba(20,22,40,.4); }
[data-theme="midnight"] .wp-controls input[type="range"]::-webkit-slider-thumb { background: var(--lime); box-shadow: 0 0 12px rgba(198,255,58,.6); }
.wp-controls input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: none; border-radius: 50%; background: var(--lime-deep); cursor: pointer; }
.wp-controls #wpWeeks { font-size: 12.5px; font-weight: 700; color: var(--text-2); min-width: 62px; text-align: right; }

/* 9 · Calorie balance */
.balance .bal-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.bal-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; }
.bal-label { font-size: 13px; font-weight: 700; color: var(--text-2); }
.bal-track { height: 9px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bal-fill { height: 100%; border-radius: 999px; width: 0; transition: width .6s var(--ease); }
.bal-row[data-bal="intake"] .bal-fill { background: var(--lime-grad); }
.bal-row[data-bal="burned"] .bal-fill { background: linear-gradient(90deg, var(--coral-2), var(--coral)); }
.bal-row[data-bal="deficit"] .bal-fill { background: linear-gradient(90deg, var(--sky-2), var(--sky)); }
.bal-val { font-size: 13px; font-weight: 800; }

/* 10 · Shopping */
.shop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.shop-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.pill-soft { background: var(--chip); color: var(--text-2); }
.shop-list { display: flex; flex-direction: column; }
.shop-row { display: flex; align-items: center; gap: 12px; padding: 13px 2px; cursor: pointer; border-top: 1px solid var(--line); }
.shop-row:first-child { border-top: none; }
.shop-cb { display: none; }
.shop-box { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; flex-shrink: 0; transition: all .18s var(--ease); font-size: 14px; }
.shop-name { flex: 1; font-size: 15px; font-weight: 600; }
.shop-qty { font-size: 13px; font-weight: 600; color: var(--text-3); }
.shop-cb:checked + .shop-box { background: var(--lime); border-color: var(--lime); color: #14160f; }
.shop-cb:checked ~ .shop-name { text-decoration: line-through; color: var(--text-3); }
.shop-row:has(.shop-cb:checked) { opacity: .6; }

/* Bottom nav */
.bottom-space { height: 96px; }
.navbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 30;
  width: min(408px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--pill); padding: 10px 18px;
  box-shadow: 0 20px 44px -20px rgba(0,0,0,.4);
}
[data-theme="midnight"] .navbar { backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 20px 44px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); }
@media (min-width: 480px) { .navbar { bottom: calc(4dvh + 18px); } }
.nav-item { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text-3); font-size: 19px; padding: 4px 6px; transition: color .2s ease, transform .12s var(--ease); }
.nav-item span { font-size: 9.5px; font-weight: 700; }
.nav-item:active { transform: scale(.9); }
.nav-item.active { color: var(--text); }
.nav-item.active i { color: var(--lime-deep); }
[data-theme="midnight"] .nav-item.active i { color: var(--lime); }
.nav-fab { width: 54px; height: 54px; border-radius: 50%; border: none; background: var(--lime-grad); color: #14160f; font-size: 24px; display: grid; place-items: center; cursor: pointer; margin-top: -22px; box-shadow: 0 12px 26px -8px rgba(148,207,30,.7); transition: transform .12s var(--ease); }
.nav-fab:active { transform: scale(.92); }
[data-theme="midnight"] .nav-fab { box-shadow: 0 0 26px rgba(198,255,58,.6); }
.home-indicator { position: fixed; left: 50%; transform: translateX(-50%); bottom: 8px; width: 130px; height: 5px; border-radius: 999px; background: var(--text-3); opacity: .4; z-index: 31; }
@media (min-width: 480px) { .home-indicator { display: none; } }

/* Meal-swap bottom sheet */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(8,10,8,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .26s var(--ease); }
.sheet-wrap.open .sheet-backdrop { opacity: 1; }
.sheet {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%);
  width: min(440px, 100%); max-height: 85dvh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border-radius: 28px 28px 0 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -30px 60px -30px rgba(0,0,0,.5); transition: transform .3s var(--ease);
}
[data-theme="midnight"] .sheet { background: #14181d; box-shadow: 0 -30px 60px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); }
.sheet-wrap.open .sheet { transform: translateX(-50%) translateY(0); }
.sheet-grip { width: 42px; height: 5px; border-radius: 999px; background: var(--text-3); opacity: .35; margin: 4px auto 10px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sheet-head h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.sheet-close { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--chip); color: var(--text); display: grid; place-items: center; font-size: 16px; cursor: pointer; }
.sheet-list { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
/* sheet header pinned, scrollable bodies, footer buttons always visible */
.sheet-head, .sheet-grip, .sheet-log, .log-search, .prof-form > .pf-save, #pfSave, #lcAdd { flex-shrink: 0; }
.prof-form { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.prof-sheet #pfSave, .log-card #lcAdd { flex-shrink: 0; }
.log-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* readable input text in BOTH themes (iOS needs -webkit-text-fill-color) */
.sheet input, .sheet select, .sheet textarea,
.log-search, .lc-name, .lc-macros input, .pf-row input, .pf-row select {
  color: var(--text); -webkit-text-fill-color: var(--text); caret-color: var(--lime-deep);
}
.sheet input::placeholder, .log-search::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); opacity: 1; }
.sheet-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 13px 14px; cursor: pointer; font-family: var(--font); transition: transform .12s var(--ease), border-color .15s ease; }
.sheet-row:active { transform: scale(.98); }
.sr-info { flex: 1; min-width: 0; }
.sr-name { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.sr-macros { font-size: 12px; font-weight: 600; color: var(--text-3); margin-top: 2px; }
.sr-kcal { font-size: 15px; font-weight: 800; color: var(--text); flex-shrink: 0; }
.sr-kcal span { font-size: 10px; font-weight: 700; color: var(--text-3); margin-left: 3px; }
.sr-check { font-size: 22px; color: var(--lime-deep); flex-shrink: 0; opacity: 0; }
[data-theme="midnight"] .sr-check { color: var(--lime); }
.sheet-row.sel { border-color: var(--lime-deep); }
.sheet-row.sel .sr-check { opacity: 1; }

/* Play overlay on meal thumbnails */
.meal-thumb { position: relative; }
.thumb-play {
  position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(20,22,15,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  color: #fff; display: grid; place-items: center; font-size: 13px; cursor: pointer;
  opacity: 0; transition: opacity .2s ease, transform .12s var(--ease);
}
.meal-thumb:hover .thumb-play, .meal-card:active .thumb-play { opacity: 1; }
.thumb-play:active { transform: scale(.85); }
.thumb-play i { margin-left: 1px; }
@media (hover: none) { .thumb-play { opacity: 1; background: rgba(20,22,15,.42); } }

/* Recipe video modal */
.recipe-sheet { max-height: 84dvh; }
.recipe-player { margin-bottom: 12px; }
.rp-frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: 16px; overflow: hidden; background: #000; box-shadow: var(--sh-card); }
.rp-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.recipe-list { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.recipe-loading { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-weight: 600; font-size: 14px; padding: 24px 4px; justify-content: center; }
.spin { width: 18px; height: 18px; border: 3px solid var(--chip); border-top-color: var(--lime-deep); border-radius: 50%; animation: spin .8s linear infinite; }
.recipe-row { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 8px; cursor: pointer; font-family: var(--font); transition: transform .12s var(--ease); }
.recipe-row:active { transform: scale(.98); }
.rr-thumb { position: relative; width: 116px; height: 70px; flex-shrink: 0; border-radius: 11px; background: var(--chip) center/cover no-repeat; overflow: hidden; }
.rr-dur { position: absolute; right: 5px; bottom: 5px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,.78); padding: 1px 5px; border-radius: 5px; }
.rr-play { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; font-size: 13px; }
.rr-info { flex: 1; min-width: 0; }
.rr-title { font-size: 13.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rr-chan { font-size: 12px; font-weight: 600; color: var(--text-3); margin-top: 3px; }
.recipe-fallback { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; border-radius: 14px; background: var(--chip); color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; }
.recipe-fallback i { color: #ff0000; font-size: 20px; }

/* Logged-today card */
.tl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tl-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.tl-add { width: auto; padding: 9px 14px; font-size: 13px; font-weight: 800; border-radius: var(--pill); background: var(--lime); color: var(--text); box-shadow: none; display: inline-flex; align-items: center; gap: 6px; }
[data-theme="midnight"] .tl-add { background: var(--lime-grad); color: #0c1206; }
.tl-list { display: flex; flex-direction: column; }
.tl-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.tl-row:first-child { border-top: none; }
.tl-info { flex: 1; min-width: 0; }
.tl-name { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-macros { font-size: 12px; font-weight: 600; color: var(--text-3); margin-top: 2px; }
.tl-kcal { font-size: 15px; font-weight: 800; color: var(--lime-deep); flex-shrink: 0; }
[data-theme="midnight"] .tl-kcal { color: var(--lime); }
.tl-kcal span { font-size: 10px; font-weight: 700; color: var(--text-3); margin-left: 3px; }
.tl-del { width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--chip); color: var(--text-3); box-shadow: none; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; }
.tl-empty { font-size: 13.5px; font-weight: 500; color: var(--text-3); line-height: 1.5; }
.tl-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
.tl-kcal.burn { color: var(--orange); }
[data-theme="midnight"] .tl-kcal.burn { color: var(--orange); }

/* + chooser (log meal vs log exercise) */
.qa-list { display: flex; flex-direction: column; gap: 12px; }
.qa-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 18px; padding: 16px; cursor: pointer; font-family: var(--font); transition: transform .12s var(--ease), border-color .15s ease; }
.qa-opt:active { transform: scale(.98); }
.qa-opt:hover { border-color: var(--lime-deep); }
.qa-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; background: var(--lime-grad); color: #0c1206; }
.qa-ic.ex { background: color-mix(in srgb, var(--orange) 90%, #fff); color: #2a1400; }
.qa-txt { flex: 1; min-width: 0; }
.qa-t { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.qa-s { font-size: 12.5px; font-weight: 600; color: var(--text-3); margin-top: 2px; }
.qa-opt > .ph-caret-right { color: var(--text-3); font-size: 15px; }

/* exercise log sheet */
.ex-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.ex-fields label { display: block; font-size: 12px; font-weight: 700; color: var(--text-3); }
.ex-fields label input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font-size: 15px; font-weight: 700; border: 1.5px solid var(--line); border-radius: 12px; background: var(--chip); color: var(--text); -webkit-text-fill-color: var(--text); }

/* Log sheet */
.sheet-log { width: 100%; margin-bottom: 12px; }
.log-search { width: 100%; padding: 14px 16px; font-size: 15.5px; font-weight: 600; border: 1.5px solid var(--line); border-radius: 14px; background: var(--chip); color: var(--text); margin-bottom: 12px; }
.log-search:focus { outline: none; border-color: var(--text); }
.log-hint { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 6px 2px 8px; }
.log-results { max-height: none; }
.log-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 11px 13px; cursor: pointer; font-family: var(--font); margin-bottom: 8px; transition: transform .12s var(--ease); }
.log-row:active { transform: scale(.98); }
.lr-info { flex: 1; min-width: 0; }
.lr-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-macros { font-size: 11.5px; font-weight: 600; color: var(--text-3); margin-top: 1px; }
.lr-kcal { font-size: 14px; font-weight: 800; flex-shrink: 0; }
.lr-kcal span { font-size: 9.5px; font-weight: 700; color: var(--text-3); margin-left: 2px; }
.lr-add { font-size: 16px; color: var(--lime-deep); flex-shrink: 0; }
[data-theme="midnight"] .lr-add { color: var(--lime); }
.log-ai { margin-bottom: 8px; }
.log-est { width: 100%; padding: 13px; font-size: 14px; font-weight: 800; border-radius: 14px; background: var(--text); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.log-est i { color: var(--lime); }
.log-est .spin { width: 16px; height: 16px; border-width: 3px; }
.log-card { border: 1.5px solid var(--lime-deep); border-radius: 16px; padding: 14px; background: var(--card); }
.log-card-tag { font-size: 12px; font-weight: 700; color: var(--lime-deep); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.log-card-tag.warn { color: var(--orange); }
[data-theme="midnight"] .log-card-tag { color: var(--lime); }
.lc-name { width: 100%; padding: 11px 13px; font-size: 15px; font-weight: 700; border: 1.5px solid var(--line); border-radius: 12px; background: var(--chip); color: var(--text); margin-bottom: 10px; }
.lc-macros { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 7px; margin-bottom: 12px; }
.lc-macros label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.lc-macros input { width: 100%; min-width: 0; padding: 10px 8px; font-size: 15px; font-weight: 700; border: 1.5px solid var(--line); border-radius: 10px; background: var(--chip); color: var(--text); -webkit-appearance: none; text-align: center; }
.lc-macros input:focus, .lc-name:focus, .log-search:focus { outline: none; border-color: var(--text); }
.lc-macros input.err { border-color: var(--coral); }
.lc-actions { display: flex; gap: 8px; }
.lc-actions .btn-primary { flex: 1; }
.lc-est { flex: 1; padding: 13px; font-size: 13.5px; font-weight: 800; border-radius: 14px; background: var(--text); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.lc-est i { color: var(--lime); }
.lc-est[disabled] { opacity: .7; }
[data-theme="midnight"] .lc-est { background: rgba(255,255,255,.1); }

/* Profile sheet */
.prof-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.pf-row { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.pf-row.span2 { grid-column: 1 / -1; }
.pf-htwo { display: flex; gap: 8px; }
.pf-htwo input { width: 100%; min-width: 0; }

/* ---- usability polish ---- */
.sheet input[type="number"]::-webkit-inner-spin-button,
.sheet input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sheet input[type="number"] { -moz-appearance: textfield; }
.streak { white-space: nowrap; }
.tl-del { width: 30px; height: 30px; }
/* larger, comfortable tap targets on small interactive bits */
.hc-edit, .tl-add { min-height: 38px; }
.sheet-close { width: 38px; height: 38px; }
.diet-chips .chip { min-height: 40px; }
/* avoid awkward clip of the empty-log hint */
.tl-empty { padding: 2px 0 2px; }

/* ===== Meals discover page ===== */
.meals-view { position: relative; z-index: 1; padding: max(18px, env(safe-area-inset-top)) 16px 0; animation: fadeIn .3s ease; }
.mv-head { padding: 6px 2px 14px; }
.mv-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.mv-head p { font-size: 14px; font-weight: 600; color: var(--text-2); margin-top: 3px; }
.mv-tabs, .mv-diets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.mv-tabs::-webkit-scrollbar, .mv-diets::-webkit-scrollbar { display: none; }
.mv-tabs { margin-bottom: 12px; }
.mv-diets { margin-bottom: 14px; }
.mv-tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid var(--line); background: var(--card); color: var(--text-2); font-weight: 700; font-size: 14px; border-radius: var(--pill); cursor: pointer; min-height: 40px; transition: transform .12s var(--ease); }
.mv-tab:active { transform: scale(.96); }
.mv-tab i { font-size: 15px; }
.mv-tab.active { background: var(--ink-card); color: var(--on-ink); border-color: transparent; }
.mv-tab.active i { color: var(--lime); }
[data-theme="midnight"] .mv-tab.active { background: var(--lime-grad); color: #0c1206; }
[data-theme="midnight"] .mv-tab.active i { color: #0c1206; }
.mv-search { width: 100%; padding: 14px 16px; font-size: 15.5px; font-weight: 600; border: 1.5px solid var(--line); border-radius: 14px; background: var(--chip); color: var(--text); -webkit-text-fill-color: var(--text); margin-bottom: 12px; }
.mv-search::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); }
.mv-search:focus { outline: none; border-color: var(--text); }
.mv-chip { flex-shrink: 0; padding: 9px 15px; border: 1px solid var(--line); background: var(--card); color: var(--text-2); font-weight: 700; font-size: 13px; border-radius: var(--pill); cursor: pointer; min-height: 38px; }
.mv-chip.active { background: var(--lime); color: #14160f; border-color: transparent; }
[data-theme="midnight"] .mv-chip.active { background: var(--lime-grad); color: #0c1206; }
.mv-count { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 2px 12px; }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mv-empty { grid-column: 1 / -1; text-align: center; color: var(--text-3); font-weight: 600; padding: 36px 0; }
.dc { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--sh-tile); display: flex; flex-direction: column; animation: fadeIn .35s ease; }
.dc-img { position: relative; aspect-ratio: 1.35; background: var(--chip) center/cover no-repeat; display: grid; place-items: center; color: var(--text-3); font-size: 26px; }
.dc-play { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(20,22,15,.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); color: #fff; display: grid; place-items: center; font-size: 12px; cursor: pointer; transition: transform .12s var(--ease); }
.dc-play:active { transform: scale(.85); }
.dc-play i { margin-left: 1px; }
.dc-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.dc-name { font-size: 13.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.dc-meta { font-size: 11px; font-weight: 600; color: var(--text-3); }
.dc-meta b { color: var(--lime-deep); font-size: 13px; }
[data-theme="midnight"] .dc-meta b { color: var(--lime); }
.dc-log { margin-top: auto; padding: 9px; font-size: 13px; font-weight: 800; border-radius: 12px; background: var(--ink-card); color: var(--on-ink); display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; border: none; transition: transform .12s var(--ease); }
.dc-log:active { transform: scale(.96); }
.dc-log i { color: var(--lime); }
[data-theme="midnight"] .dc-log { background: var(--lime-grad); color: #0c1206; }
[data-theme="midnight"] .dc-log i { color: #0c1206; }
/* sort + favourites + add-to-plan */
.mv-countrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 12px; }
.mv-sort { flex-shrink: 0; -webkit-appearance: none; appearance: none; border: 1px solid var(--line); background: var(--chip); color: var(--text); -webkit-text-fill-color: var(--text); font-family: var(--font); font-weight: 700; font-size: 12.5px; padding: 8px 30px 8px 13px; border-radius: var(--pill); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2315171c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
[data-theme="midnight"] .mv-sort { background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23eef2ea' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.mv-fav i { color: var(--coral); }
.mv-fav.active { background: color-mix(in srgb, var(--coral) 16%, var(--card)); border-color: color-mix(in srgb, var(--coral) 40%, transparent); color: var(--coral); }
.mv-fav.active i { color: var(--coral); }
.dc-fav { position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(20,22,15,.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); color: #fff; display: grid; place-items: center; font-size: 14px; cursor: pointer; transition: transform .12s var(--ease); }
.dc-fav:active { transform: scale(.85); }
.dc-fav.on i { color: var(--coral); }
.dc-actions { display: flex; gap: 7px; margin-top: auto; }
.dc-actions .dc-log { flex: 1; margin-top: 0; }
.dc-plan { width: 40px; flex-shrink: 0; padding: 9px; border-radius: 12px; background: var(--chip); color: var(--text); border: 1px solid var(--line); display: grid; place-items: center; font-size: 15px; cursor: pointer; transition: transform .12s var(--ease); }
.dc-plan:active { transform: scale(.92); }

/* ===== Me page ===== */
.me-profile { display: flex; align-items: center; gap: 14px; }
.me-av { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--chip); background-size: cover; background-position: center; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--text-2); flex-shrink: 0; cursor: pointer; }
.me-av .me-av-i { transition: opacity .2s; }
.me-av.has-photo .me-av-i { opacity: 0; }
.me-av-cam { position: absolute; right: -3px; bottom: -3px; width: 21px; height: 21px; border-radius: 50%; background: var(--lime); color: #14160f; display: grid; place-items: center; font-size: 11px; border: 2px solid var(--card); }
[data-theme="midnight"] .me-av-cam { border-color: var(--bg); }
.avatar.has-photo span { display: none; }
.me-id { flex: 1; min-width: 0; }
.me-name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.me-meta { font-size: 13px; font-weight: 600; color: var(--text-3); margin-top: 2px; }
.me-h3 { font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px; }
.me-macros .mbar + .mbar { margin-top: 13px; }
.me-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.me-chip { padding: 9px 14px; border: 1px solid var(--line); background: var(--chip); color: var(--text-2); font-weight: 700; font-size: 13px; border-radius: var(--pill); cursor: pointer; min-height: 38px; transition: transform .12s var(--ease); }
.me-chip:active { transform: scale(.95); }
.me-chip.on { background: var(--lime); color: #14160f; border-color: transparent; }
[data-theme="midnight"] .me-chip.on { background: var(--lime-grad); color: #0c1206; }

/* Supplements card */
.supp-head { display: flex; align-items: center; justify-content: space-between; }
.supp-head .me-h3 { margin-bottom: 0; }
.supp-refresh { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--chip); color: var(--text-2); display: grid; place-items: center; font-size: 15px; cursor: pointer; transition: transform .3s var(--ease); }
.supp-refresh:active { transform: rotate(180deg); }
.supp-list { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.supp-loading { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-weight: 600; font-size: 13.5px; padding: 14px 2px; }
.supp-loading i { color: var(--orange); }
.supp-row { display: flex; gap: 12px; align-items: flex-start; }
.supp-ic { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 18px; }
.supp-ic.nat { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.supp-ic.sup { background: color-mix(in srgb, var(--sky) 18%, transparent); color: var(--sky); }
.supp-info { flex: 1; min-width: 0; }
.supp-name { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.supp-kind { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line); padding: 2px 7px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.supp-reason { font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-top: 3px; line-height: 1.4; }
.supp-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--text-3); line-height: 1.45; }
.supp-note i { color: var(--text-3); margin-top: 1px; flex-shrink: 0; }
.pf-row input, .pf-row select { padding: 12px 13px; font-size: 15.5px; font-weight: 600; border: 1.5px solid var(--line); border-radius: 12px; background: var(--chip); color: var(--text); -webkit-appearance: none; appearance: none; }
.pf-row input:focus, .pf-row select:focus { outline: none; border-color: var(--text); }
.pf-row select { background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2315171c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; }
[data-theme="midnight"] .pf-row select { background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23eef2ea' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 16px); z-index: 80; background: var(--text); color: #fff; font-size: 13.5px; font-weight: 700; padding: 12px 18px; border-radius: var(--pill); box-shadow: var(--sh-md); max-width: 88%; text-align: center; opacity: 0; transition: opacity .28s ease, transform .28s var(--ease); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
[data-theme="midnight"] .toast { background: var(--lime-grad); color: #0c1206; }
.avatar { cursor: pointer; }

/* Your numbers (health) card */
.hc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hc-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.hc-edit { width: auto; padding: 8px 13px; font-size: 12.5px; font-weight: 800; border-radius: var(--pill); background: var(--chip); color: var(--text); box-shadow: none; display: inline-flex; align-items: center; gap: 5px; }
.hc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hc-item { background: var(--chip); border-radius: 16px; padding: 14px 15px; }
.hc-val { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1.1; }
.hc-lbl { font-size: 11.5px; font-weight: 700; color: var(--text-3); margin-top: 3px; }

/* Entrance */
@keyframes rise { to { opacity: 1; transform: none; } }
.app > section, .app > header { opacity: 0; transform: translateY(14px); animation: rise .6s var(--ease) forwards; }
.app > header { animation-delay: .02s; }
.tiles { animation-delay: .06s; }
.hero { animation-delay: .10s; }
.coach { animation-delay: .14s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .app > section, .app > header { opacity: 1; transform: none; } }