*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  /* Light is the default surface language; dark is an automatic override for
     users whose OS/browser is set to dark — see the prefers-color-scheme
     block below. --fg-rgb is the RGB triplet behind every inline
     rgba(var(--fg-rgb),X) "plain text on the page background" use across the
     JS files — it flips ink/white with the theme so those opacity tiers
     don't have to be hand-tuned twice. Fixed colored surfaces (mission card,
     plan hero, login/paywall gradients, --pink buttons) intentionally keep
     literal white text — they're branded islands, not part of the neutral
     theme, and stay dark/vivid in both modes. Modal glass (--glass-bg) DOES
     theme, since modal content reuses the same ink/muted text as the page. */
  :root {
    --pink: #e8547a;
    --pink-light: #f0698b;
    --bg: #f7f5f0;
    --card: #ffffff;
    --card2: #efece4;
    --border: #e3ded2;
    --text: #201e1a;
    --muted: #6b675c;
    --muted2: #948f80;
    --fg-rgb: 32,30,26;
    --glass-bg: rgba(255,255,255,.82);
    --glass-border: rgba(30,26,18,.08);
    --green: #2f8f47;
    --blue: #3573b0;
    --orange: #c17610;
    --red-card: #3d1420;
    --nav-h: 68px;
    --radius: 18px;
    --shadow-card: 0 8px 24px rgba(30,26,18,.10);
    --shadow-soft: 0 4px 14px rgba(30,26,18,.07);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0e0c0a;
      --card: #1a1714;
      --card2: #221e19;
      --border: #2b2620;
      --text: #fff;
      --muted: #a3a099;
      --muted2: #6b675e;
      --fg-rgb: 255,255,255;
      --glass-bg: rgba(20,20,24,.78);
      --glass-border: rgba(255,255,255,.08);
      --green: #4CAF50;
      --blue: #5B9BD5;
      --orange: #f4a623;
      --shadow-card: 0 8px 24px rgba(0,0,0,.35);
      --shadow-soft: 0 4px 14px rgba(0,0,0,.22);
    }
  }
  html, body { height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow: hidden; }

  /* ── LOGIN SCREEN ── */
  #login-screen {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999;
    background: var(--bg);
    color: var(--text);
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding: 60px 32px 48px;
  }
  #login-screen.hidden { display: none; }
  .login-logo-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
  .login-wordmark {
    font-size: 42px; font-weight: 900; letter-spacing: -1px;
    background: linear-gradient(90deg, #e8547a, #c44aff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }
  .login-tagline { font-size: 15px; color: var(--muted); text-align: center; margin-top: -8px; }
  .login-buttons { width: 100%; display: flex; flex-direction: column; gap: 14px; }
  .btn-signin {
    width: 100%; padding: 18px; border-radius: 50px; border: none;
    background: var(--pink); color: #fff; font-size: 16px; font-weight: 800;
    letter-spacing: 1px; cursor: pointer; transition: opacity .2s;
  }
  .btn-signin:active { opacity: .85; }
  .btn-getstarted {
    width: 100%; padding: 17px; border-radius: 50px;
    border: 1.5px solid var(--border); background: rgba(var(--fg-rgb),.04);
    color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer; transition: all .2s;
  }
  .btn-getstarted:active { background: rgba(var(--fg-rgb),.09); }
  .login-email-form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
  .login-email-input {
    width: 100%; padding: 17px 20px; border-radius: 16px;
    border: 1.5px solid var(--border); background: rgba(var(--fg-rgb),.04);
    color: var(--text); font-size: 16px; outline: none;
  }
  .login-email-input::placeholder { color: var(--muted); }
  .login-email-input:focus { border-color: var(--pink); }
  .btn-back { background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 4px; }
  .login-support { font-size: 13px; color: var(--muted); text-align: center; }
  .login-support a { color: var(--pink); text-decoration: none; }
  @keyframes floatLeaf { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-8px) rotate(5deg)} }
  .leaf-anim { animation: floatLeaf 3s ease-in-out infinite; }
  .leaf-anim:nth-child(2) { animation-delay: .5s; }
  .leaf-anim:nth-child(3) { animation-delay: 1s; }
  .leaf-anim:nth-child(4) { animation-delay: 1.5s; }
  .leaf-anim:nth-child(5) { animation-delay: .8s; }

  /* ── APP SHELL ── */
  #app { display: flex; flex-direction: column; height: 100%; max-width: 430px; margin: 0 auto; position: relative; background: var(--bg); }
  .screen { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: calc(var(--nav-h) + 8px); scroll-behavior: smooth; }
  .screen::-webkit-scrollbar { display: none; }

  /* ── STATUS BAR ── */
  .status-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 4px; font-size: 13px; font-weight: 600; flex-shrink: 0; }
  .status-bar .time { font-size: 15px; font-weight: 700; }
  .status-icons { display: flex; align-items: center; gap: 6px; font-size: 13px; }

  /* ── BOTTOM NAV ── */
  nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; height: var(--nav-h); background: var(--card); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-around; padding: 0 4px 8px; z-index: 100; }
  .sidebar-logo { display: none; }
  nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px 0; font-size: 10px; font-weight: 500; transition: color .2s; -webkit-tap-highlight-color: transparent; }
  nav button.active { color: var(--pink); }
  nav button svg { width: 22px; height: 22px; }

  /* ── SOS CALM BUTTON — reachable regardless of scroll/tab, above the bottom nav ── */
  .sos-btn { position: fixed; bottom: calc(var(--nav-h) + 16px); right: 16px; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg,#22c55e,#0891b2); border: none; box-shadow: 0 4px 16px rgba(0,0,0,.4); z-index: 500; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; }
  .sos-btn:active { transform: scale(0.94); }
  .sos-btn-pulse { animation: sosPulseRing 1.8s ease-out infinite; }
  @keyframes sosPulseRing { 0% { box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 0 0 rgba(34,197,94,.55); } 100% { box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 0 14px rgba(34,197,94,0); } }
  @media (prefers-reduced-motion: reduce) { .sos-btn-pulse { animation: none; } }
  .sos-intro-tooltip { position: fixed; bottom: calc(var(--nav-h) + 78px); right: 16px; width: 200px; background: var(--card); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-card); z-index: 501; }
  .sos-intro-tooltip .sos-intro-arrow { position: absolute; bottom: -7px; right: 20px; width: 14px; height: 14px; background: var(--card); transform: rotate(45deg); border-radius: 2px; }
  .sos-intro-tooltip .sos-intro-text { font-size: 12.5px; line-height: 1.45; color: var(--text); margin-bottom: 10px; position: relative; }
  .sos-intro-tooltip .sos-intro-btn { width: 100%; background: rgba(var(--fg-rgb),.08); border: none; border-radius: 10px; padding: 8px; font-size: 12px; font-weight: 700; color: var(--pink-light); cursor: pointer; }

  /* ── SHARED COMPONENTS ── */
  .page-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; }
  .page-title { font-size: 22px; font-weight: 700; }
  .icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
  .icon-btn:active { background: var(--border); }
  .tab-row { display: flex; padding: 4px 16px 12px; gap: 8px; }
  .tab-pill { padding: 7px 16px; border-radius: 20px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tab-pill.active { background: var(--pink); color: #fff; }
  .tab-pill:not(.active) { background: transparent; color: var(--muted); }
  .card { background: var(--card); border-radius: 16px; overflow: hidden; }
  .section-title { font-size: 18px; font-weight: 700; margin: 16px 16px 10px; }

  /* ── TODAY ── */
  .today-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 4px; }
  .today-date { font-size: 15px; color: var(--muted); font-weight: 500; }
  /* Personal greeting (Bancolombia-style) replaces the wordmark on the home
     screen and doubles as a shortcut into Perfil. */
  .today-greeting-wrap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .today-greeting-row { display: flex; align-items: center; gap: 2px; }
  .today-greeting-text { font-size: 20px; font-weight: 800; color: var(--text); }
  .today-greeting-chevron { color: var(--muted); margin-top: 1px; }
  /* A thin rule instead of a nested card — how related sections separate
     inside one merged card (nutrition, highlights) without re-boxing them. */
  .today-card-divider { height: 1px; margin: 0 16px; background: linear-gradient(90deg, transparent, rgba(var(--fg-rgb),.08) 20%, rgba(var(--fg-rgb),.08) 80%, transparent); }
  /* Highlights row: score / mission side by side, both always fully visible
     on one phone screen — flex:1 each so it works whether there's 1 or 2
     cards, no horizontal scroll needed. */
  .today-hero-track { display: flex; gap: 12px; padding: 0 16px 4px; }
  .today-hero-track > * { flex: 1 1 0; min-width: 0; }
  /* Nutrition card: ring + macros (collapsed) + water, one surface with
     internal sections — replaces what used to be 3 separate boxed cards. */
  .today-nutrition-card { margin: 8px 16px 0; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; }
  .calorie-row { padding: 18px; display: flex; align-items: center; gap: 16px; }
  .calorie-ring-wrap { position: relative; width: 90px; height: 90px; flex-shrink: 0; }
  .calorie-ring-wrap svg { transform: rotate(-90deg); }
  .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .ring-cal { font-size: 17px; font-weight: 800; line-height: 1; }
  .ring-label { font-size: 9px; color: var(--muted); margin-top: 2px; }
  /* Macros sit one tap deeper than the ring (progressive disclosure) so the
     ring stays the immediate focus instead of competing with 3 bars at once. */
  .macro-toggle-col { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .macro-toggle-label { font-size: 13px; color: var(--muted); }
  .macro-toggle-btn { display: flex; align-items: center; gap: 6px; background: var(--card2); border: none; color: var(--text); border-radius: 20px; padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
  .macro-chevron { transition: transform .2s ease; }
  .macro-chevron.open { transform: rotate(180deg); }
  .macro-panel { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 12px; }
  .macro-panel.hidden { display: none; }
  .macro-item label { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
  .macro-bar-bg { height: 5px; background: var(--border); border-radius: 3px; }
  .macro-bar { height: 5px; border-radius: 3px; transition: width .6s ease; }
  .water-section { padding: 18px; }
  /* Highlights carousel cards — score and journey (mission), swipeable side
     by side instead of stacked. */
  .today-score-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 18px 16px; text-align: center; cursor: pointer; display: flex; flex-direction: column; justify-content: center; }
  .today-score-label { font-size: 11px; font-weight: 800; color: rgba(var(--fg-rgb),.55); letter-spacing: .03em; margin-bottom: 6px; }
  .today-score-tip { font-size: 11px; color: rgba(var(--fg-rgb),.5); margin-top: 8px; line-height: 1.4; }
  .today-score-num { font-size: 44px; font-weight: 900; line-height: 1; }
  .today-score-num span { font-size: 14px; font-weight: 500; color: rgba(var(--fg-rgb),.3); }
  .today-journey-card { border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 16px; cursor: pointer; display: flex; flex-direction: column; }
  /* Cortisol's journey card: soft pink wash instead of a diet-color gradient
     (was blue/indigo), same label→big-number→tip pattern as the score card
     next to it, so both cards in the row read as one visual family. Other
     diets keep their own gradient (set inline via getDietGradient()) with
     white text, unaffected by this modifier. */
  .today-journey-card--cortisol { background: rgba(232,84,122,.12); border: 1px solid rgba(232,84,122,.22); text-align: center; justify-content: center; }
  .today-journey-card--cortisol .today-weekly-pill { background: rgba(232,84,122,.14); border-color: rgba(232,84,122,.24); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .today-journey-card--cortisol .today-weekly-pill-label { color: var(--pink); }
  .today-journey-card--cortisol .today-weekly-pill-title { color: var(--text); }
  /* Cortisol companion — reacts to today's score (tenso/alerta/relajandose/
     calmado). Same pink-wash family as the cortisol journey card above it. */
  .companion-card { margin: 0 16px 12px; background: rgba(232,84,122,.10); border: 1px solid rgba(232,84,122,.20); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 14px 18px; display: flex; align-items: center; gap: 14px; cursor: pointer; }
  .companion-img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; animation: companion-breathe 3.6s ease-in-out infinite; transition: opacity .26s ease; }
  .companion-img.companion-fade-out { opacity: 0; }
  .companion-msg { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.4; flex: 1; }
  .companion-msg strong { color: var(--pink); }
  .companion-seeds-badge { flex-shrink: 0; background: rgba(255,255,255,.5); border: 1px solid rgba(232,84,122,.25); border-radius: 20px; padding: 5px 10px; font-size: 12px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 3px; cursor: pointer; }
  @keyframes companion-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.035) rotate(-1.2deg); } }
  @media (prefers-reduced-motion: reduce) { .companion-img { animation: none; } }

  /* ── COMPANION SHOP / COLLECTION MODAL ── */
  .companion-shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
  .companion-shop-item { background: var(--card2); border-radius: 14px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .companion-shop-thumb { width: 64px; height: 64px; object-fit: contain; }
  .companion-shop-name { font-size: 12px; font-weight: 700; color: var(--text); }
  .companion-shop-btn { width: 100%; padding: 8px 6px; border-radius: 10px; border: none; background: var(--pink); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 3px; }
  .companion-shop-btn.is-active { background: rgba(var(--fg-rgb),.08); color: var(--muted); }
  .companion-shop-btn.is-disabled, .companion-shop-btn:disabled:not(.is-active) { background: rgba(var(--fg-rgb),.08); color: rgba(var(--fg-rgb),.35); cursor: not-allowed; }
  .companion-name-row { border-top: 1px solid var(--border); padding-top: 16px; }

  /* ── HEADER SEEDS BADGE (fixed next to the streak pill) + bubble-collect animation ── */
  #header-seeds-badge { transition: transform .15s ease; }
  #header-seeds-badge.seed-badge-bump { animation: seed-badge-pop .4s ease; }
  @keyframes seed-badge-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.22); } }
  .seed-bubble { position: fixed; transform: translate(-50%,0); opacity: 1; background: var(--pink); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 12px; z-index: 600; pointer-events: none; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .55s ease; white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) { #header-seeds-badge.seed-badge-bump { animation: none; } .seed-bubble { transition: opacity .2s ease; } }
  /* Weekly feature pill — glued to the bottom of the journey card, glass
     background so it reads as an "important message" over the gradient
     instead of a fourth stacked card. */
  .today-weekly-pill { margin-top: 12px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .today-weekly-pill-text { display: flex; flex-direction: column; min-width: 0; }
  .today-weekly-pill-label { font-size: 10px; font-weight: 800; color: #e9d8ff; }
  .today-weekly-pill-title { font-size: 11px; color: rgba(255,255,255,.85); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* AI tip floats directly on the background — no card, no border — so it
     doesn't compete with the real data cards around it. */
  .ai-card { margin: 12px 16px; padding: 0; display: flex; gap: 10px; align-items: flex-start; }
  .ai-card .spark { color: var(--pink); font-size: 16px; flex-shrink: 0; margin-top: 1px; }
  .ai-card p { font-size: 13px; color: var(--muted); line-height: 1.5; }
  .ai-card p strong { color: var(--text); }
  .focus-card { margin: 8px 16px; background: var(--card); border-radius: var(--radius); padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .focus-card .left label { font-size: 10px; font-weight: 700; color: var(--pink); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px; display: block; }
  .focus-card .left h3 { font-size: 18px; font-weight: 800; }
  .focus-card .left p { font-size: 12px; color: var(--muted); margin-top: 4px; }
  .focus-card .cta { background: #fff; color: #000; border: none; border-radius: 24px; padding: 10px 14px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
  .focus-card .food-img { width: 80px; height: 80px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
  .meal-list { margin: 0 16px; display: flex; flex-direction: column; gap: 2px; }
  .meal-row { background: var(--card); border-radius: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .meal-row:not(:last-child) { margin-bottom: 2px; }
  .meal-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
  .meal-info { flex: 1; }
  .meal-info h4 { font-size: 15px; font-weight: 600; }
  .meal-info span { font-size: 13px; color: var(--muted); }
  .meal-add { width: 32px; height: 32px; border-radius: 50%; background: var(--pink); border: none; color: #fff; font-size: 20px; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(232,84,122,.35); transition: transform .15s; }
  .meal-add:active { transform: scale(.9); }
  .meal-scan { width: 32px; height: 32px; border-radius: 50%; background: var(--card2); border: 1px solid var(--border); color: var(--text); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s; flex-shrink: 0; }
  .meal-scan:active { transform: scale(.9); }
  .food-carousel-wrap { padding: 0 16px; }
  .food-carousel { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
  .food-carousel::-webkit-scrollbar { display: none; }
  .food-carousel-card { flex-shrink: 0; width: 130px; background: var(--card); border-radius: 20px; overflow: hidden; cursor: pointer; }
  .food-carousel-card img { width: 100%; height: 80px; object-fit: cover; }
  .food-carousel-card .fc-label { padding: 8px 10px; font-size: 12px; font-weight: 600; }
  .food-carousel-card .fc-sub { padding: 0 10px 8px; font-size: 10px; color: var(--muted); }
  .weight-row { margin: 12px 16px; background: var(--card); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; padding: 14px; }
  .weight-row .w-left { display: flex; align-items: center; gap: 10px; }
  .weight-row .w-icon { font-size: 18px; }
  .weight-row .w-val { font-size: 16px; font-weight: 700; }
  .weight-row .w-ago { font-size: 13px; color: var(--muted); }
  .update-btn { background: var(--pink); color: #fff; border: none; border-radius: 20px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }

  /* ── LEARN ── */
  .learn-card { margin: 0 16px 14px; background: var(--card); border-radius: 16px; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; }
  .learn-card img { width: 100%; height: 200px; object-fit: cover; }
  .learn-card-body { padding: 14px; }
  .learn-card-body h3 { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
  .learn-card-body p { font-size: 13px; color: var(--muted); line-height: 1.5; }
  .learn-card-body .read-more { color: var(--pink); font-weight: 600; font-size: 12px; }
  .learn-meta { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--border); }
  .listen-btn { display: flex; align-items: center; gap: 6px; background: var(--card2); border: none; color: var(--text); border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .heart-count { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); margin-left: auto; cursor: pointer; }
  .bookmark-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; }

  /* Topic filter pills — browse the whole 56-article library by interest,
     not just the 4 articles tied to the user's own diet. */
  .learn-topic-pills { display: flex; gap: 8px; padding: 4px 16px 14px; overflow-x: auto; }
  .learn-topic-pills::-webkit-scrollbar { display: none; }
  .learn-topic-pills .tab-pill { flex-shrink: 0; background: var(--card2); }
  .learn-topic-pills .tab-pill.active { background: var(--pink); }

  /* Featured hero article — visual hierarchy instead of a uniform grid */
  .today-learn-hero { margin: 0 16px 18px; border-radius: 20px; overflow: hidden; cursor: pointer; background: var(--card); }
  .learn-hero-img-wrap { position: relative; height: 200px; }
  .learn-hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .learn-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.55)); }
  .learn-hero-emoji { position: absolute; bottom: 12px; left: 16px; font-size: 40px; }
  .learn-hero-body { padding: 16px; }
  .learn-hero-body h2 { font-size: 21px; font-weight: 900; margin: 8px 0 6px; line-height: 1.25; }
  .learn-hero-meta { font-size: 13px; color: var(--muted); font-weight: 600; }
  .topic-chip { display: inline-block; background: rgba(232,84,122,.15); color: var(--pink); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
  .topic-chip-sm { display: inline-block; background: rgba(var(--fg-rgb),.06); color: var(--muted); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; margin-bottom: 6px; }
  .learn-diet-chip { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.55); border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
  .learn-save-chip { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.55); border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: .55; cursor: pointer; transition: opacity .15s, background .15s; }
  .learn-save-chip.saved { opacity: 1; background: var(--pink); }

  /* Article detail */
  .article-view { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--bg); z-index: 200; overflow-y: auto; }
  .article-view::-webkit-scrollbar { display: none; }
  .article-img { width: 100%; height: 240px; object-fit: cover; }
  .article-content { padding: 20px 16px 60px; }
  .article-content h1 { font-size: 24px; font-weight: 900; margin-bottom: 16px; line-height: 1.25; }
  .article-content p { font-size: 15px; line-height: 1.7; color: var(--muted); margin-bottom: 16px; }
  .article-content strong { color: var(--text); font-weight: 700; }
  .article-content h2 { font-size: 18px; font-weight: 800; color: var(--text); margin: 20px 0 8px; }
  .article-back { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.6); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); }
  .article-listen { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 201; background: var(--pink); color: #fff; border: none; border-radius: 30px; padding: 14px 32px; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 20px rgba(232,84,122,.4); }
  .article-heart { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; margin: 16px 0 80px; }

  /* ── SCAN ── */
  .scan-wrap { padding: 16px; }
  .scan-title { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 16px; }
  .viewfinder { position: relative; background: radial-gradient(ellipse at 50% 38%, #241a26 0%, #150f18 55%, #0d0a0f 100%); border-radius: 20px; aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .viewfinder .corners { position: absolute; inset: 20px; }
  .viewfinder .corner { position: absolute; width: 28px; height: 28px; border-color: var(--pink-light); border-style: solid; border-width: 0; filter: drop-shadow(0 0 6px rgba(232,84,122,.5)); }
  .corner.tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-radius: 6px 0 0 0; }
  .corner.tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-radius: 0 6px 0 0; }
  .corner.bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-radius: 0 0 0 6px; }
  .corner.br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 6px 0; }
  .scan-hint-icon { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, rgba(232,84,122,.22), rgba(232,84,122,0) 72%); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; animation: scanGlow 2.6s ease-in-out infinite; }
  .scan-hint-icon svg { width: 34px; height: 34px; color: var(--pink-light); }
  @keyframes scanGlow { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .scan-hint-icon { animation: none; } }
  .viewfinder .scan-hint { color: rgba(255,255,255,.85); font-size: 15px; text-align: center; padding: 0 20px; }
  .scan-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 20px 0; }
  .scan-gallery { width: 48px; height: 48px; background: var(--card); border: none; border-radius: 12px; color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; }
  .scan-capture { width: 68px; height: 68px; background: #fff; border: 4px solid var(--card2); border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 3px #444; transition: transform .1s; }
  .scan-capture:active { transform: scale(.92); }
  .scan-search { width: 48px; height: 48px; background: var(--card); border: none; border-radius: 12px; color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; }
  .scan-tabs { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
  .scan-tab { padding: 9px 24px; border-radius: 24px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .scan-tab.active { background: var(--pink); color: #fff; }
  .scan-tab:not(.active) { background: var(--card); color: var(--muted); }
  .scan-or { text-align: center; color: var(--muted); margin: 20px 0 12px; font-size: 14px; }
  .search-food-bar { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 12px 16px; margin: 0 0 16px; }
  .search-food-bar input { flex: 1; background: none; border: none; color: var(--text); font-size: 15px; outline: none; }
  .search-food-bar input::placeholder { color: var(--muted2); }

  /* ── MEALS ── */
  .meals-tab-row { display: flex; padding: 4px 16px 12px; gap: 8px; overflow-x: auto; }
  .meals-tab-row::-webkit-scrollbar { display: none; }
  .food-list-card { margin: 0 16px 12px; background: var(--card); border-radius: 20px; overflow: hidden; cursor: pointer; display: flex; align-items: center; -webkit-tap-highlight-color: transparent; }
  .food-list-card img { width: 90px; height: 90px; object-fit: cover; flex-shrink: 0; }
  .food-list-card .flc-info { padding: 14px; flex: 1; }
  .food-list-card .flc-info h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
  .food-list-card .flc-info p { font-size: 13px; color: var(--muted); line-height: 1.4; }
  .recipe-card { margin: 0 16px 14px; background: var(--card); border-radius: 20px; overflow: hidden; cursor: pointer; }
  .recipe-card img { width: 100%; height: 180px; object-fit: cover; }
  .recipe-card-body { padding: 14px; }
  .recipe-card-body h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
  .recipe-card-body .recipe-meta { display: flex; gap: 12px; font-size: 13px; color: var(--muted); margin-top: 6px; }
  .recipe-card-body .recipe-meta span { display: flex; align-items: center; gap: 4px; }
  .shopping-item { margin: 0 16px; padding: 14px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
  .shopping-item input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--pink); cursor: pointer; flex-shrink: 0; }
  .shopping-item label { font-size: 15px; cursor: pointer; flex: 1; }
  .shopping-item label.checked { text-decoration: line-through; color: var(--muted); }
  .shopping-cat { margin: 16px 16px 4px; font-size: 12px; font-weight: 700; color: var(--pink); text-transform: uppercase; letter-spacing: .5px; }

  /* ── MY PLAN ── */
  .plan-hero { margin: 16px 16px 0; background: linear-gradient(135deg, #1a0a14, #1a0a2a, #0a1a1a); border-radius: 20px; padding: 20px; border: 1px solid rgba(232,84,122,.2); }
  .plan-hero-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
  .plan-hero-title { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.2; }
  .plan-hero-sub { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 3px; }
  .plan-phase-badge { background: rgba(232,84,122,.15); border: 1px solid rgba(232,84,122,.3); border-radius: 20px; padding: 4px 10px; font-size: 11px; font-weight: 700; color: var(--pink); white-space: nowrap; }
  .plan-progress-bar-wrap { margin: 10px 0 6px; }
  .plan-progress-label { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 6px; }
  .plan-progress-bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
  .plan-progress-fill { height: 100%; background: linear-gradient(90deg, var(--pink), #7B4FE0); border-radius: 3px; transition: width .5s ease; }
  /* 84-day path (cortisol only) — 3 segments (one per phase), 4 milestone
     dots, and the companion standing at today's position. Built on the same
     white-track / pink-purple-fill language as .plan-progress-bar above,
     since it lives on the same dark diet-gradient hero card. */
  .plan-path-wrap { position: relative; margin: 34px 0 4px; }
  .plan-path-track { display: flex; gap: 4px; height: 10px; }
  .plan-path-segment { flex: 1; background: rgba(255,255,255,.08); border-radius: 5px; overflow: hidden; }
  .plan-path-segment-fill { height: 100%; background: linear-gradient(90deg, var(--pink), #7B4FE0); border-radius: 5px; transition: width .6s ease; }
  .plan-path-markers { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; }
  .plan-path-milestone { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); border: 2px solid rgba(255,255,255,.5); box-sizing: border-box; }
  .plan-path-milestone.reached { background: #fff; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(232,84,122,.25); }
  .plan-path-today { position: absolute; bottom: 8px; transform: translateX(-50%); z-index: 2; }
  .plan-path-companion-img { width: 38px; height: 38px; object-fit: contain; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); animation: companion-breathe 3.6s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .plan-path-companion-img { animation: none; } }
  .plan-week-cal { display: flex; gap: 6px; margin-top: 14px; }
  .plan-day-dot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .plan-day-dot span { font-size: 10px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .3px; }
  .plan-day-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: all .2s; }
  .plan-day-circle.done { background: var(--pink); color: #fff; box-shadow: 0 2px 8px rgba(232,84,122,.4); }
  .plan-day-circle.today { background: transparent; border: 2px solid var(--pink); color: var(--pink); }
  .plan-day-circle.future { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.25); }
  .plan-streak-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
  .plan-streak-badge { background: linear-gradient(135deg, #ff6b35, #f7931e); border-radius: 12px; padding: 4px 10px; font-size: 12px; font-weight: 800; color: #fff; }
  .plan-streak-text { font-size: 13px; color: rgba(255,255,255,.6); }
  .plan-today-card { margin: 12px 16px 0; background: var(--card); border-radius: 18px; overflow: hidden; border: 1px solid var(--border); }
  .plan-today-header { padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
  .plan-today-title { font-size: 14px; font-weight: 700; color: var(--text); }
  .plan-today-date { font-size: 13px; color: var(--muted); }
  .plan-meal-row { padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(var(--fg-rgb),.06); }
  .plan-meal-row:last-child { border-bottom: none; }
  .plan-meal-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
  .plan-meal-info { flex: 1; }
  .plan-meal-type { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
  .plan-meal-name { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 2px; line-height: 1.3; }
  .plan-meal-cal { font-size: 13px; color: var(--muted); margin-top: 1px; }
  .plan-meal-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(var(--fg-rgb),.18); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; }
  .plan-meal-check.checked { background: var(--pink); border-color: var(--pink); }
  .plan-water-row { padding: 12px 16px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
  .plan-water-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
  .plan-water-dots { display: flex; gap: 4px; }
  .plan-water-dot { width: 22px; height: 22px; border-radius: 50%; background: rgba(100,180,255,.12); border: 1px solid rgba(100,180,255,.2); display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; transition: all .2s; }
  .plan-water-dot.filled { background: #4a9eff; border-color: #4a9eff; }
  .plan-tip-card { margin: 12px 16px 0; background: linear-gradient(135deg, #0a1a2a, #0a1a0a); border-radius: 16px; padding: 14px 16px; border: 1px solid rgba(100,180,255,.15); }
  .plan-tip-label { font-size: 10px; font-weight: 700; color: #4a9eff; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 6px; }
  .plan-tip-text { font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.5; }
  .plan-macros-card { margin: 12px 16px 0; background: var(--card); border-radius: 16px; padding: 14px 16px; border: 1px solid var(--border); }
  .plan-macros-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
  .plan-macros-row { display: flex; gap: 8px; }
  .plan-macro-item { flex: 1; text-align: center; }
  .plan-macro-val { font-size: 18px; font-weight: 800; color: var(--text); }
  .plan-macro-name { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .plan-macro-bar { height: 3px; border-radius: 2px; margin-top: 6px; }
  .plan-start-card { margin: 24px 16px; text-align: center; }
  .plan-start-emoji { font-size: 64px; margin-bottom: 16px; }
  .plan-start-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
  .plan-start-desc { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 24px; }
  .plan-start-btn { background: linear-gradient(135deg, var(--pink), #7B4FE0); border: none; border-radius: 16px; padding: 16px 32px; font-size: 16px; font-weight: 800; color: #fff; cursor: pointer; width: 100%; box-shadow: 0 4px 20px rgba(232,84,122,.4); }
  .plan-phase-card { margin: 12px 16px 0; border-radius: 16px; padding: 14px 16px; border: 1px solid rgba(232,84,122,.15); }
  .plan-phase-title { font-size: 13px; font-weight: 700; color: var(--pink); margin-bottom: 4px; }
  .plan-phase-desc { font-size: 13px; color: rgba(var(--fg-rgb),.72); line-height: 1.5; }
  @keyframes planCheckPop { 0%{transform:scale(0.6)} 60%{transform:scale(1.25)} 100%{transform:scale(1)} }
  .plan-check-animate { animation: planCheckPop .3s ease; }

  /* ── PROFILE ── */
  .profile-header { padding: 28px 16px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: linear-gradient(180deg, rgba(232,84,122,.07) 0%, transparent 100%); }
  .profile-avatar { width: 82px; height: 82px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), #7B4FE0); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; color: #fff; box-shadow: 0 0 0 3px rgba(232,84,122,.25), 0 0 24px rgba(232,84,122,.2); overflow: hidden; }
  .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .profile-avatar-wrap { position: relative; width: 82px; height: 82px; cursor: pointer; }
  .profile-avatar-edit { position: absolute; bottom: -2px; right: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--card2); border: 2px solid var(--bg); display: flex; align-items: center; justify-content: center; font-size: 12px; }
  .profile-name { font-size: 21px; font-weight: 800; letter-spacing: -.3px; cursor: pointer; }
  .profile-sub { font-size: 12px; color: var(--pink); font-weight: 700; letter-spacing: .3px; background: rgba(232,84,122,.1); padding: 4px 12px; border-radius: 20px; }
  .settings-section { margin: 0 16px 8px; }
  .settings-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 16px 0 6px; }
  .settings-row { background: var(--card); border-radius: 14px; display: flex; align-items: center; padding: 13px 14px; cursor: pointer; margin-bottom: 2px; -webkit-tap-highlight-color: transparent; transition: background .15s; }
  .settings-row:active { background: var(--card2); }
  .settings-row .s-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 13px; flex-shrink: 0; }
  .settings-row .s-text { flex: 1; font-size: 15px; font-weight: 500; }
  .settings-row .s-val { font-size: 13px; color: var(--muted); margin-right: 6px; max-width: 130px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-row .s-arrow { color: var(--muted2); font-size: 18px; font-weight: 300; }
  .profile-goal-card { margin: 8px 16px; background: linear-gradient(145deg, #fdf8ee, #f7e9cd); border-radius: 20px; padding: 0; overflow: hidden; border: 1px solid rgba(196,148,92,.3); box-shadow: var(--shadow-soft); }
  .profile-goal-card-header { padding: 18px 18px 14px; border-bottom: 1px solid rgba(150,110,60,.14); display: flex; align-items: center; gap: 12px; }
  .profile-goal-card-header .pgc-emoji { font-size: 36px; }
  .profile-goal-card-header .pgc-title { font-size: 17px; font-weight: 800; color: #4a3826; }
  .profile-goal-card-header .pgc-sub { font-size: 13px; color: #8a7259; margin-top: 2px; }
  .profile-goal-card-body { padding: 14px 18px 18px; }
  .goal-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; }
  .goal-item:last-child { margin-bottom: 0; }
  .goal-item span:first-child { color: #8a7259; }
  .goal-item span:last-child { font-weight: 700; color: #4a3826; }
  .goal-item-bar { height: 3px; background: rgba(150,110,60,.14); border-radius: 2px; margin: -6px 0 8px; }
  .goal-item-bar-fill { height: 100%; border-radius: 2px; background: var(--pink); }

  /* ── ADD FOOD MODAL ── */
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 300; display: flex; align-items: flex-end; justify-content: center; }
  .modal-sheet { background: var(--glass-bg); color: var(--text); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--glass-border); box-shadow: 0 -8px 40px rgba(30,26,18,.18); border-radius: 24px 24px 0 0; width: 100%; max-width: 430px; padding: 20px 16px 40px; max-height: 85vh; overflow-y: auto; }
  .modal-sheet::-webkit-scrollbar { display: none; }
  .modal-handle { width: 40px; height: 4px; background: var(--muted2); border-radius: 2px; margin: 0 auto 20px; }
  .modal-title { font-size: 18px; font-weight: 800; margin-bottom: 16px; }
  .quick-add-row { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 4px; }
  .quick-add-row::-webkit-scrollbar { display: none; }
  .quick-food-btn { flex-shrink: 0; background: var(--card2); border: none; color: var(--text); border-radius: 20px; padding: 8px 16px; font-size: 13px; cursor: pointer; }
  .quick-food-btn:active { background: var(--border); }
  .food-result { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; gap: 12px; }
  .food-result .fr-emoji { font-size: 24px; }
  .food-result .fr-info { flex: 1; }
  .food-result .fr-info h4 { font-size: 15px; font-weight: 600; }
  .fr-fit-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--fg-rgb),.25); margin-right: 6px; vertical-align: middle; }
  .fr-fit-dot.good { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,.6); }
  .food-result .fr-info span { font-size: 13px; color: var(--muted); }
  .food-result .fr-cal { font-size: 14px; font-weight: 700; color: var(--pink); }

  /* Multi-select checkboxes */
  .food-sel-row { transition: background .15s; border-radius: 12px; padding: 10px 8px; border-bottom: none; }
  .food-sel-row + .food-sel-row { border-top: 1px solid var(--border); border-radius: 0; }
  .food-sel-row.selected { background: rgba(232,84,122,.10); }
  .fr-checkbox { width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(var(--fg-rgb),.3); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .15s; }
  .fr-checkbox.checked { background: var(--pink); border-color: var(--pink); }
  .fr-checkbox.checked::after { content: '✓'; color: #fff; font-size: 13px; font-weight: 800; }
  .food-result .fr-add { width: 28px; height: 28px; border-radius: 50%; background: var(--pink); border: none; color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

  /* ── TOAST ── */
  .toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-80px); background: var(--card2); color: var(--text); padding: 12px 24px; border-radius: 24px; font-size: 14px; font-weight: 600; z-index: 500; transition: transform .3s ease; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
  .toast.show { transform: translateX(-50%) translateY(0); }

  /* ── VeliVa LOGO ── */
  .veliva-logo { font-size: 22px; font-weight: 900; letter-spacing: -1px; background: linear-gradient(90deg, var(--pink), #c44); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

  /* Animations */
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
  .loading-pulse { animation: pulse 1.5s infinite; }
  @keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
  .slide-up { animation: slideUp .3s ease; }

  /* ── WATER TRACKER ── (.water-section wraps this now, see TODAY block) */
  .water-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .water-title { display: flex; align-items: center; gap: 10px; }
  .water-label { font-size: 14px; font-weight: 700; }
  .water-sub { font-size: 13px; color: var(--muted); margin-top: 1px; }
  .water-add-btn { background: rgba(41,182,246,0.15); color: #29b6f6; border: 1px solid rgba(41,182,246,0.3); border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
  .water-add-btn:active { background: rgba(41,182,246,0.25); }
  .water-bar-bg { height: 6px; background: var(--border); border-radius: 3px; margin-bottom: 10px; }
  .water-bar { height: 6px; background: linear-gradient(90deg,#0288d1,#29b6f6); border-radius: 3px; transition: width .4s ease; }
  .water-glasses { display: flex; gap: 4px; flex-wrap: wrap; }
  .water-glass { width: 22px; height: 22px; display: inline-block; object-fit: contain; transition: filter .2s; }
  .water-glass.empty { filter: grayscale(1) opacity(0.25); }

  /* ── ACTIVITY CARD ── */
  .activity-card { margin: 8px 16px; background: var(--card); border-radius: 16px; padding: 14px 16px; }
  .activity-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .activity-label { font-size: 14px; font-weight: 700; }
  .activity-burned { font-size: 12px; color: var(--orange); font-weight: 600; margin-top: 2px; }
  .activity-log-btn { background: rgba(244,166,35,0.12); color: var(--orange); border: 1px solid rgba(244,166,35,0.3); border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
  .activity-log-btn:active { background: rgba(244,166,35,0.22); }
  .activity-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 6px 0; }
  .activity-calm-counter { display: none; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.22); border-radius: 12px; font-size: 12px; font-weight: 700; color: #a78bfa; }
  .activity-calm-counter.show { display: flex; }
  .activity-type-badge { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 10px; margin-left: 6px; }
  .activity-type-badge.calm { background: rgba(139,92,246,.15); color: #a78bfa; }
  .activity-type-badge.intense { background: rgba(244,166,35,.15); color: var(--orange); }
  .activity-logged-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
  .activity-logged-item:last-child { border-bottom: none; }
  .activity-logged-left { display: flex; align-items: center; gap: 8px; }
  .activity-kcal { color: var(--orange); font-weight: 700; font-size: 13px; }

  /* ── DIET MODAL ── */
  .diet-option { display: flex; align-items: center; padding: 14px; border-radius: 14px; cursor: pointer; margin-bottom: 4px; -webkit-tap-highlight-color: transparent; transition: background .15s; }
  .diet-option:active { background: var(--card2); }
  .diet-option.selected { background: #2a0d18; }
  .diet-option .d-emoji { font-size: 24px; margin-right: 14px; flex-shrink: 0; }
  .diet-option .d-info { flex: 1; }
  .diet-option .d-name { font-size: 15px; font-weight: 600; }
  .diet-option .d-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
  .diet-option .d-check { color: var(--pink); font-size: 20px; font-weight: 700; }

  /* ── RECIPE DETAIL ── */
  .recipe-view { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--bg); z-index: 200; overflow-y: auto; }
  .recipe-view::-webkit-scrollbar { display: none; }
  .recipe-hero { width: 100%; height: 220px; position: relative; }
  .recipe-back { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.6); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); }
  .recipe-content { padding: 20px 16px 100px; }
  .recipe-content h1 { font-size: 22px; font-weight: 900; margin-bottom: 12px; }
  .recipe-stats-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .recipe-stat { background: var(--card); border-radius: 10px; padding: 10px 12px; flex: 1; text-align: center; }
  .recipe-stat .rs-val { font-size: 13px; font-weight: 800; }
  .recipe-stat .rs-label { font-size: 10px; color: var(--muted); margin-top: 2px; }
  .recipe-macro-row { display: flex; gap: 8px; margin-bottom: 16px; }
  .recipe-macro { flex: 1; background: var(--card2); border-radius: 10px; padding: 10px; text-align: center; }
  .recipe-macro .rm-val { font-size: 16px; font-weight: 800; }
  .recipe-macro .rm-label { font-size: 10px; color: var(--muted); margin-top: 2px; }
  .recipe-section { font-size: 16px; font-weight: 800; margin: 20px 0 10px; }
  .ingredient-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text); }
  .ingredient-row:last-child { border-bottom: none; }
  .step-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .step-row:last-child { border-bottom: none; }
  .step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
  .step-text { font-size: 14px; color: var(--text); line-height: 1.5; flex: 1; }
  .recipe-log-btn { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 201; background: var(--pink); color: #fff; border: none; border-radius: 30px; padding: 16px 48px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 24px rgba(232,84,122,.45); white-space: nowrap; }

  /* ── ACTIVITY LOG MODAL ── */
  .activity-opt { display: flex; align-items: center; padding: 14px; border-radius: 14px; cursor: pointer; margin-bottom: 4px; background: var(--card); -webkit-tap-highlight-color: transparent; }
  .activity-opt:active { background: var(--card2); }
  .activity-opt .ao-emoji { font-size: 22px; margin-right: 12px; }
  .activity-opt .ao-info { flex: 1; }
  .activity-opt .ao-name { font-size: 15px; font-weight: 600; }
  .activity-opt .ao-cal { font-size: 12px; color: var(--orange); margin-top: 2px; }
  .activity-opt .ao-add { background: var(--pink); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

  /* hide by default */
  .hidden { display: none !important; }

  /* ── PAYWALL SCREEN ── */
  #paywall-screen {
    position: fixed; inset: 0; z-index: 997;
    background: #000; color: #fff; overflow-y: auto; overflow-x: hidden;
  }
  #paywall-screen.hidden { display: none !important; }
  .pw-timer-bar {
    position: sticky; top: 0; background: #ffe8ed; color: #c0003c;
    font-size: 13px; font-weight: 700; text-align: center; padding: 10px;
    z-index: 10; display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .pw-body { padding: 0 20px 60px; max-width: 430px; margin: 0 auto; }
  .pw-winback-banner { background: linear-gradient(135deg, rgba(232,84,122,.22), rgba(139,92,246,.16)); border: 1px solid rgba(232,84,122,.4); border-radius: 20px; padding: 20px; margin: 16px 0; text-align: center; }
  .pw-winback-emoji { font-size: 30px; margin-bottom: 8px; }
  .pw-winback-title { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 4px; }
  .pw-winback-sub { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.5; margin-bottom: 10px; }
  .pw-winback-cta { font-size: 12px; font-weight: 700; color: var(--pink-light); text-transform: uppercase; letter-spacing: .4px; }
  .pw-before-after {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    background: #111; border-radius: 20px; overflow: hidden; margin: 20px 0;
  }
  .pw-ba-col { padding: 16px; text-align: center; background: #111; }
  .pw-ba-col.after { background: #0d1a0d; }
  .pw-ba-label { font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
  .pw-ba-label.after { color: #4CAF50; }
  .pw-ba-emoji { font-size: 52px; margin-bottom: 12px; }
  .pw-ba-stat { font-size: 12px; color: #888; margin-bottom: 4px; }
  .pw-ba-val { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
  .pw-ba-bar { height: 5px; border-radius: 10px; background: #222; margin-bottom: 6px; overflow: hidden; }
  .pw-ba-bar-fill { height: 100%; border-radius: 10px; }
  .pw-personal-card {
    background: linear-gradient(135deg, #e8547a, #9b33cc);
    border-radius: 20px; padding: 20px; margin-bottom: 20px;
  }
  .pw-personal-email { font-size: 13px; opacity: .8; text-align: center; background: rgba(255,255,255,.15); border-radius: 20px; padding: 6px 14px; display: inline-block; margin-bottom: 14px; }
  .pw-personal-title { font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 14px; line-height: 1.3; }
  .pw-personal-bullets { display: flex; flex-direction: column; gap: 8px; }
  .pw-personal-bullet { display: flex; align-items: center; gap: 10px; font-size: 14px; }
  .pw-personal-bullet::before { content: "✓"; background: rgba(255,255,255,.25); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
  .pw-headline { font-size: 22px; font-weight: 800; text-align: center; margin: 24px 0 20px; }
  .pw-plans { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
  .pw-plan {
    border: 2px solid #222; border-radius: 16px; padding: 16px 18px;
    display: flex; align-items: center; gap: 14px; cursor: pointer;
    transition: border-color .2s; position: relative; background: #111;
  }
  .pw-plan.selected { border-color: var(--pink); }
  .pw-plan-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #444; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
  .pw-plan.selected .pw-plan-radio { border-color: var(--pink); background: var(--pink); }
  .pw-plan.selected .pw-plan-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
  .pw-plan-info { flex: 1; }
  .pw-plan-name { font-size: 16px; font-weight: 700; }
  .pw-plan-orig { font-size: 13px; color: #555; text-decoration: line-through; }
  .pw-plan-price-wrap { text-align: right; }
  .pw-plan-price { font-size: 22px; font-weight: 900; color: #fff; }
  .pw-plan-per-day { font-size: 12px; color: #888; }
  .pw-popular-badge { position: absolute; top: -10px; left: 16px; background: var(--pink); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .5px; }
  .pw-cta-btn {
    width: 100%; padding: 18px; border-radius: 50px; border: none;
    background: linear-gradient(135deg, #e8547a, #c44aff);
    color: #fff; font-size: 18px; font-weight: 800; cursor: pointer;
    margin-bottom: 16px; transition: opacity .2s;
  }
  .pw-cta-btn:active { opacity: .85; }
  .pw-press { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 20px 0; opacity: .5; }
  .pw-press span { font-size: 13px; font-weight: 800; color: #fff; font-family: serif; }
  .pw-guarantee { background: #111; border: 1px solid #222; border-radius: 16px; padding: 18px; display: flex; gap: 14px; align-items: center; margin: 20px 0; }
  .pw-guarantee-icon { font-size: 36px; flex-shrink: 0; }
  .pw-guarantee-text h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
  .pw-guarantee-text p { font-size: 13px; color: #888; }
  .pw-reviews { margin: 20px 0; }
  .pw-review { background: #111; border-radius: 16px; padding: 16px; margin-bottom: 12px; }
  .pw-review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .pw-review-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #e8547a, #c44aff); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
  .pw-review-name { font-size: 14px; font-weight: 700; }
  .pw-review-country { font-size: 12px; color: #888; }
  .pw-review-stars { color: #f4a623; font-size: 13px; }
  .pw-review-text { font-size: 14px; color: var(--muted); line-height: 1.5; }
  .pw-legal { font-size: 11px; color: #555; text-align: center; margin-top: 16px; line-height: 1.6; }
  .pw-legal a { color: #888; }

  /* ══════════════════════════════════════════════
     DESKTOP LAYOUT — min-width: 768px
     Sidebar nav + pantalla completa
     ══════════════════════════════════════════════ */
  @media (min-width: 768px) {

    html, body { background: #050505; overflow: hidden; }

    /* App pasa a fila: sidebar izquierdo + contenido */
    #app { max-width: none; flex-direction: row; box-shadow: none; }

    /* ── SIDEBAR NAV ── */
    nav {
      order: -1;
      position: relative;
      bottom: auto; left: auto; transform: none;
      width: 220px; max-width: 220px; height: 100%;
      flex-direction: column;
      justify-content: flex-start; align-items: stretch;
      padding: 36px 12px 28px;
      border-top: none; border-right: 1px solid var(--border);
      flex-shrink: 0; gap: 2px;
      background: var(--card);
    }

    /* Logo en sidebar */
    .sidebar-logo {
      display: flex; align-items: center; gap: 6px;
      font-size: 22px; font-weight: 900; letter-spacing: -0.5px;
      color: #e8547a;
      margin-bottom: 28px; padding: 0 14px; flex-shrink: 0;
    }
    .sidebar-logo span { color: #7B4FE0; }
    .sidebar-logo svg { width: 20px; height: 20px; flex: 0 0 auto; }

    nav button {
      flex-direction: row; justify-content: flex-start; align-items: center;
      padding: 11px 14px; font-size: 14px; font-weight: 600;
      border-radius: 10px; gap: 12px; width: 100%;
    }
    nav button.active { background: rgba(232,84,122,0.12); }
    nav button:hover:not(.active) { background: rgba(var(--fg-rgb),0.05); }
    nav button svg { width: 20px; height: 20px; flex-shrink: 0; }

    /* ── ÁREA DE CONTENIDO ── */
    .screen { flex: 1; padding-bottom: 40px; }
    .status-bar { display: none; }

    /* Ocultar logo duplicado (sidebar ya lo tiene) */
    .veliva-logo { display: none; }

    .today-header { padding: 28px 32px 8px; }
    .page-header  { padding: 28px 28px 12px; }

    /* ── PANTALLA TODAY: GRID 2 COLUMNAS ── */
    #screen-today {
      display: grid;
      /* Fractional split instead of a fixed px column — a fixed right column
         doesn't shrink and can overflow/clip content on narrower desktop
         windows (just above the 768px breakpoint). */
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
      gap: 12px 20px;
      padding: 0 32px;
      align-items: start;
    }

    /* Fila completa: cabecera */
    #screen-today > *:nth-child(1) {
      grid-column: 1 / -1;
      padding-left: 0; padding-right: 0; margin: 0;
    }

    /* Fila completa: compañero de cortisol (banner, cortisol plan only) */
    #screen-today > *:nth-child(2) {
      grid-column: 1 / -1; margin: 0; padding: 0;
    }

    /* Fila completa: mission card (plan integration banner) */
    #screen-today > *:nth-child(3) {
      grid-column: 1 / -1; margin: 0; padding: 0;
    }

    /* Filas explícitas de aquí en adelante: la tarjeta de nutrición (col1)
       ahora es más alta que antes (incluye el agua), así que necesita un
       grid-row propio en vez de auto-flow — si no, el auto-placement no
       sabe cuánto ocupa y el contenido de abajo se monta encima. */

    /* Col izquierda: tarjeta de nutrición — abarca las filas 3 y 4, donde
       en la col. derecha están AI (sin caja) + progreso del día */
    #screen-today > *:nth-child(4) {
      grid-column: 1; grid-row: 3 / 5; margin: 0;
    }

    /* Col derecha: AI (sin caja) + progreso del día */
    #screen-today > *:nth-child(5)  { grid-column: 2; grid-row: 3; margin: 0; }
    #screen-today > *:nth-child(6)  { grid-column: 2; grid-row: 4; margin: 0; }

    /* Col izquierda: título y lista de comidas (debajo de la fila 4) */
    #screen-today > *:nth-child(7)  { grid-column: 1; grid-row: 5; margin: 4px 0 0; }
    #screen-today > *:nth-child(8)  { grid-column: 1; grid-row: 6; margin: 0; }

    /* Fila completa: alimentos recomendados + carrusel */
    #screen-today > *:nth-child(9)  { grid-column: 1 / -1; grid-row: 7; margin: 4px 0 0; }
    #screen-today > *:nth-child(10) { grid-column: 1 / -1; grid-row: 8; padding: 0; }

    /* Col izquierda: peso y actividad */
    #screen-today > *:nth-child(11) { grid-column: 1; grid-row: 9; margin: 0; }
    #screen-today > *:nth-child(12) { grid-column: 1; grid-row: 10; margin: 0; }
    #screen-today > *:nth-child(13) { display: none; }

    /* ── PANTALLA LEARN: GRID 2 COLUMNAS ── */
    #learn-foryou-content,
    #learn-saved-content:not(.hidden):has(.learn-card) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 16px;
      padding: 0 16px;
    }
    #learn-foryou-content .learn-card,
    #learn-saved-content .learn-card { margin: 0 0 16px; }
    #learn-foryou-content .learn-topic-pills,
    #learn-foryou-content .today-learn-hero { grid-column: 1 / -1; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

    /* ── PANTALLA COMIDAS: RECETAS EN GRID 2 COLUMNAS ── */
    #meals-recipes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 16px;
      padding: 0 16px;
    }
    #meals-recipes .recipe-card { margin: 0 0 16px; }

    /* ── OVERLAYS: fondo a pantalla completa (cubre el sidebar), solo el contenido se centra a 430px ── */
    #paywall-screen { overflow-y: auto; }
    .login-buttons, .login-email-form { max-width: 430px; margin: 0 auto; }
    .pw-timer-bar { max-width: 430px; margin: 0 auto; }
    #onboarding-screen [id^="ob-step"] { max-width: 430px; margin: 0 auto; width: 100%; }

    /* Modales y vistas de detalle más anchas */
    .article-view { max-width: 700px; }
    .recipe-view  { max-width: 700px; }
    .modal-sheet  { max-width: 540px; }

    /* Otras pantallas: ancho máximo cómodo */
    #screen-scan, #screen-profile, #screen-meals { max-width: 860px; }

    /* Nav pasó a sidebar izquierdo — el botón SOS ya no necesita despejar la nav inferior */
    .sos-btn { bottom: 24px; }

    /* ── PANTALLA ESCANEAR: el visor cuadrado no debe estirarse a 860px ── */
    #screen-scan .scan-wrap { max-width: 480px; margin: 0 auto; padding: 16px 0; }
  }

  /* ── Confetti animation ── */
  @keyframes confettiFall {
    0%   { transform: translateY(0)    rotate(0deg)   scale(1); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg) scale(0.6); opacity: 0; }
  }

  /* ── Pulse for milestone emoji ── */
  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.12); }
  }

  /* ── Range input base styles ── */
  input[type=range] {
    -webkit-appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(var(--fg-rgb),.14);
    outline: none;
    cursor: pointer;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 2px 8px rgba(30,26,18,.3);
    cursor: pointer;
  }