* { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
    /* color was never set here before this page went dark — with no
       Tailwind preflight color reset either, unstyled text (e.g. the blurred
       meal-plan preview) would default to black-on-black. */
    body { background: #0D0F12; color: #FFFFFF; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

    .font-mono { font-family: 'JetBrains Mono', monospace; }

    /* .tech-badge / .text-gradient are shared via base.css (still emerald
       there, for any page not yet converted) — this page's dark variant
       lives here instead, same approach the other converted pages use. */
    .tech-badge { color: #C5F578; background: rgba(197, 245, 120, 0.12); }
    .text-gradient {
      background: linear-gradient(135deg, #A3E635 0%, #C5F578 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    /* .loading-spinner is also shared via base.css (still emerald there) — a
       loading state, not a done/success one, so lime here rather than green. */
    .loading-spinner {
      border: 3px solid rgba(197,245,120,0.15); border-top: 3px solid #C5F578;
    }

    /* Same ambient-glow technique as the landing/pricing pages — kept
       emerald (not lime), matching this site's "lime = brand/CTA, emerald =
       ambient background glow" convention. */
    .page-glow {
      position: absolute; width: 600px; height: 600px; border-radius: 50%;
      -webkit-mask-image: radial-gradient(circle closest-side, #000 25%, transparent 100%);
      mask-image: radial-gradient(circle closest-side, #000 25%, transparent 100%);
      pointer-events: none; z-index: 0;
    }

    /* ===== PHONE PERFORMANCE =====
       Same cost as the landing page and dashboard had: two 600x600
       .page-glow layers at blur(100px) above the fold, plus every glass
       card and modal on this page running backdrop-filter. Each
       backdrop-filter forces its own compositing layer and re-blurs
       everything behind it on every frame, which saturates a phone's
       compositor, drops frames and queues taps behind them — the "have to
       tap twice" symptom (upload zone, menu button), not slow JS. It also
       shows up as a dead gap in the load waterfall where nothing is
       downloading or painting, which reads as a slow page.

       The glow keeps its soft edge via a radial mask instead of a blurred
       texture. backdrop-filter is off below the breakpoint since the
       surfaces under it (bento/glass cards, modals) are already
       near-opaque, so the frosting was barely visible while still forcing
       a layer and a readback of everything behind it. !important beats
       every per-component declaration in this file without having to list
       them all, which would rot the moment a new one is added. */
    @media (max-width: 1023px) {
      .page-glow {
        filter: none !important;
        -webkit-mask-image: radial-gradient(circle closest-side, #000 25%, transparent 100%);
        mask-image: radial-gradient(circle closest-side, #000 25%, transparent 100%);
      }
      *, *::before, *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
    }

    /* Navbar */
    .navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 12px 16px;
    }
    /* Named properties instead of `all`, and the border and radius exist in
       both states (transparent when classic). A border going from none to
       1px cannot animate, so it snapped in and made the bar jump by 2px
       while its padding was still easing — that, plus every other property
       riding the same `all` transition, is what made the shrink judder. */
    .navbar .nav-inner {
      transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease,
                  border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .navbar.classic .nav-inner {
      background: transparent; backdrop-filter: none; border: 1px solid transparent;
      box-shadow: 0 4px 24px rgba(0,0,0,0); border-radius: 100px; padding: 0;
    }
    /* Dark glass — this page's nav text/logo are white now, and .floating
       triggers at just 50px of scroll, so a light pill would flash in over
       dark content almost immediately and go low-contrast. */
    .navbar.floating .nav-inner {
      background: rgba(10,14,12,0.75); backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 24px rgba(0,0,0,0.25);
      border-radius: 100px; padding: 8px 24px;
    }

    .lang-switch {
      display: flex; align-items: center; gap: 2px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 100px; padding: 3px; flex-shrink: 0;
    }
    .lang-switch-btn {
      background: none; border: none; cursor: pointer;
      padding: 6px 12px; border-radius: 100px;
      font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
      /* Raised from 0.5, which measured under 4.5:1 here. The selected
         option reads from its filled pill, not from dimming the other. */
      color: rgba(255,255,255,0.8); transition: background 0.2s ease, color 0.2s ease;
    }
    .lang-switch-btn:hover { color: #fff; }
    .lang-switch-btn.active { background: #C5F578; color: #0D0F12; }
    .mobile-nav-panel .lang-switch { width: 100%; }
    .mobile-nav-panel .lang-switch-btn { flex: 1; text-align: center; }

    /* ===== MOBILE NAV DRAWER ===== */
    .mobile-nav-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; border-radius: 12px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      color: #fff; cursor: pointer; flex-shrink: 0;
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .mobile-nav-toggle:hover { background: rgba(255,255,255,0.1); border-color: rgba(197,245,120,0.4); }

    .mobile-nav-overlay {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
      opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    }
    .mobile-nav-overlay.active { opacity: 1; pointer-events: all; }

    .mobile-nav-panel {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: min(320px, 85vw); background: #0D0F12;
      border-left: 1px solid rgba(255,255,255,0.1);
      padding: 20px 24px 32px; overflow-y: auto;
      transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    }
    .mobile-nav-overlay.active .mobile-nav-panel { transform: translateX(0); }

    .mobile-nav-link {
      display: block; padding: 14px 4px; font-size: 16px; font-weight: 500;
      color: rgba(255,255,255,0.75); border-bottom: 1px solid rgba(255,255,255,0.08);
      text-decoration: none; transition: color 0.2s ease;
    }
    .mobile-nav-link:hover { color: #fff; }

    /* Buttons — Primary Accent (lime, dark text) / Secondary Glass */
    .btn-primary {
      background: #C5F578; color: #0D0F12; border: none; padding: 14px 28px;
      border-radius: 100px; font-weight: 700; font-size: 14px; cursor: pointer;
      transition: all 0.3s ease; box-shadow: 0 4px 14px rgba(197,245,120,0.25);
      display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    }
    .btn-primary:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(197,245,120,0.35); }
    /* must stay after :hover — equal specificity, so order decides */
    .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

    .btn-secondary {
      background: rgba(255,255,255,0.05); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.2);
      padding: 14px 28px; border-radius: 100px; font-weight: 600; font-size: 15px; cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.32); }

    .btn-glass:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.32); }

    /* Form Elements */
    .form-input, .form-select {
      width: 100%; padding: 14px 18px; border: 1.5px solid rgba(255,255,255,0.12);
      border-radius: 14px; font-size: 15px; color: #FFFFFF; background: rgba(255,255,255,0.05);
      transition: all 0.2s ease; outline: none;
    }
    .form-input::placeholder { color: #6B7280; }
    .form-input:focus, .form-select:focus {
      border-color: #C5F578; background: rgba(255,255,255,0.08);
      box-shadow: 0 0 0 3px rgba(197,245,120,0.12);
    }
    .form-select {
      appearance: none; -webkit-appearance: none;
      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 1.5L6 6.5L11 1.5' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 18px center; padding-right: 48px;
    }
    .form-select option { background: #12151A; color: #FFFFFF; }
    .form-label {
      display: block; font-size: 13px; font-weight: 600;
      color: #9CA3AF; margin-bottom: 6px; letter-spacing: 0.01em;
    }

    /* Upload Zones */
    .upload-zone {
      border: 1.5px dashed rgba(255,255,255,0.18); border-radius: 16px; padding: 32px 24px;
      text-align: center; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease;
      background: rgba(255,255,255,0.04); min-height: 200px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    /* A photo successfully attached is a done/success state, so it stays
       emerald — same convention as the dashboard's own upload zone. */
    .upload-zone.has-image { border-style: solid; border-color: rgb(16,185,129); padding: 0; }
    .upload-zone.has-image .upload-placeholder { display: none; }

    /* The file input itself covers the whole zone, invisible, so the tap
       lands on the native control and the picker opens on the first touch.
       Opening it from a click handler on the surrounding div via
       input.click() is not reliable in mobile Safari. */
    .upload-input {
      position: absolute; inset: 0; width: 100%; height: 100%;
      opacity: 0; cursor: pointer; z-index: 2;
    }
    .upload-zone:has(.upload-input:focus-visible) { outline: 2px solid #C5F578; outline-offset: 3px; }

    /* base.css still carries the old light-theme hover (#F0FDF8, near white).
       On a phone a tap applies :hover and it sticks, so the zone flashed white
       and swallowed its own light text — it looked like the tap did nothing.
       Neutralised here, with a dark hover only where there is a real pointer. */
    .upload-zone:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
    @media (hover: hover) {
      .upload-zone:hover { border-color: rgba(197,245,120,0.5); background: rgba(197,245,120,0.06); }
    }
    .upload-zone.has-image:hover { border-color: rgb(16,185,129); }

    /* Bento Cards — dark glass, per every other card on the site now. */
  .bento-card {
  background: rgba(255,255,255,0.05); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 24px;
  padding: 24px; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: visible;
}

.bento-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

   /* The hero card was already its own dark card before this page converted
      — now lime-tinted instead of emerald, to match every other "key metric"
      highlight card elsewhere in the app (e.g. the dashboard's calorie ring). */
   .bento-card.highlight {
  background: linear-gradient(145deg, #12150F 0%, #171C10 50%, #12150F 100%);
  border: 1px solid rgba(197,245,120,0.25); color: white;
}
.bento-card.highlight:hover {
  border-color: rgba(197,245,120,0.5);
  box-shadow: 0 16px 48px rgba(197,245,120,0.18);
  transform: translateY(-2px);
}

    /* Radial Progress */
    .radial-progress { transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
    .progress-bar { transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
    
    /* Badges & Pills */
    .stat-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
    
    /* Timeline */
    .timeline-widget::before {
      content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px;
      width: 2px; background: rgba(255,255,255,0.12); border-radius: 1px;
    }

    /* Blurred Preview */
    .blurred-preview {
      filter: blur(6px); pointer-events: none; user-select: none;
      opacity: 0.5; transition: all 0.3s ease;
    }
    .lock-overlay {
      position: absolute; inset: 0; display: flex;
      align-items: center; justify-content: center; z-index: 2;
      background: rgba(13,15,18,0.55); backdrop-filter: blur(2px);
      border-radius: 24px;
    }

    /* Progress Steps — active/completed are the same "where am I" indicator
       (completed is just active at reduced opacity, by original design), so
       both stay one colour rather than active=lime/completed=emerald. */
    .progress-steps { display: flex; gap: 8px; margin-bottom: 40px; }
    .progress-step {
      flex: 1; height: 4px; background: rgba(255,255,255,0.12);
      border-radius: 100px; transition: background 0.3s ease;
    }
    .progress-step.active { background: #C5F578; }
    .progress-step.completed { background: #C5F578; opacity: 0.5; }

    /* Step Content */
    .step-container { display: none; }
    .step-container.active { display: block; animation: fadeIn 0.4s ease-out; }

    /* Glass Card */
    .glass-card {
      background: rgba(255,255,255,0.05); backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s ease;
    }

    /* Info Icon Tooltip System */
    .info-icon-wrap { position: absolute; top: 20px; right: 20px; z-index: 10; }
    .info-icon {
      position: relative;
      width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; color: #9CA3AF;
      cursor: pointer; transition: all 0.2s ease;
      font-style: italic; font-family: 'Georgia', serif;
    }
    /* Visual circle stays 22px; the tappable area is widened to ~40px via an
       invisible pseudo-element so it clears the mobile touch-target minimum
       without changing how the icon looks. */
    .info-icon::before { content: ''; position: absolute; inset: -9px; }
    .info-icon:hover { background: #C5F578; color: #0D0F12; }
    .info-tooltip {
      position: absolute; top: 32px; right: 0; width: 230px;
      background: #0F172A; color: white; padding: 12px 14px; border-radius: 10px;
      font-size: 11px; line-height: 1.5; opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease; z-index: 20; text-align: left;
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }
    .info-tooltip::before {
      content: ''; position: absolute; top: -6px; right: 8px;
      width: 0; height: 0; border-left: 6px solid transparent;
      border-right: 6px solid transparent; border-bottom: 6px solid #0F172A;
    }
    .info-icon-wrap:hover .info-tooltip { opacity: 1; }

    /* Dark card info icon — the tooltip itself stays an inverted white
       popup on purpose (contrast against the dark highlight card), same as
       before; only the lime/emerald accent on the icon itself changes. */
    .bento-card.highlight .info-icon { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
    .bento-card.highlight .info-icon:hover { background: #C5F578; color: #0D0F12; }
    .bento-card.highlight .info-tooltip { background: white; color: #0F172A; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
    .bento-card.highlight .info-tooltip::before { border-bottom-color: white; }
    
    /* Sub-card info icons */
    .mini-card-info { position: absolute; top: 8px; right: 8px; z-index: 5; }
    .info-icon-mini {
      position: relative;
      width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.15);
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.5);
      cursor: pointer; transition: all 0.2s ease;
      font-style: italic; font-family: 'Georgia', serif;
    }
    .info-icon-mini::before { content: ''; position: absolute; inset: -12px; }
    .info-icon-mini:hover { background: #C5F578; color: #0D0F12; }
    .info-tooltip-mini {
      position: absolute; top: 22px; right: 0; width: 200px;
      background: white; color: #0F172A; padding: 10px 12px; border-radius: 8px;
      font-size: 10px; line-height: 1.4; opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease; z-index: 20; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }
    .info-tooltip-mini::before {
      content: ''; position: absolute; top: -5px; right: 6px;
      width: 0; height: 0; border-left: 5px solid transparent;
      border-right: 5px solid transparent; border-bottom: 5px solid white;
    }
    .mini-card-info:hover .info-tooltip-mini { opacity: 1; }

    /* Interactive Roadmap */
    .roadmap-phase { cursor: pointer; transition: all 0.3s; border: 1px solid transparent; }
    .roadmap-phase:hover { border-color: #C5F578; box-shadow: 0 4px 16px rgba(197,245,120,0.12); }
    .phase-detail { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; opacity: 0; }
    .phase-detail.open { max-height: 200px; opacity: 1; }

    /* Exercise Popup */
    .exercise-popup {
      position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.3s;
    }
    .exercise-popup.active { opacity: 1; pointer-events: all; }

    /* Pro Upsell Banner — a brand/upgrade highlight, so lime. */
    .pro-upsell {
      background: linear-gradient(135deg, #12150F 0%, #171C10 100%);
      border: 1px solid rgba(197,245,120,0.3); border-radius: 20px;
      padding: 24px 28px; transition: all 0.3s ease;
    }
    .pro-upsell:hover { border-color: rgba(197,245,120,0.6); box-shadow: 0 8px 32px rgba(197,245,120,0.15); }

    /* Animations */
    .fade-in { animation: fadeIn 0.5s ease-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .stagger-1 { animation-delay: 0.1s; }
    .stagger-2 { animation-delay: 0.2s; }
    .stagger-3 { animation-delay: 0.3s; }

    /* Loading — white border on lime here isn't a contrast bug: this spinner
       only ever appears inside .btn-primary, replacing its (dark) label
       text, so it needs to read against the lime fill, not a dark page. */
    .loading-spinner-small {
      border: 2.5px solid rgba(13,15,18,0.3); border-top: 2.5px solid #0D0F12;
      border-radius: 50%; width: 18px; height: 18px; animation: spin 0.7s linear infinite;
      display: inline-block;
    }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    @media print {
      @page { margin: 12mm; }
      body { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #0D0F12 !important; }
      nav, header, #mobileNavDrawer, #stickyBar, #pastAnalysisBanner, #premiumTeasers, #proUpsellContainer,
      .results-actions, .info-icon-wrap, .bg-glow, .ambient-glow { display: none !important; }
      .bento-card { break-inside: avoid; box-shadow: none !important; backdrop-filter: none !important; }
      .fade-in { opacity: 1 !important; transform: none !important; animation: none !important; }
      .phase-detail { max-height: none !important; opacity: 1 !important; }
    }

    /* Sticky Bottom Bar */
    .sticky-bottom-bar {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
      background: rgba(10,14,12,0.85); backdrop-filter: blur(20px);
      border-top: 1px solid rgba(255,255,255,0.1); padding: 16px 24px;
      display: flex; align-items: center; justify-content: center; gap: 16px;
      box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
    }
    /* The checkmark row is already hidden below `sm`, but the CTA itself
       (icon + "Unlock Full Plan (Pro)" + icon, ~64px of horizontal padding
       alone) still runs wider than the ~270-327px left inside the bar on a
       320-375px phone — shrunk down here so it fits with room to spare. */
    @media (max-width: 480px) {
      .sticky-bottom-bar { padding: 12px 16px; }
      .sticky-bottom-bar .btn-primary {
        padding: 12px 20px !important; font-size: 14px !important;
        width: 100%; justify-content: center;
      }
    }

        /* ===== AUTH MODAL ===== */

    .auth-modal {
      background: #12151A; border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 40px 32px;
      max-width: 420px; width: 100%; position: relative;
      box-shadow: 0 24px 80px rgba(0,0,0,0.5);
      animation: slideUpAuth 0.3s ease-out;
    }
    @keyframes slideUpAuth { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    /* .auth-tab.active is shared via base.css (still emerald there) — lime
       override for this page only. */
    .auth-tab.active { color: #C5F578; border-bottom-color: #C5F578; }
    .auth-tab {
      flex: 1; text-align: center; padding: 13px 0; font-weight: 600;
      font-size: 14px; cursor: pointer; transition: all 0.2s ease;
      border-bottom: 2px solid transparent; color: #9CA3AF;
      background: transparent; border-top: none; border-left: none; border-right: none;
    }