*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --lime: #c8f542;
    --lime-dim: #9fcc2e;
    --bg: #0e0f11;
    --bg2: #13151a;
    --card: #1e2128;
    --card2: #252830;
    --border: #2a2d35;
    --border2: #363a46;
    --text: #f0f2f5;
    --muted: #7a8099;
    --red: #ff5757;
    --blue: #57a9ff;
    --orange: #ff9a42;
  }

  /* ── LIGHT MODE ── */
  body.light {
    --bg: #f0f2f5;
    --bg2: #e4e7ed;
    --card: #ffffff;
    --card2: #f7f8fa;
    --border: #d8dce6;
    --border2: #c4c9d8;
    --text: #0e0f11;
    --muted: #5a6280;
  }

  /* Inputs */
  body.light input, body.light select, body.light textarea {
    background: #ffffff; border-color: var(--border); color: var(--text);
  }
  input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
  body.light input::placeholder, body.light textarea::placeholder { color: #a0a8c0; opacity: 1; }

  /* Chips */
  body.light .chip { color: #5a6280; background: #eceef4; }
  body.light .chip.active { background: rgba(200,245,66,0.18); color: #3a6600; border-color: #7ab800; }

  /* Mode buttons */
  body.light .mode-btn { background: #f0f2f5; border-color: var(--border); color: var(--text); }
  body.light .mode-btn.active { background: rgba(200,245,66,0.15); border-color: #7ab800; }
  body.light .mode-desc { color: #5a6280; }

  /* Goal cards */
  body.light .goal-card { background: #f7f8fa; border-color: var(--border); }
  body.light .goal-desc { color: #5a6280; }

  /* Survey nav */
  body.light #survey-nav-btns { background: var(--bg); border-top-color: var(--border); }
  body.light #survey-prev-btn { background: #f0f2f5; border-color: var(--border); }
  body.light #survey-back-btn { background: #f0f2f5; border-color: var(--border); }

  /* Plan header */
  body.light .plan-header { background: rgba(240,242,245,0.96); border-bottom-color: var(--border); }

  /* Day tabs */
  body.light .day-tabs-wrap { background: var(--card); border-bottom-color: var(--border); }
  body.light .day-tab-btn { color: #5a6280; border-color: var(--border); }
  body.light .day-tab-btn.active { background: var(--lime); color: #0e0f11; border-color: var(--lime); }

  /* Macro pills */
  body.light .pill { background: var(--bg2); border-color: var(--border); }

  /* Day stats */
  body.light .day-stats { background: var(--card); border-bottom-color: var(--border); }
  body.light .macro-bar-track { background: var(--border); }

  /* Meal cards */
  body.light .meal-card { background: var(--card); border-color: var(--border); }
  body.light .meal-time { color: #5a6280; }
  body.light .meal-ingredients { color: #5a6280; }

  /* Prep section */
  body.light .prep-section { background: var(--card); border-color: var(--border); }
  body.light .prep-step { background: var(--bg2); border-color: var(--border); }
  body.light .step-num { background: rgba(200,245,66,0.25); color: #3a6600; border-color: transparent; }

  /* Shopping haul */
  body.light .shop-category { background: var(--card); border-color: var(--border); }
  body.light .shop-cat-header { color: var(--text); border-bottom-color: var(--border); }
  body.light .shop-item { border-bottom-color: var(--border); }
  body.light .shop-item-qty { color: #5a6280; }
  body.light .shop-item.checked .shop-item-name { color: #a0a8c0; }

  /* Drawers */
  body.light #settings-drawer,
  body.light #history-drawer { background: var(--card); border-top-color: var(--border); }
  body.light .settings-sticky-header,
  body.light .history-sticky-header { background: var(--card); }
  body.light .drawer-header { border-bottom-color: var(--border); }
  body.light .drawer-close { background: var(--bg2); border-color: var(--border); color: #5a6280; }
  body.light .settings-action { background: var(--bg2); border-color: var(--border); }
  body.light .settings-action:hover { background: #eceef4; border-color: var(--border2); }
  body.light .action-title { color: var(--text); }
  body.light .action-desc { color: #5a6280; }
  body.light .profile-card { background: var(--bg2); border-color: var(--border); }
  body.light .profile-row { border-bottom-color: var(--border); }
  body.light .profile-row-val { color: var(--text); }

  /* History cards */
  body.light .history-card { background: var(--bg2); border-color: var(--border); }
  body.light .history-macro { background: var(--card); border-color: var(--border); }
  body.light .history-restore-btn { background: rgba(200,245,66,0.15); border-color: rgba(80,140,0,0.4); color: #3a6600; }
  body.light .history-delete-btn { background: rgba(255,87,87,0.06); border-color: rgba(255,87,87,0.2); }

  /* Bottom nav */
  body.light .bottom-nav { background: var(--card); border-top-color: var(--border); }

  /* Version footer */
  body.light .version-footer { color: #a0a8c0; }

  /* Overlays */
  body.light #settings-overlay,
  body.light #history-overlay { background: rgba(0,0,0,0.3); }

  /* Error panel */
  body.light #error-panel { background: var(--card); }

  /* Survey card */
  body.light .survey-card { background: var(--card); border-color: var(--border); }
  body.light .section-label { color: #5a6280; }
  body.light .field-group label { color: #5a6280; }
  body.light .access-key-wrap { background: var(--bg2); border-color: var(--border); }
  body.light .access-key-title { color: var(--text); }
  body.light .access-key-sub { color: #5a6280; }

  html {
    scroll-behavior: smooth;
    background: var(--bg);
  }

  body.light html { background: #f0f2f5; }

  body {
    font-family: 'Figtree', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    /* Body scrolls — this is the ONLY scroll container */
    -webkit-overflow-scrolling: touch;
  }

  /* ── NOISE OVERLAY ── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.5;
  }

  h1, h2, h3, h4 { font-family: 'Syne', sans-serif; font-weight: 800; }

  /* ── CHIPS ── */
  .chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .chip {
    background: var(--bg2);
    border: 1.5px solid var(--border);
    border-radius: 40px;
    color: var(--muted);
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }

  .chip:hover { border-color: var(--border2); color: var(--text); }

  .chip.active {
    background: rgba(200,245,66,0.1);
    border-color: var(--lime);
    color: var(--lime);
    font-weight: 600;
  }

  /* ── ACCESS KEY ── */
  .access-key-wrap {
    background: rgba(200,245,66,0.04);
    border: 1px dashed rgba(200,245,66,0.25);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 28px;
    text-align: center;
  }
  .access-key-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: var(--text);
    margin-bottom: 4px;
  }
  .access-key-sub {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
  }

  /* ══════════════════════════════════ SURVEY ══════════════════════════════════ */

  #survey-wrap {
    height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden; /* critical — flex children control their own scroll */
    padding-top: env(safe-area-inset-top);
  }

  /* ── Header — always at top, never scrolls ── */
  #survey-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    gap: 12px;
  }

  #survey-back-btn {
    width: 36px; height: 36px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg2);
    color: var(--text);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
  }
  #survey-back-btn:hover { border-color: var(--lime); color: var(--lime); }
  #survey-back-btn.visible { display: flex; }

  #survey-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.14em;
    color: var(--lime);
    flex: 1;
    justify-content: center;
  }

  #survey-step-counter {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: var(--text);
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
  }

  /* ── Progress bar ── */
  #survey-progress-track {
    height: 2px;
    background: var(--border);
    flex-shrink: 0;
  }
  #survey-progress-fill {
    height: 100%;
    background: var(--lime);
    width: 0%;
    transition: width 0.5s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 0 8px rgba(200,245,66,0.5);
  }

  /* ── Steps — scrollable middle section ── */
  #survey-steps-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .survey-step {
    display: none;
    flex-direction: column;
    padding: 32px 20px 24px;
    min-height: 100%;
    box-sizing: border-box;
  }
  .survey-step.active { display: flex; }

  /* Step animations */
  .survey-step.slide-in-right  { animation: s-in-r  0.38s cubic-bezier(.22,1,.36,1) both; }
  .survey-step.slide-in-left   { animation: s-in-l  0.38s cubic-bezier(.22,1,.36,1) both; }
  .survey-step.slide-out-left  { animation: s-out-l 0.28s cubic-bezier(.4,0,1,1)   both; }
  .survey-step.slide-out-right { animation: s-out-r 0.28s cubic-bezier(.4,0,1,1)   both; }

  @keyframes s-in-r  { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:none; } }
  @keyframes s-in-l  { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:none; } }
  @keyframes s-out-l { to { opacity:0; transform:translateX(-40px); } }
  @keyframes s-out-r { to { opacity:0; transform:translateX(40px); } }

  /* ── Step hero ── */
  .step-label {
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lime);
    margin-bottom: 10px;
  }

  .step-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 8vw, 44px);
    line-height: 1.05;
    margin-bottom: 12px;
  }
  .step-title span { color: var(--lime); }

  .step-sub {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.65;
    max-width: 380px;
    margin-bottom: 32px;
  }

  .step-fields { display: flex; flex-direction: column; }

  /* ── Inputs ── */
  .field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
  }

  label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .label-opt {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--border2);
    margin-left: 4px;
  }

  .code-input-wrap,
  .textarea-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg2);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .code-input-wrap:focus-within,
  .textarea-wrap:focus-within {
    border-color: var(--lime);
    box-shadow: 0 0 0 3px rgba(200,245,66,0.1);
  }
  .code-input-wrap svg, .textarea-wrap svg { color: var(--border2); flex-shrink: 0; }

  input[type="text"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    background: var(--bg2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: 'Figtree', sans-serif;
    font-size: 15px;
    padding: 14px 16px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    -webkit-appearance: none;
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--lime);
    box-shadow: 0 0 0 3px rgba(200,245,66,0.1);
  }
  .code-input-wrap input,
  .textarea-wrap input { background: none; border: none; padding: 0; box-shadow: none; }
  .code-input-wrap input:focus,
  .textarea-wrap input:focus { box-shadow: none; }

  select option { background: var(--card); color: var(--text); }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

  /* ── Pill group (for day count) ── */
  .icon-pill-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .icon-pill {
    flex: 1;
    min-width: 0;
    padding: 10px 4px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg2);
    color: var(--muted);
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    white-space: nowrap;
  }
  .icon-pill:hover { border-color: var(--border2); color: var(--text); }
  .icon-pill.active {
    border-color: var(--lime);
    background: rgba(200,245,66,0.1);
    color: var(--lime);
  }

  /* ── Icon card grid ── */
  .icon-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .icon-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

  .icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--bg2);
    color: var(--muted);
    cursor: pointer;
    transition: all 0.18s;
    font-family: 'Figtree', sans-serif;
    text-align: center;
  }
  .icon-card svg { transition: color 0.18s; }
  .icon-card span { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--text); }
  .icon-card small { font-size: 10px; color: var(--muted); line-height: 1.3; display: block; }
  .icon-card:hover { border-color: var(--border2); }
  .icon-card.active {
    border-color: var(--lime);
    background: rgba(200,245,66,0.08);
    color: var(--lime);
  }
  .icon-card.active svg { color: var(--lime); }
  .icon-card.active span { color: var(--lime); }

  /* ── Variety cards ── */
  .variety-cards { display: flex; flex-direction: column; gap: 10px; }

  .variety-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--bg2);
    cursor: pointer;
    transition: all 0.18s;
    font-family: 'Figtree', sans-serif;
    text-align: left;
    color: var(--muted);
  }
  .variety-card svg { flex-shrink: 0; color: var(--muted); transition: color 0.18s; }
  .variety-card div strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
  .variety-card div small { font-size: 12px; color: var(--muted); line-height: 1.4; }
  .variety-card:hover { border-color: var(--border2); }
  .variety-card.active {
    border-color: var(--lime);
    background: rgba(200,245,66,0.07);
  }
  .variety-card.active svg { color: var(--lime); }
  .variety-card.active div strong { color: var(--lime); }

  /* ── Mode toggle ── */
  .mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
  }
  .mode-btn {
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--bg2);
    color: var(--muted);
    cursor: pointer;
    padding: 16px 12px;
    text-align: center;
    transition: all 0.18s;
    font-family: 'Figtree', sans-serif;
  }
  .mode-btn .mode-icon { margin-bottom: 8px; color: var(--muted); transition: color 0.18s; }
  .mode-btn .mode-label { font-size: 13px; font-weight: 700; color: var(--text); display: block; margin-bottom: 2px; }
  .mode-btn .mode-desc { font-size: 11px; color: var(--muted); display: block; }
  .mode-btn.active { border-color: var(--lime); background: rgba(200,245,66,0.07); }
  .mode-btn.active .mode-icon { color: var(--lime); }

  /* ── Goal cards ── */
  .goal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
  .goal-card {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--bg2);
    cursor: pointer;
    padding: 12px;
    transition: all 0.18s;
    position: relative;
    overflow: hidden;
  }
  .goal-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: transparent;
    border-radius: 3px 0 0 3px;
    transition: background 0.18s;
  }
  .goal-card:hover { border-color: var(--border2); }
  .goal-card.active { border-color: var(--goal-color, var(--lime)); background: rgba(var(--goal-rgb,200,245,66), 0.06); }
  .goal-card.active::before { background: var(--goal-color, var(--lime)); }
  .goal-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .goal-icon-svg { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,0.05); flex-shrink: 0; color: var(--muted); }
  .goal-card.active .goal-icon-svg { color: var(--goal-color); background: rgba(var(--goal-rgb),0.12); }
  .goal-name { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 13px; color: var(--text); }
  .goal-offset { font-size: 11px; font-weight: 800; margin-left: auto; font-family: 'Syne', sans-serif; }
  .goal-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }

  /* ── Section label ── */
  .section-label {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }

  /* ── Macro preview ── */
  .macro-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 12px;
    margin-bottom: 20px;
  }
  .macro-preview-item { text-align: center; }
  .macro-preview-item .val { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 20px; color: var(--lime); }
  .macro-preview-item .unit { font-size: 10px; color: var(--muted); display: block; margin-top: 2px; }

  /* ── Bottom nav — always at bottom, never scrolls ── */
  #survey-nav-btns {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    padding: 14px 20px calc(env(safe-area-inset-bottom) + 14px);
    background: var(--bg);
    border-top: 1px solid var(--border);
  }

  #survey-prev-btn {
    width: 52px; height: 52px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--bg2);
    color: var(--text);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
  }
  #survey-prev-btn.visible { display: flex; }
  #survey-prev-btn:hover { border-color: var(--lime); color: var(--lime); }

  #survey-next-btn {
    flex: 1;
    height: 52px;
    background: var(--lime);
    color: #0e0f11;
    border: none;
    border-radius: 14px;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  #survey-next-btn:hover { background: #d8ff5a; box-shadow: 0 6px 24px rgba(200,245,66,0.3); }
  #survey-next-btn:active { transform: scale(0.98); }
  #survey-next-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

  /* ── Misc ── */
  .btn-primary {
    width: 100%; padding: 16px;
    background: var(--lime); color: #0e0f11;
    border: none; border-radius: 12px;
    font-family: 'Syne', sans-serif; font-weight: 800; font-size: 15px;
    cursor: pointer; transition: all 0.2s; text-transform: uppercase;
  }
  .btn-primary:hover { background: #d8ff5a; }
  .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
  .divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
  .version-footer { text-align: center; font-size: 10px; color: var(--muted); opacity: 0.4; padding: 12px; font-family: 'Syne', sans-serif; letter-spacing: 0.08em; }

  /* ══════════════ CINEMATIC LOADING SCREEN ══════════════ */
  #loading-overlay {
    position: fixed;
    inset: 0;
    background: #0e0f11;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: env(safe-area-inset-top) 40px env(safe-area-inset-bottom);
    overflow: hidden;
  }
  #loading-overlay.active { display: flex; }

  /* Pulse rings */
  .loader-bg-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(200,245,66,0.07);
    pointer-events: none;
    opacity: 0;
  }
  .loader-bg-ring-1 { width: 300px; height: 300px; }
  .loader-bg-ring-2 { width: 500px; height: 500px; border-color: rgba(200,245,66,0.04); }
  .loader-bg-ring-3 { width: 700px; height: 700px; border-color: rgba(200,245,66,0.02); }

  #loading-overlay.active .loader-bg-ring-1 { animation: loader-pulse 3s 0.2s ease-in-out infinite; }
  #loading-overlay.active .loader-bg-ring-2 { animation: loader-pulse 3s 0.8s ease-in-out infinite; }
  #loading-overlay.active .loader-bg-ring-3 { animation: loader-pulse 3s 1.4s ease-in-out infinite; }

  @keyframes loader-pulse {
    0%, 100% { transform: scale(0.92); opacity: 0; }
    50% { transform: scale(1); opacity: 1; }
  }

  /* Logo wrap */
  .loader-logo-wrap {
    position: relative;
    width: 100px; height: 100px;
    margin-bottom: 32px;
    opacity: 0;
  }
  #loading-overlay.active .loader-logo-wrap {
    animation: loader-logo-in 0.65s 0.05s cubic-bezier(.22,1,.36,1) forwards;
  }
  @keyframes loader-logo-in {
    from { transform: scale(0.3) rotate(-20deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg); opacity: 1; }
  }

  .loader-logo-bg {
    position: absolute;
    inset: 0;
    background: var(--lime);
    border-radius: 28px;
  }
  #loading-overlay.active .loader-logo-bg {
    animation: loader-glow 2s 0.7s ease-in-out infinite alternate;
  }
  @keyframes loader-glow {
    from { box-shadow: 0 0 0 rgba(200,245,66,0); }
    to   { box-shadow: 0 0 40px rgba(200,245,66,0.4), 0 0 80px rgba(200,245,66,0.15); }
  }

  .loader-bolt {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
  #loading-overlay.active .loader-bolt {
    animation: loader-bolt-breathe 2s 0.7s ease-in-out infinite;
  }
  @keyframes loader-bolt-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
  }

  /* Brand */
  .loader-brand {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--lime);
    margin-bottom: 20px;
    opacity: 0;
  }
  #loading-overlay.active .loader-brand {
    animation: loader-up 0.5s 0.45s cubic-bezier(.22,1,.36,1) forwards;
  }

  /* Headline */
  .loader-headline {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 28px;
    color: #f0f2f5;
    text-align: center;
    margin-bottom: 8px;
    line-height: 1.2;
    opacity: 0;
    transition: opacity 0.35s, transform 0.35s;
  }
  #loading-overlay.active .loader-headline {
    animation: loader-up 0.5s 0.55s cubic-bezier(.22,1,.36,1) forwards;
  }

  /* Subline */
  .loader-subline {
    font-size: 14px;
    color: var(--muted);
    text-align: center;
    margin-bottom: 36px;
    opacity: 0;
    transition: opacity 0.35s;
  }
  #loading-overlay.active .loader-subline {
    animation: loader-up 0.5s 0.65s cubic-bezier(.22,1,.36,1) forwards;
  }

  @keyframes loader-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Progress bar */
  .loader-progress-track {
    width: 200px;
    height: 3px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 40px;
    opacity: 0;
  }
  #loading-overlay.active .loader-progress-track {
    animation: loader-up 0.5s 0.75s cubic-bezier(.22,1,.36,1) forwards;
  }

  .loader-progress-fill {
    height: 100%;
    background: var(--lime);
    border-radius: 99px;
    width: 0%;
    transition: width 1.8s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 8px rgba(200,245,66,0.6);
  }

  /* Steps */
  .loader-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
  }
  #loading-overlay.active .loader-steps {
    animation: loader-up 0.5s 0.85s cubic-bezier(.22,1,.36,1) forwards;
  }

  .loader-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--border2);
    transition: color 0.4s, transform 0.4s;
  }
  .loader-step-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border2);
    flex-shrink: 0;
    transition: background 0.4s, box-shadow 0.4s, transform 0.4s;
  }
  .loader-step.active {
    color: #f0f2f5;
    transform: translateX(6px);
  }
  .loader-step.active .loader-step-dot {
    background: var(--lime);
    box-shadow: 0 0 8px rgba(200,245,66,0.8);
    transform: scale(1.4);
  }
  .loader-step.done { color: var(--muted); }
  .loader-step.done .loader-step-dot { background: var(--lime); opacity: 0.35; }

  /* ── ERROR ── */

  /* Pulse rings in background */
  .loader-bg-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(200,245,66,0.06);
    animation: loader-pulse 3s ease-in-out infinite;
    pointer-events: none;
  }
  .loader-bg-ring-1 { width: 300px; height: 300px; animation-delay: 0s; }
  .loader-bg-ring-2 { width: 500px; height: 500px; animation-delay: 0.6s; border-color: rgba(200,245,66,0.04); }
  .loader-bg-ring-3 { width: 700px; height: 700px; animation-delay: 1.2s; border-color: rgba(200,245,66,0.02); }

  @keyframes loader-pulse {
    0%, 100% { transform: scale(0.9); opacity: 0; }
    50% { transform: scale(1); opacity: 1; }
  }

  /* Logo */
  .loader-logo-wrap {
    position: relative;
    width: 100px; height: 100px;
    margin-bottom: 32px;
    animation: loader-logo-in 0.6s cubic-bezier(.22,1,.36,1) both;
  }

  @keyframes loader-logo-in {
    from { transform: scale(0.4) rotate(-15deg); opacity: 0; }
    to { transform: scale(1) rotate(0deg); opacity: 1; }
  }

  .loader-logo-bg {
    position: absolute;
    inset: 0;
    background: var(--lime);
    border-radius: 28px;
    animation: loader-logo-glow 2s ease-in-out infinite alternate;
  }

  @keyframes loader-logo-glow {
    from { box-shadow: 0 0 0px rgba(200,245,66,0); }
    to { box-shadow: 0 0 40px rgba(200,245,66,0.35), 0 0 80px rgba(200,245,66,0.15); }
  }

  .loader-bolt {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: loader-bolt-flash 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(14,15,17,0.6));
  }

  @keyframes loader-bolt-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }

  /* Brand name */
  .loader-brand {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--lime);
    margin-bottom: 20px;
    opacity: 0;
    animation: loader-fade-up 0.5s 0.4s cubic-bezier(.22,1,.36,1) forwards;
  }

  /* Headline */
  .loader-headline {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 28px;
    color: #f0f2f5;
    text-align: center;
    margin-bottom: 8px;
    opacity: 0;
    animation: loader-fade-up 0.5s 0.5s cubic-bezier(.22,1,.36,1) forwards;
    line-height: 1.2;
  }

  /* Subline */
  .loader-subline {
    font-size: 14px;
    color: var(--muted);
    text-align: center;
    margin-bottom: 36px;
    opacity: 0;
    animation: loader-fade-up 0.5s 0.6s cubic-bezier(.22,1,.36,1) forwards;
  }

  @keyframes loader-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Progress bar */
  .loader-progress-track {
    width: 200px;
    height: 3px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 40px;
    opacity: 0;
    animation: loader-fade-up 0.5s 0.7s cubic-bezier(.22,1,.36,1) forwards;
  }

  .loader-progress-fill {
    height: 100%;
    background: var(--lime);
    border-radius: 99px;
    width: 0%;
    transition: width 1.5s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 8px rgba(200,245,66,0.6);
  }

  /* Steps list */
  .loader-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    animation: loader-fade-up 0.5s 0.8s cubic-bezier(.22,1,.36,1) forwards;
  }

  .loader-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--border2);
    transition: color 0.4s, transform 0.4s;
  }

  .loader-step-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border2);
    flex-shrink: 0;
    transition: background 0.4s, box-shadow 0.4s, transform 0.4s;
  }

  .loader-step.active {
    color: #f0f2f5;
    transform: translateX(4px);
  }

  .loader-step.active .loader-step-dot {
    background: var(--lime);
    box-shadow: 0 0 8px rgba(200,245,66,0.7);
    transform: scale(1.3);
  }

  .loader-step.done {
    color: var(--muted);
  }

  .loader-step.done .loader-step-dot {
    background: var(--lime);
    opacity: 0.4;
  }

  /* ── ERROR ── */
  #error-panel {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: env(safe-area-inset-top) 40px calc(env(safe-area-inset-bottom) + 60px);
    text-align: center;
  }

  #error-panel.active { display: flex; }
  .error-icon { margin-bottom: 20px; display: flex; align-items: center; justify-content: center; }
  .error-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 28px; margin-bottom: 12px; text-align: center; width: 100%; }
  .error-msg { color: var(--muted); text-align: center; max-width: 320px; line-height: 1.7; margin-bottom: 32px; font-size: 15px; }

  .btn-outline {
    padding: 14px 32px;
    background: transparent;
    border: 1.5px solid var(--lime);
    color: var(--lime);
    border-radius: 10px;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
  }

  .btn-outline:hover { background: rgba(200,245,66,0.08); }

  /* ── PLAN UI ── */
  #plan-wrap {
    display: none;
    min-height: 100vh;
    background: var(--bg);
  }
  #plan-wrap.active { display: block; }

  .plan-header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding-top: calc(env(safe-area-inset-top) + 12px);
    padding-bottom: 12px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .plan-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .plan-title-area { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }

  .plan-logo {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--lime);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .plan-name {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Macro pills — hidden in header, macros shown per-day instead */
  .macro-pills { display: none !important; }
  .pill { display: none; }
  .pill-val.lime { color: var(--lime); }
  .pill-val.blue { color: var(--blue); }
  .pill-val.orange { color: var(--orange); }
  .pill-val.red { color: var(--red); }
  .pill-label { display: none; }

  .btn-reset {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 10px 18px;
    border-radius: 8px;
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-reset:hover { border-color: var(--red); color: var(--red); }

  /* ── SETTINGS BUTTON in header ── */
  .btn-settings {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    width: 40px; height: 40px;
    border-radius: 10px;
    font-size: 17px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .btn-settings:hover { border-color: var(--lime); color: var(--lime); }

  /* ── SETTINGS DRAWER ── */
  #settings-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 500;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(4px);
  }
  #settings-overlay.open { opacity: 1; pointer-events: all; }

  #settings-drawer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: 30vh;
    background: var(--card);
    border-top: 1px solid var(--border);
    border-radius: 24px 24px 0 0;
    z-index: 501;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(.22,1,.36,1), top 0.35s cubic-bezier(.22,1,.36,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #settings-drawer.open { transform: translateY(0); }
  #settings-drawer.expanded { top: env(safe-area-inset-top, 0px); }

  .settings-sticky-header {
    flex-shrink: 0;
    background: var(--card);
    border-radius: 24px 24px 0 0;
    cursor: grab;
    user-select: none;
    touch-action: none;
  }
  .settings-sticky-header:active { cursor: grabbing; }

  #settings-body-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 calc(env(safe-area-inset-bottom) + 80px);
  }

  .drawer-handle {
    width: 40px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 12px auto 8px;
  }

  .drawer-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
  }

  .drawer-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800; font-size: 20px;
  }

  .drawer-close {
    width: 32px; height: 32px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .drawer-close:hover { color: var(--text); border-color: var(--border2); }

  .drawer-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; }

  /* Profile summary card inside drawer */
  .profile-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 8px;
  }
  .profile-card-label {
    font-size: 11px; color: var(--lime);
    letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 700; margin-bottom: 10px;
  }
  .profile-card-rows { display: flex; flex-direction: column; gap: 8px; }
  .profile-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px;
  }
  .profile-row-label { color: var(--muted); }
  .profile-row-val { font-weight: 600; }

  /* Action rows */
  .settings-action {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex; align-items: center; gap: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Figtree', sans-serif;
    width: 100%; text-align: left;
  }
  .settings-action:hover { border-color: var(--border2); background: var(--card2); }
  .settings-action.danger:hover { border-color: rgba(255,87,87,0.4); background: rgba(255,87,87,0.05); }

  /* ── HISTORY DRAWER ── */
  #history-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 500;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(4px);
  }
  #history-overlay.open { opacity: 1; pointer-events: all; }

  #history-drawer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    /* Default: half screen. Expanded: full screen */
    top: 40vh;
    background: var(--card);
    border-top: 1px solid var(--border);
    border-radius: 24px 24px 0 0;
    z-index: 501;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(.22,1,.36,1), top 0.35s cubic-bezier(.22,1,.36,1);
    /* Flex column so header is sticky and body scrolls */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #history-drawer.open { transform: translateY(0); }
  #history-drawer.expanded { top: env(safe-area-inset-top, 0px); }

  /* Sticky handle + header — never scrolls */
  .history-sticky-header {
    flex-shrink: 0;
    background: var(--card);
    border-radius: 24px 24px 0 0;
    cursor: grab;
    user-select: none;
    touch-action: none;
  }

  .history-sticky-header:active { cursor: grabbing; }

  /* Scrollable body */
  #history-list-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 24px calc(env(safe-area-inset-bottom) + 80px);
  }

  /* ── HISTORY CARDS ── */
  .history-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
    position: relative;
    overflow: hidden;
  }

  .history-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--lime);
    border-radius: 3px 0 0 3px;
  }

  .history-card:hover { border-color: var(--lime); transform: translateY(-1px); }

  .history-card-active {
    border-color: rgba(200,245,66,0.35) !important;
    background: rgba(200,245,66,0.04);
  }
  .history-card-active::before { background: var(--lime); opacity: 1; }

  /* Survey back button */
  #survey-back-btn {
    transition: color 0.15s;
  }
  #survey-back-btn:hover { color: var(--text); }

  .history-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .history-card-date {
    font-size: 11px;
    color: var(--lime);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .history-card-label {
    font-size: 10px;
    color: var(--muted);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 10px;
  }

  .history-card-name {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .history-macros {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .history-macro {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--card);
    border: 1px solid var(--border);
  }

  .history-restore-btn {
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    background: rgba(200,245,66,0.08);
    border: 1px solid rgba(200,245,66,0.3);
    border-radius: 10px;
    color: var(--lime);
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
  }

  .history-restore-btn:hover { background: rgba(200,245,66,0.15); }

  .history-delete-btn {
    flex-shrink: 0;
    width: 42px;
    background: rgba(255,87,87,0.08);
    border: 1px solid rgba(255,87,87,0.2);
    border-radius: 10px;
    color: var(--red);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }
  .history-delete-btn:hover { background: rgba(255,87,87,0.18); border-color: rgba(255,87,87,0.5); }

  /* ── THEME TOGGLE ── */
  .theme-toggle-wrap { display: flex; align-items: center; }

  .theme-toggle {
    width: 48px;
    height: 28px;
    background: var(--border2);
    border: none;
    border-radius: 99px;
    position: relative;
    cursor: pointer;
    transition: background 0.25s;
    flex-shrink: 0;
  }

  .theme-toggle.light-on { background: var(--lime); }

  .theme-toggle-knob {
    position: absolute;
    top: 3px; left: 3px;
    width: 22px; height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    display: block;
  }

  .theme-toggle.light-on .theme-toggle-knob { transform: translateX(20px); }

  .action-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
  }
  .action-icon.lime { background: rgba(200,245,66,0.1); }
  .action-icon.blue { background: rgba(87,169,255,0.1); }
  .action-icon.red { background: rgba(255,87,87,0.1); }
  .action-icon.orange { background: rgba(255,154,66,0.1); }

  .action-text { flex: 1; }
  .action-title { font-size: 15px; font-weight: 600; color: var(--text); }
  .action-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .action-arrow { color: var(--muted); font-size: 14px; }

  /* ── PLAN BODY ── */
  .plan-body {
    max-width: 1100px;
    margin: 0 auto;
    /* Bottom padding = nav height (~64px) + safe area + breathing room */
    padding: 24px 24px calc(env(safe-area-inset-bottom) + 80px);
  }

  /* ── PREP STEPS ── */
  .prep-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
  }

  .prep-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lime), transparent);
  }

  .prep-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
  }

  .prep-badge {
    background: rgba(200,245,66,0.12);
    color: var(--lime);
    border-radius: 8px;
    padding: 8px 14px;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .prep-steps-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .prep-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  .step-num {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: rgba(200,245,66,0.1);
    border: 1px solid rgba(200,245,66,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 12px;
    color: var(--lime);
    margin-top: 2px;
  }

  .step-text { font-size: 14px; line-height: 1.7; color: var(--text); opacity: 0.85; }

  /* ── TABS ── */
  .tabs-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .tabs-nav::-webkit-scrollbar { display: none; }

  .tab-btn {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 10px;
    padding: 10px 18px;
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
  }

  .tab-btn:hover { border-color: var(--border2); color: var(--text); }

  .tab-btn.active {
    background: var(--lime);
    border-color: var(--lime);
    color: #0e0f11;
    font-weight: 700;
  }

  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  /* ── DAY PANEL ── */
  .day-macro-bar {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }

  .day-macro-bar .bar-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .bar-val {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 22px;
  }

  .bar-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

  .bar-progress-wrap {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .bar-track {
    height: 6px;
    background: var(--bg2);
    border-radius: 99px;
    overflow: hidden;
  }

  .bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.8s ease;
  }

  .meals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }

  .meal-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    transition: border-color 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
  }

  .meal-card:hover {
    border-color: var(--border2);
    transform: translateY(-2px);
  }

  .meal-card::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--border);
    border-radius: 3px 0 0 3px;
  }

  .meal-time {
    font-size: 11px;
    color: var(--lime);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .meal-name {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 12px;
  }

  .meal-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }

  .badge {
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
  }

  .badge-protein { background: rgba(87,169,255,0.12); color: var(--blue); }
  .badge-kcal { background: rgba(255,154,66,0.12); color: var(--orange); }

  .meal-ingredients {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
  }
  .meal-ingredients.expanded {
    display: block;
    overflow: visible;
  }
  .meal-ingr-toggle {
    display: none;
    font-size: 11px;
    color: var(--lime);
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
    background: none;
    border: none;
    padding: 0;
    font-family: 'Syne', sans-serif;
  }
  .meal-ingr-toggle.visible { display: block; }

  /* ── SHOPPING LIST ── */
  .shop-section { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }

  .shop-category {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
  }

  .shop-cat-header {
    padding: 12px 16px;
    background: var(--card2);
    border-bottom: 1px solid var(--border);
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lime);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* ── Aisle view — distinct store-style look ── */
  .shop-section-aisle { gap: 8px; }
  .shop-category-aisle {
    border-color: rgba(87,169,255,0.2);
  }
  .shop-cat-header-aisle {
    background: rgba(87,169,255,0.07);
    border-bottom-color: rgba(87,169,255,0.15);
    color: var(--blue);
    padding: 10px 16px;
    gap: 8px;
  }
  .aisle-num {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--blue);
    background: rgba(87,169,255,0.15);
    border-radius: 20px;
    padding: 2px 8px;
    flex-shrink: 0;
  }
  .aisle-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
  }
  body.light .shop-cat-header-aisle {
    background: rgba(87,169,255,0.1);
    border-bottom-color: rgba(87,169,255,0.2);
  }
  body.light .aisle-num { color: #2a76d4; background: rgba(87,169,255,0.12); }

  .shop-items { padding: 8px 0; }

  .shop-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    transition: background 0.15s;
    cursor: pointer;
  }

  .shop-item:hover { background: var(--card2); }

  .shop-item input[type="checkbox"] {
    width: 18px; height: 18px;
    border: 2px solid var(--border2);
    border-radius: 5px;
    background: var(--bg2);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    transition: all 0.15s;
    position: relative;
  }

  .shop-item input[type="checkbox"]:checked {
    background: var(--lime);
    border-color: var(--lime);
  }

  .shop-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #0e0f11;
    font-size: 11px;
    font-weight: 900;
  }

  .shop-item-name {
    flex: 1;
    font-size: 14px;
    transition: opacity 0.2s;
  }

  .shop-item.checked .shop-item-name {
    opacity: 0.35;
    text-decoration: line-through;
  }

  .shop-item-qty {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
  }

  body.light #plan-name-modal { background: var(--card); border-color: var(--border); }

  /* ── CONFIRM MODAL ── */
  #confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9100;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
  }
  #confirm-overlay.open { opacity: 1; pointer-events: all; }

  #confirm-modal {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    z-index: 9101;
    transform: scale(0.92) translateY(16px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(.22,1,.36,1), opacity 0.3s;
  }
  #confirm-overlay.open #confirm-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  body.light #confirm-modal { background: var(--card); border-color: var(--border); }

  /* ── PLAN NAME MODAL ── */
  #plan-name-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9400;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(4px);
  }
  #plan-name-overlay.open { opacity: 1; pointer-events: all; }

  #plan-name-modal {
    position: fixed;
    bottom: calc(60px + env(safe-area-inset-bottom));
    left: 0; right: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px 24px 24px 24px;
    z-index: 9401;
    padding-bottom: 8px;
    transform: translateY(calc(100% + 60px + env(safe-area-inset-bottom)));
    transition: transform 0.35s cubic-bezier(.22,1,.36,1);
    max-height: 90vh;
    overflow-y: auto;
  }
  #plan-name-modal.open { transform: translateY(0); }

  /* ── TOP-UP CELEBRATION BANNER ── */
  #topup-banner {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 12px);
    left: 12px; right: 12px;
    background: linear-gradient(135deg, #1a2a0a 0%, #0e1f06 100%);
    border: 1.5px solid rgba(200,245,66,0.5);
    border-radius: 18px;
    padding: 14px 16px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateY(-120%) scale(0.92);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(.22,1,.36,1), opacity 0.4s;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,245,66,0.08), inset 0 1px 0 rgba(200,245,66,0.1);
  }
  #topup-banner.visible {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .topup-icon {
    width: 40px; height: 40px;
    background: rgba(200,245,66,0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lime);
    flex-shrink: 0;
    animation: topup-pulse 1.8s ease-in-out infinite;
  }
  @keyframes topup-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,245,66,0.3); }
    50% { box-shadow: 0 0 0 8px rgba(200,245,66,0); }
  }

  .topup-text {
    flex: 1;
    min-width: 0;
  }
  .topup-text strong {
    display: block;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: var(--lime);
    margin-bottom: 2px;
  }
  .topup-text span {
    font-size: 12px;
    color: rgba(200,245,66,0.65);
    line-height: 1.4;
  }
  .topup-text em {
    font-style: normal;
    font-weight: 700;
    color: var(--lime);
  }

  .topup-close {
    background: rgba(200,245,66,0.08);
    border: 1px solid rgba(200,245,66,0.2);
    border-radius: 8px;
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(200,245,66,0.5);
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .topup-close:hover { background: rgba(200,245,66,0.15); color: var(--lime); }

  /* ── Extra micro-animations ── */
  /* Plan card hover lift */
  .meal-card { transition: transform 0.2s, box-shadow 0.2s; }
  .meal-card:active { transform: scale(0.98); }

  /* Nav tab tap */
  .nav-btn { transition: transform 0.15s, color 0.2s; }
  .nav-btn:active { transform: scale(0.9); }

  /* Settings action tap */
  .settings-action { transition: background 0.15s, transform 0.1s; }
  .settings-action:active { transform: scale(0.98); }

  /* History card tap */
  .history-card { transition: border-color 0.2s, transform 0.15s, opacity 0.25s; }
  .history-card:active { transform: scale(0.99); }

  /* Restore button */
  .history-restore-btn { transition: background 0.15s, transform 0.1s; }
  .history-restore-btn:active { transform: scale(0.97); }

  /* ── OFFLINE BANNER ── */
  #offline-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--orange);
    color: #0e0f11;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Figtree', sans-serif;
    padding: calc(env(safe-area-inset-top) + 6px) 16px 6px;
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(.22,1,.36,1);
    letter-spacing: 0.04em;
  }
  #offline-banner.visible { transform: translateY(0); }

  /* ── VERSION FOOTER ── */
  .version-footer {
    text-align: center;
    padding: 24px 16px 12px;
    font-size: 11px;
    color: var(--border2);
    font-family: 'Figtree', sans-serif;
    letter-spacing: 0.08em;
    user-select: none;
  }

  /* ── BOTTOM NAV ── */
  .bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: stretch;
    z-index: 9000;
    padding-bottom: env(safe-area-inset-bottom);
    /* Force GPU layer — prevents iPhone clipping issues */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .bnav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
  }

  .bnav-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    background: var(--lime);
    border-radius: 0 0 4px 4px;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .bnav-btn.active::before { opacity: 1; }

  .bnav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: color 0.2s, transform 0.2s;
  }

  .bnav-btn.active .bnav-icon { color: var(--lime); transform: scale(1.1); }
  .bnav-icon svg { display: block; }

  .bnav-label {
    font-family: 'Figtree', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.2s;
  }

  .bnav-btn.active .bnav-label { color: var(--lime); }

  /* ── SECTION PANELS ── */
  .section-panel { display: none; }
  .section-panel.active { display: block; }

  /* ── DAY STRIP NAV ── */
  .day-strip-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 4px;
  }
  .day-strip-wrap::-webkit-scrollbar { display: none; }
  .day-strip {
    display: flex;
    gap: 6px;
    padding: 12px 16px 8px;
    width: max-content;
    min-width: 100%;
  }

  .day-tab-btn {
    background: var(--card);
    border: 1.5px solid var(--border);
    color: var(--muted);
    border-radius: 12px;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 9px 16px;
    min-width: 52px;
    transition: all 0.22s cubic-bezier(.22,1,.36,1);
    position: relative;
  }

  .day-tab-btn .day-letter {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
  }

  .day-date-num {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.7;
    line-height: 1;
  }

  .day-tab-btn.dc-center .day-date-num { opacity: 0.7; }

  .day-tab-btn.day-tab-today:not(.dc-center) {
    border-color: var(--lime);
    color: var(--lime);
  }
  .day-tab-btn.day-tab-today:not(.dc-center) .day-date-num { opacity: 1; }

  .day-tab-btn.day-tab-done:not(.dc-center) {
    border-color: rgba(200,245,66,0.4);
  }
  .day-tab-check {
    position: absolute; top: 4px; right: 4px;
    font-size: 8px; color: var(--lime); font-weight: 900; line-height: 1;
  }

  .day-tab-btn.dc-center {
    background: var(--lime);
    border-color: var(--lime);
    color: #0e0f11;
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(200,245,66,0.35);
  }

  .day-tab-btn:not(.dc-center):hover {
    border-color: var(--border2);
    color: var(--text);
  }

  .day-tab-train-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--blue);
    position: absolute;
    top: 5px; right: 5px;
  }
  .day-tab-btn.dc-center .day-tab-train-dot { background: rgba(0,0,0,0.4); }

  body.light .day-tab-btn { background: var(--card); color: #5a6280; border-color: var(--border); }
  body.light .day-tab-btn.dc-center { color: var(--text); }

  /* Day panel slide animations */
  .tab-panel.panel-out-left  { animation: p-out-l 0.22s ease-in both; }
  .tab-panel.panel-out-right { animation: p-out-r 0.22s ease-in both; }
  .tab-panel.panel-in-right  { animation: p-in-r  0.3s cubic-bezier(.22,1,.36,1) both; }
  .tab-panel.panel-in-left   { animation: p-in-l  0.3s cubic-bezier(.22,1,.36,1) both; }

  @keyframes p-out-l { to { opacity:0; transform: translateX(-24px); } }
  @keyframes p-out-r { to { opacity:0; transform: translateX(24px); } }
  @keyframes p-in-r  { from { opacity:0; transform: translateX(24px); } to { opacity:1; transform:none; } }
  @keyframes p-in-l  { from { opacity:0; transform: translateX(-24px); } to { opacity:1; transform:none; } }

  /* Day complete state */
  .tab-panel.day-panel-complete .day-macro-header {
    border-bottom: 2px solid rgba(200,245,66,0.25);
  }
  .tab-panel.day-panel-complete .day-kcal-display {
    color: var(--lime);
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 640px) {
    .survey-card { padding: 28px 20px; }
    .grid-2, .grid-4 { grid-template-columns: 1fr 1fr; }
    .plan-header {
      padding-top: calc(env(safe-area-inset-top) + 10px);
      padding-bottom: 12px;
      padding-left: 16px;
      padding-right: 16px;
    }
    .plan-body {
      padding: 20px 16px calc(env(safe-area-inset-bottom) + 80px);
    }
    .macro-preview { grid-template-columns: repeat(2, 1fr); }
    .goal-grid { grid-template-columns: 1fr 1fr; }
  }

/* ═══════════════════════════════════════════════════════
   PREP TIME v3
═══════════════════════════════════════════════════════ */

/* ── Shared atoms ─────────────────────────────────── */
.pt-stat     { flex:1; text-align:center; }
.pt-stat-val { display:block; font-family:'Syne',sans-serif; font-size:22px; font-weight:800; color:var(--text); }
.pt-stat-lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.pt-stat-sep { width:1px; background:var(--border); align-self:stretch; }

.pt-start-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 18px;
  background:var(--lime); color:#0e0f11;
  border:none; border-radius:14px;
  font-family:'Figtree',sans-serif; font-size:15px; font-weight:700;
  cursor:pointer; transition:opacity .15s, transform .12s;
}
.pt-start-btn:hover { opacity:.88; }
.pt-start-btn:active { opacity:.78; transform:scale(.98); }

.pt-start-fresh-btn {
  padding:14px 18px;
  background:transparent; color:var(--muted);
  border:1px solid var(--border); border-radius:14px;
  font-family:'Figtree',sans-serif; font-size:13px; font-weight:600;
  cursor:pointer; transition:border-color .15s, color .15s;
}
.pt-start-fresh-btn:hover { border-color:var(--border2); color:var(--text); }

.pt-empty { padding:56px 24px; text-align:center; color:var(--muted); font-size:14px; }

/* ── Overview ─────────────────────────────────────── */
.pt-overview { padding:24px 20px 100px; }

/* Hero row with ring + title */
.pt-hero {
  display:flex; align-items:center; gap:18px;
  padding:20px 0 22px;
}

.pt-hero-ring { flex-shrink:0; }

.pt-hero-title { font-family:'Syne',sans-serif; font-size:26px; font-weight:800; color:var(--text); margin:0 0 3px; }
.pt-hero-sub   { font-size:13px; color:var(--muted); margin:0; }

/* Lane chips */
.pt-lane-chips { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:20px; }

.pt-lane-chip {
  padding:5px 12px; border-radius:40px;
  background:color-mix(in srgb, var(--lc) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--lc) 28%, transparent);
  color:var(--lc); font-size:12px; font-weight:700;
}
.pt-lane-chip em {
  font-style:normal;
  background:color-mix(in srgb, var(--lc) 18%, transparent);
  border-radius:20px; padding:0 5px; margin-left:3px;
}

/* Resume */
.pt-resume { margin-bottom:20px; }
.pt-resume-info { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:6px; }
.pt-resume-pct  { color:var(--lime); font-weight:700; }
.pt-resume-bar  { height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.pt-resume-fill { height:100%; background:var(--lime); border-radius:3px; }

/* CTA */
.pt-cta-row { display:flex; gap:9px; margin-bottom:28px; }

/* Task overview list */
.pt-overview-list { border-top:1px solid var(--border); padding-top:6px; }

.pt-ov-row {
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 0;
  border-bottom:1px solid var(--border);
}
.pt-ov-row.done { opacity:.35; }
.pt-ov-row.done .pt-ov-task { text-decoration:line-through; }

.pt-ov-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.pt-ov-task { flex:1; min-width:0; font-size:14px; color:var(--text); line-height:1.45; }
.pt-ov-dur  { font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap; padding-top:2px; }

/* ── Session ──────────────────────────────────────── */
.pt-session { padding-bottom:100px; }

.pt-sess-hdr {
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  padding:14px 20px 12px;
  border-bottom:1px solid var(--border);
}

.pt-sess-top-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}

.pt-sess-done { font-family:'Syne',sans-serif; font-size:32px; font-weight:800; color:var(--lime); line-height:1; }
.pt-sess-of   { font-size:16px; color:var(--muted); }

.pt-exit-btn {
  background:var(--card); border:1px solid var(--border);
  color:var(--muted); border-radius:40px;
  padding:7px 16px; font-size:12px; font-weight:600;
  cursor:pointer; font-family:'Figtree',sans-serif;
}

.pt-prog-wrap { display:flex; align-items:center; gap:10px; }
.pt-prog-track { flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.pt-prog-fill  { height:100%; background:var(--lime); border-radius:3px; transition:width .4s cubic-bezier(.4,0,.2,1); }
.pt-prog-pct   { font-size:12px; color:var(--lime); font-weight:700; min-width:30px; text-align:right; }

/* ── Task cards ───────────────────────────────────── */
.pt-cards { padding:14px 18px; display:flex; flex-direction:column; gap:11px; }

.pt-card {
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:18px; overflow:hidden;
}

.pt-card-done {
  opacity:.42;
  border-style:dashed;
}

/* Flash animation when marking done */
.pt-card-flash {
  animation:pt-flash .26s ease both;
  pointer-events:none;
}
@keyframes pt-flash {
  0%   { transform:scale(1); }
  45%  { transform:scale(1.03); background:rgba(200,245,66,.08); }
  100% { transform:scale(1); }
}

/* Card top bar */
.pt-card-top {
  display:flex; align-items:center; gap:7px;
  padding:9px 14px 0;
}

.pt-card-lane-badge {
  padding:3px 10px; border-radius:20px;
  background:color-mix(in srgb, var(--lc) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--lc) 28%, transparent);
  color:var(--lc); font-size:11px; font-weight:700;
}

.pt-card-dur-badge {
  padding:3px 10px; border-radius:20px;
  background:var(--bg2); border:1px solid var(--border);
  color:var(--muted); font-size:11px; font-weight:600;
}

.pt-card-check { margin-left:auto; }

/* Card mid — task text */
.pt-card-mid { padding:10px 16px 6px; }

.pt-card-task {
  font-size:16px; font-weight:700; color:var(--text);
  line-height:1.4; margin:0 0 3px;
}

.pt-card-meal {
  font-size:12px; color:var(--muted); margin:0;
}

/* Detail expand */
.pt-detail-wrap {
  margin:0 16px 0;
  padding:12px 14px;
  background:var(--bg2);
  border-radius:10px;
  border:1px solid var(--border);
}

.pt-detail-text {
  font-size:13px; color:var(--text); line-height:1.6; margin:0;
}

.pt-how-btn {
  display:flex; align-items:center; gap:4px;
  margin:8px 16px 0;
  background:transparent; border:none;
  color:var(--muted); font-size:12px; font-weight:600;
  cursor:pointer; font-family:'Figtree',sans-serif;
  padding:4px 0;
}
.pt-how-btn:hover { color:var(--text); }

/* Card foot — actions */
.pt-card-foot {
  padding:10px 14px 13px;
}

.pt-done-btn {
  width:100%; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:13px;
  background:color-mix(in srgb, var(--lc) 11%, transparent);
  border:1.5px solid color-mix(in srgb, var(--lc) 26%, transparent);
  color:var(--lc); border-radius:12px;
  font-family:'Figtree',sans-serif; font-size:15px; font-weight:700;
  cursor:pointer; transition:opacity .12s, transform .1s;
}
.pt-done-btn:active { transform:scale(.98); opacity:.8; }

.pt-undo-btn {
  background:transparent; border:none;
  color:var(--muted); font-size:12px; font-weight:600;
  cursor:pointer; font-family:'Figtree',sans-serif;
  padding:4px 0;
}

/* ── Completion ───────────────────────────────────── */
.pt-complete {
  display:flex; flex-direction:column; align-items:center;
  padding:68px 24px 100px; text-align:center;
  min-height:60vh;
}

.pt-complete-icon {
  width:88px; height:88px; border-radius:50%;
  background:rgba(200,245,66,.1); border:1.5px solid rgba(200,245,66,.3);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  animation:pt-pop .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pt-pop {
  0%   { transform:scale(.5); opacity:0; }
  100% { transform:scale(1);  opacity:1; }
}

.pt-complete-title { font-family:'Syne',sans-serif; font-size:30px; font-weight:800; color:var(--text); margin:0 0 8px; }
.pt-complete-sub   { font-size:15px; color:var(--muted); margin:0 0 28px; }

.pt-complete-stats {
  display:flex; align-items:center;
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:16px 0;
  width:100%; max-width:240px;
}

/* Light mode */
body.light .pt-card { background:var(--card); }
body.light .pt-sess-hdr { background:var(--bg); }

/* ═══════════════════════════════════════════════════
   FEATURE 1: MEAL SWAP DRAWER
═══════════════════════════════════════════════════ */
#meal-swap-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 500;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(4px);
}
#meal-swap-overlay.open { opacity: 1; pointer-events: all; }

#meal-swap-drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  top: 30vh;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: 24px 24px 0 0;
  z-index: 501;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), top 0.35s cubic-bezier(.22,1,.36,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#meal-swap-drawer.open { transform: translateY(0); }
#meal-swap-drawer.expanded { top: env(safe-area-inset-top, 0px); }

.swap-sticky-header {
  flex-shrink: 0;
  background: var(--card);
  border-radius: 24px 24px 0 0;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.swap-sticky-header:active { cursor: grabbing; }

#meal-swap-body-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 calc(env(safe-area-inset-bottom) + 80px);
}

.swap-current-meal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 16px 20px;
}
.swap-current-meal-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--text);
}
.swap-current-macros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.swap-macro-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--border);
}

.swap-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.swap-spinner::after {
  content: '';
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--lime);
  border-radius: 50%;
  animation: swap-spin 0.7s linear infinite;
}
@keyframes swap-spin { to { transform: rotate(360deg); } }

#swap-results { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 12px; }

.swap-alt-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color 0.2s;
}
.swap-alt-card:hover { border-color: var(--border2); }
.swap-alt-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--text);
}
.swap-alt-macros {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.swap-use-btn {
  width: 100%;
  background: var(--lime);
  color: #0e0f11;
  border: none;
  border-radius: 10px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 13px;
  padding: 10px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.swap-use-btn:hover { opacity: 0.88; }
.swap-use-btn:active { opacity: 0.75; }

body.light #meal-swap-drawer { background: var(--card); border-top-color: var(--border); }
body.light .swap-sticky-header { background: var(--card); }
body.light #meal-swap-overlay { background: rgba(0,0,0,0.3); }
body.light .swap-current-meal { background: var(--bg2); border-color: var(--border); }
body.light .swap-alt-card { background: var(--bg2); border-color: var(--border); }

/* ═══════════════════════════════════════════════════
   FEATURE 2: MEAL RATINGS
═══════════════════════════════════════════════════ */
.meal-card-top {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  min-width: 0;
}
.meal-card-top .meal-time { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eat-btn, .meal-swap-btn { flex-shrink: 0; }
.meal-swap-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.meal-swap-btn:hover { border-color: var(--lime); color: var(--lime); }
.meal-rating-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.rating-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 28px;
  transition: border-color 0.15s, color 0.15s;
}
.rating-btn:hover { border-color: var(--border2); color: var(--text); }
.rating-btn.active-up { border-color: var(--lime); color: var(--lime); }
.rating-btn.active-down { border-color: var(--red); color: var(--red); }
.meal-card-up { background: var(--card); border-color: rgba(200,245,66,0.35) !important; }
.meal-card-up::after { background: var(--lime) !important; }
.meal-card-down { background: var(--card); border-color: rgba(255,87,87,0.35) !important; }
.meal-card-down::after { background: var(--red) !important; }

body.light .meal-card-up { background: rgba(200,245,66,0.04); }
body.light .meal-card-down { background: rgba(255,87,87,0.04); }
.meal-card-eaten { opacity: 0.65; }
.meal-card-eaten .meal-name { text-decoration: line-through; text-decoration-color: var(--muted); }

/* ═══════════════════════════════════════════════════
   FEATURE 3: HAUL SCALER
═══════════════════════════════════════════════════ */
#haul-scaler {
  display: flex;
  gap: 8px;
  background: transparent;
}
/* When inside haul-controls, haul-controls handles the padding */
#haul-controls #haul-scaler { padding: 0; }
.scaler-btn {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg2);
  color: var(--muted);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  padding: 8px 18px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.scaler-btn.active {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(200,245,66,0.1);
}
body.light .scaler-btn { background: var(--bg2); border-color: var(--border); color: var(--muted); }
body.light .scaler-btn.active { border-color: #7ab800; color: #3a6600; background: rgba(200,245,66,0.18); }

/* ═══════════════════════════════════════════════════
   FEATURE 4: WEEK AT A GLANCE
═══════════════════════════════════════════════════ */
#week-glance {
  display: block;
  padding: 12px 0 4px;
}
#week-glance > div[style*="display:flex"] {
  justify-content: space-around;
  height: 64px;
}
.wg-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  flex: 1;
  gap: 4px;
}
.wg-bar-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 24px;
}
.wg-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  transition: height 0.4s ease;
}
.wg-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  font-family: 'Syne', sans-serif;
}
.wg-train-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--blue);
  margin-bottom: 1px;
}

/* ═══════════════════════════════════════════════════
   FEATURE 5: MACRO TARGET RINGS
═══════════════════════════════════════════════════ */
.day-macro-rings {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 8px 0 8px;
}
.ring-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ring-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Figtree', sans-serif;
}
.day-kcal-display {
  text-align: center;
  padding-top: 16px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--lime);
}
.day-kcal-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ring-fill {
  transition: stroke-dashoffset 0.6s cubic-bezier(.22,1,.36,1);
}
.day-macro-header-old {
  /* replaced — see bottom of file for new .day-macro-header */
  display: none;
}

/* ═══════════════════════════════════════════════════
   FEATURE 6: TRAINING DAY MARKERS
═══════════════════════════════════════════════════ */
.settings-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 16px 20px 0;
}
.training-day-pill-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 20px 16px;
}
.training-day-pill {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--muted);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  min-width: 34px;
  text-align: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.training-day-pill.active {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(200,245,66,0.1);
}
body.light .training-day-pill { background: var(--bg2); border-color: var(--border); color: var(--muted); }
body.light .training-day-pill.active { border-color: #7ab800; color: #3a6600; background: rgba(200,245,66,0.18); }

.day-tab-train-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--blue);
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════
   FEATURE 7: PLAN FRESHNESS
═══════════════════════════════════════════════════ */
#plan-freshness {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.freshness-refresh-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  opacity: 0.8;
}
.freshness-refresh-btn:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════
   FEATURE 9: SHARE PLAN BUTTON
═══════════════════════════════════════════════════ */
/* btn-settings already styles the share button — no extra CSS needed */

/* ═══════════════════════════════════════════════════
   FEATURE 10: MEAL NOTES
═══════════════════════════════════════════════════ */
.meal-note-text {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin: 6px 0 2px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 80px;
  overflow-y: auto;
}
.meal-note-editor {
  margin: 6px 0 2px;
}
.meal-note-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  padding: 6px 8px;
  resize: none;
  box-sizing: border-box;
}
.meal-note-input:focus { outline: none; border-color: var(--lime); }
.meal-note-save-btn {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  border: none;
  background: var(--lime);
  color: #0e0f11;
  cursor: pointer;
  font-family: inherit;
}
.note-btn { margin-left: auto; }
.note-has-content { color: var(--lime) !important; }
body.light .meal-note-input { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }

/* ═══════════════════════════════════════════════════
   FEATURE 11: GROCERY AISLE VIEW / HAUL CONTROLS
═══════════════════════════════════════════════════ */
#haul-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 4px;
  gap: 8px;
  flex-wrap: wrap;
}
#haul-controls #haul-scaler,
#haul-view-toggle {
  display: flex;
  gap: 4px;
}
#haul-view-toggle .scaler-btn {
  min-width: 72px;
  font-size: 12px;
}
/* Aisle button gets a blue tint when active */
#hv-aisle.active {
  background: rgba(87,169,255,0.15);
  border-color: rgba(87,169,255,0.5);
  color: var(--blue);
}
#shopping-content {
  padding: 12px 16px 0;
}

/* ═══════════════════════════════════════════════════
   FEATURE 12: WEEKLY STATS ROW
═══════════════════════════════════════════════════ */
#week-stats {
  display: flex;
  gap: 0;
  margin: 0 16px 24px;
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
}
.wstat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px 8px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.wstat-item:last-child { border-right: none; }
.wstat-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.wstat-label {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  text-align: center;
  line-height: 1.2;
}
body.light #week-stats { background: var(--bg2); }
body.light .wstat-item { border-color: rgba(0,0,0,0.06); }

/* ═══════════════════════════════════════════════════
   HAUL ACTIONS (copy / clear)
═══════════════════════════════════════════════════ */
#haul-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.haul-action-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 9px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.haul-action-btn:hover { border-color: var(--lime); color: var(--lime); }
body.light .haul-action-btn { background: var(--bg2); border-color: var(--border); }

/* ═══════════════════════════════════════════════════
   ACTION TOAST (with button)
═══════════════════════════════════════════════════ */
.action-toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 84px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--card);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 10px 10px 10px 16px;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 600;
  z-index: 9998;
  opacity: 0;
  transition: all 0.3s cubic-bezier(.22,1,.36,1);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  pointer-events: none;
  white-space: nowrap;
}
.action-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: all; }
.action-toast-msg { color: var(--text); }
.action-toast-btn {
  background: var(--lime);
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #0e0f11;
  cursor: pointer;
  font-family: 'Syne', sans-serif;
  transition: background 0.15s;
}
.action-toast-btn:hover { background: #d8ff5a; }
body.light .action-toast { background: #fff; border-color: #e0e4ef; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }

/* ═══════════════════════════════════════════════════
   PREP TIMER BUTTON
═══════════════════════════════════════════════════ */
.pt-foot-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.pt-foot-row .pt-done-btn { flex: 1; }
.pt-timer-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Figtree', sans-serif;
  transition: all 0.15s;
  white-space: nowrap;
}
.pt-timer-btn:hover { border-color: var(--lime); color: var(--lime); }
.pt-timer-btn.pt-timer-running {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255,154,66,0.08);
}
.pt-timer-btn.pt-timer-done {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(200,245,66,0.1);
}

/* ═══════════════════════════════════════════════════
   MACRO COMPOSITION BAR
═══════════════════════════════════════════════════ */
.meal-macro-bar {
  display: flex;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  margin: 6px 0 4px;
  gap: 1px;
}
.mmb-p { background: var(--blue); }
.mmb-c { background: var(--orange); }
.mmb-f { background: var(--red); }

.meal-macro-detail {
  background: var(--bg2);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 2px 0 6px;
  animation: fadeIn 0.15s ease;
}
.mmd-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
}
.mmd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mmd-dot-p { background: var(--blue); }
.mmd-dot-c { background: var(--orange); }
.mmd-dot-f { background: var(--red); }
.mmd-name { flex: 1; color: var(--muted); }
.mmd-val { font-weight: 700; color: var(--text); min-width: 32px; text-align: right; }
.mmd-kcal { color: var(--muted); min-width: 60px; text-align: right; }
.mmd-pct { color: var(--muted); min-width: 32px; text-align: right; }

/* ═══════════════════════════════════════════════════
   WATER TRACKER
═══════════════════════════════════════════════════ */
.water-tracker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 4px;
  flex-wrap: wrap;
}
.water-label {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  font-weight: 600;
}
.water-glasses {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.water-glass {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  transition: transform 0.1s;
  display: flex;
  align-items: center;
}
.water-glass:active { transform: scale(0.9); }
.water-glass.filled svg { filter: drop-shadow(0 0 4px rgba(87,169,255,0.4)); }
.water-reset {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
  padding: 2px 4px;
  font-family: inherit;
  opacity: 0.7;
}
.water-reset:hover { opacity: 1; color: var(--text); }

/* ═══════════════════════════════════════════════════
   REGENERATE DAY BUTTON
═══════════════════════════════════════════════════ */
.day-regen-row {
  display: flex;
  justify-content: center;
  padding: 8px 16px 16px;
}
.day-regen-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Figtree', sans-serif;
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s, color 0.15s;
}
.day-regen-btn:hover { border-color: var(--lime); color: var(--lime); }
.day-regen-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════
   DAY JOURNAL
═══════════════════════════════════════════════════ */
.day-journal-wrap {
  padding: 0 16px 20px;
}
.day-journal-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  transition: color 0.15s;
}
.day-journal-toggle:hover { color: var(--text); }
.day-journal-preview {
  font-size: 12px;
  color: var(--text);
  background: var(--bg2);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.day-journal-editor { margin-top: 4px; }
.day-journal-input {
  width: 100%;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  padding: 10px 12px;
  resize: none;
  font-family: inherit;
  box-sizing: border-box;
}
.day-journal-input:focus {
  outline: none;
  border-color: var(--lime);
}
body.light .day-journal-input { background: var(--card); }
body.light .day-journal-preview { background: var(--bg2); }

/* ═══════════════════════════════════════════════════
   MEAL FAVORITES
═══════════════════════════════════════════════════ */
.fav-btn { margin-left: 2px; }
.fav-active { color: var(--lime) !important; border-color: var(--lime) !important; }
.swap-fav-card { border-color: rgba(200,245,66,0.25); background: rgba(200,245,66,0.04); }
.swap-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 20px 4px;
}
body.light .swap-fav-card { background: rgba(200,245,66,0.06); }

/* ═══════════════════════════════════════════════════
   MEAL EATEN TRACKER
═══════════════════════════════════════════════════ */
.eat-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: transparent;
  color: var(--muted);
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.eat-btn:hover { border-color: var(--lime); color: var(--lime); }
.eat-btn.eaten {
  background: rgba(200,245,66,0.15);
  border-color: var(--lime);
  color: var(--lime);
}
body.light .eat-btn { border-color: rgba(0,0,0,0.15); color: var(--muted); }
body.light .eat-btn.eaten { background: rgba(120,200,0,0.12); }

.day-eaten-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px 0;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.day-eaten-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.day-eaten-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--lime);
  transition: width 0.4s cubic-bezier(.22,1,.36,1);
}
body.light .day-eaten-track { background: rgba(0,0,0,0.08); }

/* ═══════════════════════════════════════════════════
   MACRO DONUT + STREAK
═══════════════════════════════════════════════════ */
.week-stats-section-label {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 20px 16px 8px;
}
#week-macro-row {
  /* The section label is inside here; the flex row is an inner div */
}
#week-donut-card {
  background: var(--card);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
#week-streak-card {
  background: var(--card);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
}
.streak-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--lime);
  line-height: 1;
}
.streak-label {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
  margin-top: 2px;
}
.streak-emoji {
  font-size: 14px;
  margin-bottom: 1px;
}
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.donut-leg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
.donut-leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.donut-leg-pct { color: var(--muted); font-weight: 400; margin-left: 2px; }
body.light #week-donut-card,
body.light #week-streak-card { background: var(--bg2); }

/* ═══════════════════════════════════════════════════
   ONBOARDING / INSTALL OVERLAY
═══════════════════════════════════════════════════ */
#onboarding-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* hidden by default — JS shows it when needed */
}
#onboarding-overlay.hidden { display: none; }

.ob-screen {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ob-screen.active { display: flex; }

/* LANDING */
.ob-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 40px) 28px 24px;
  text-align: center;
}
.ob-logo {
  margin-bottom: 20px;
  filter: drop-shadow(0 0 32px rgba(200,245,66,0.4));
}
.ob-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.2em;
  color: var(--lime);
  margin-bottom: 10px;
}
.ob-subtitle {
  font-size: 16px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 28px;
  opacity: 0.85;
}
.ob-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  width: 100%;
  max-width: 300px;
}
.ob-feat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  opacity: 0.8;
  font-weight: 500;
}
.ob-plan-preview {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 14px;
  text-align: left;
}
.ob-preview-day {
  font-size: 10px;
  font-weight: 800;
  color: var(--lime);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.ob-preview-meals {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}
.ob-preview-meal {
  display: flex;
  gap: 8px;
  font-size: 12px;
  align-items: center;
}
.ob-pm-time { color: rgba(255,255,255,0.45); min-width: 36px; font-size: 11px; }
.ob-pm-name { flex: 1; color: rgba(255,255,255,0.85); }
.ob-pm-kcal { font-size: 11px; color: rgba(255,255,255,0.4); }
.ob-preview-macros {
  font-size: 11px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 8px;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
}

.ob-options {
  padding: 0 20px calc(env(safe-area-inset-bottom) + 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.ob-options-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
  text-align: center;
}
.ob-option-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  color: var(--text);
  font-family: 'Figtree', sans-serif;
  transition: border-color 0.2s, background 0.2s;
  text-align: left;
  width: 100%;
}
.ob-option-btn:hover, .ob-option-btn:active {
  border-color: var(--lime);
  background: rgba(200,245,66,0.05);
}
.ob-option-btn-secondary {
  border-color: var(--border);
  background: transparent;
}
.ob-option-btn-secondary:hover {
  border-color: var(--border2);
  background: rgba(255,255,255,0.03);
}
.ob-option-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--lime);
}
.ob-option-btn-secondary .ob-option-icon { color: var(--muted); }
.ob-option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ob-option-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.ob-option-sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.ob-option-chevron { color: var(--muted); flex-shrink: 0; }

/* GUIDE SCREENS */
.ob-guide-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 16px) 20px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.ob-back-btn {
  background: none;
  border: none;
  color: var(--lime);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.ob-guide-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
}
.ob-guide-body {
  flex: 1;
  padding: 24px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.ob-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ob-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lime);
  color: #0e0f11;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ob-step-content { flex: 1; }
.ob-step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.ob-step-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.ob-step-desc strong { color: var(--text); font-weight: 600; }
.ob-inline-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 4px;
  margin: 0 2px;
}
.ob-ios-check {
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(200,245,66,0.1);
  border: 1px solid rgba(200,245,66,0.3);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lime);
}
.ob-ios-check.visible { display: flex; }
.ob-android-prompt {
  background: rgba(200,245,66,0.08);
  border: 1px solid rgba(200,245,66,0.3);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  margin-bottom: 8px;
}
.ob-android-prompt p {
  font-size: 13px;
  color: var(--lime);
  font-weight: 600;
  margin-bottom: 10px;
}
.ob-guide-footer {
  padding: 16px 20px calc(env(safe-area-inset-bottom) + 24px);
  border-top: 1px solid var(--border);
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.ob-cta-btn {
  width: 100%;
  background: var(--lime);
  color: #0e0f11;
  border: none;
  border-radius: 14px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 14px;
  padding: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.ob-cta-btn:hover { background: #d8ff5a; }
.ob-cta-btn-sm { width: auto; padding: 10px 24px; font-size: 13px; }
.ob-dots { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 12px 0 4px; }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: background 0.2s; }
.ob-dot.ob-dot-active { background: var(--lime); }

/* ═══════════════════════════════════════════════════
   TOP-UP MODAL
═══════════════════════════════════════════════════ */
#topup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#topup-overlay.open { opacity: 1; pointer-events: all; }
#topup-modal {
  background: var(--card);
  border-radius: 24px 24px 0 0;
  border: 1px solid var(--border);
  width: 100%;
  max-width: 480px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(.22,1,.36,1);
  padding-bottom: env(safe-area-inset-bottom);
}
#topup-modal.open { transform: translateY(0); }
.topup-handle-row { display: flex; justify-content: center; padding: 10px 0 0; }
.topup-plan-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  color: var(--text);
  font-family: 'Figtree', sans-serif;
  margin-bottom: 8px;
  text-align: left;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.topup-plan-btn:hover { border-color: var(--lime); background: rgba(200,245,66,0.04); }
.topup-plan-popular { border-color: var(--lime) !important; background: rgba(200,245,66,0.06) !important; margin-top: 14px !important; }
.topup-popular-badge {
  position: absolute;
  top: -10px; left: 14px;
  background: var(--lime);
  color: #0e0f11;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
}
.topup-plan-left { flex: 1; }
.topup-plan-credits { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 15px; margin-bottom: 2px; }
.topup-plan-desc { font-size: 12px; color: var(--muted); }
.topup-plan-price { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px; color: var(--lime); margin-left: 16px; }
body.light #topup-modal { background: var(--card); }
body.light .topup-plan-btn { background: var(--bg2); }

/* ── GOAL MODE TABS ── */
.goal-mode-tabs { display: flex; gap: 4px; background: var(--bg2); border-radius: 10px; padding: 3px; }
.goal-mode-tab {
  background: none; border: none; color: var(--muted); font-family: 'Figtree', sans-serif;
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.goal-mode-tab.active { background: var(--card); color: var(--text); }

/* ── PACE SLIDER ── */
.pace-slider-wrap { padding: 4px 0 2px; }
.pace-slider-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pace-slider-val {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--lime);
}
.pace-slider-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.pace-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.pace-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lime);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(200,245,66,0.2);
  transition: box-shadow 0.15s;
}
.pace-slider:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 7px rgba(200,245,66,0.25);
}
.pace-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--lime);
  cursor: pointer;
}
.pace-slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--muted);
  padding: 0 2px;
}
.pace-slider-desc {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  min-height: 16px;
}
body.light .pace-slider { background: var(--border); }

/* ── GOAL WEIGHT FEEDBACK ── */
.gw-warning {
  padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 10px;
  line-height: 1.5;
}
.gw-warning.ok { background: rgba(200,245,66,0.1); color: #a8d83a; border: 1px solid rgba(200,245,66,0.2); }
.gw-warning.info { background: rgba(87,169,255,0.1); color: #57a9ff; border: 1px solid rgba(87,169,255,0.2); }
.gw-warning.warn { background: rgba(255,154,66,0.1); color: #ff9a42; border: 1px solid rgba(255,154,66,0.25); }
.gw-warning.danger { background: rgba(255,87,87,0.1); color: #ff5757; border: 1px solid rgba(255,87,87,0.2); }
.gw-stats {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px;
}
.gw-stats span {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--text);
}

/* ── WEIGHT LOG MODAL ── */
#weight-log-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9500;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
#weight-log-overlay.open { opacity: 1; pointer-events: all; }
#weight-log-modal {
  background: var(--bg2); border-radius: 20px 20px 0 0; width: 100%; max-width: 480px;
  max-height: 85vh; overflow-y: auto; transform: translateY(100%); transition: transform 0.3s ease;
}
#weight-log-overlay.open #weight-log-modal { transform: translateY(0); }
.wl-entry {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.wl-entry:last-child { border-bottom: none; }
.wl-entry-weight { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 16px; }
.wl-entry-date { font-size: 12px; color: var(--muted); margin-top: 2px; }
.wl-entry-del {
  background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px;
  padding: 4px 8px; border-radius: 6px; transition: color 0.15s;
}
.wl-entry-del:hover { color: var(--red); }
.wl-delta-up { color: var(--red); font-size: 11px; margin-left: 4px; }
.wl-delta-down { color: var(--lime); font-size: 11px; margin-left: 4px; }
body.light #weight-log-modal { background: var(--card); }
body.light .goal-mode-tab.active { background: var(--bg); }

/* ── TRAINING DAY CALLOUT ── */
.training-day-callout {
  margin: 0 16px 10px;
  padding: 8px 14px;
  background: rgba(87,169,255,0.1);
  border: 1px solid rgba(87,169,255,0.25);
  border-radius: 10px;
  font-size: 12px;
  color: var(--blue);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.training-day-callout-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0;
}

/* ── NEXT MEAL BADGE ── */
.meal-card-next {
  border-color: rgba(200,245,66,0.4) !important;
  box-shadow: 0 0 0 1px rgba(200,245,66,0.15) !important;
}
.next-meal-badge {
  display: inline-block;
  background: var(--lime);
  color: #0e0f11;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 6px;
}

/* ── CALENDAR MODAL ── */
#calendar-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 9400;
  opacity: 0; transition: opacity 0.3s ease;
}
#calendar-overlay.active { opacity: 1; }

#calendar-modal {
  position: fixed; inset: 0; z-index: 9401;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  pointer-events: none; transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.34,1.1,0.64,1);
}
#calendar-modal.active { pointer-events: auto; transform: translateY(0); }

.cal-modal-inner {
  background: var(--bg2); border-radius: 24px 24px 0 0;
  width: 100%; max-width: 480px; max-height: 92vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 20px 16px 32px; position: relative;
  border-top: 1.5px solid var(--border);
}

.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding: 0 4px;
}
.cal-nav-btn {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 10px;
  color: var(--text); width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s;
}
.cal-nav-btn:active { background: var(--card2); }

.cal-close-btn {
  position: fixed; top: max(20px, env(safe-area-inset-top,20px)); right: 16px;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 50%;
  color: var(--text); width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  z-index: 9402; opacity: 0; transition: opacity 0.3s ease 0.1s; pointer-events: none;
}
#calendar-modal.active .cal-close-btn { opacity: 1; pointer-events: auto; }

.cal-legend {
  display: flex; gap: 12px; justify-content: center;
  font-size: 11px; color: var(--muted); margin-bottom: 14px;
}
.cal-legend-item { display: flex; align-items: center; gap: 5px; }
.cal-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Day-of-week labels */
.cal-day-labels {
  display: grid; grid-template-columns: repeat(7,1fr);
  text-align: center; margin-bottom: 4px;
}
.cal-day-label {
  font-size: 11px; font-weight: 700; font-family: 'Syne', sans-serif;
  color: var(--muted); padding: 4px 0;
}

/* Grid cells */
.cal-grid-cells {
  display: grid; grid-template-columns: repeat(7,1fr); gap: 3px;
}
.cal-cell {
  aspect-ratio: 1; border-radius: 10px; background: var(--card);
  border: 1.5px solid transparent; display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: pointer;
  position: relative; transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.cal-cell:active { opacity: 0.75; }
.cal-empty { background: transparent; border-color: transparent; cursor: default; pointer-events: none; }
.cal-future { opacity: 0.35; cursor: default; pointer-events: none; }
.cal-today { border-color: var(--lime) !important; }
.cal-no-data { background: var(--card); border-color: var(--border); }

/* Adherence states */
.cal-complete { background: rgba(200,245,66,0.12); border-color: rgba(200,245,66,0.35); }
.cal-partial  { background: rgba(255,154,66,0.12); border-color: rgba(255,154,66,0.3); }
.cal-minimal  { background: rgba(255,87,87,0.08);  border-color: rgba(255,87,87,0.2); }

.cal-day-num {
  font-size: 12px; font-weight: 700; font-family: 'Syne', sans-serif;
  line-height: 1; color: var(--text);
}
.cal-today .cal-day-num { color: var(--lime); }

.cal-dot {
  width: 5px; height: 5px; border-radius: 50%; margin-top: 3px; flex-shrink: 0;
}
.cal-dot-complete { background: var(--lime); }
.cal-dot-partial  { background: var(--orange); }
.cal-dot-minimal  { background: var(--red); opacity: 0.7; }

/* Month summary row */
.cal-month-summary {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
  margin-top: 16px; padding: 14px 0 0; border-top: 1px solid var(--border);
}
.cal-summary-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cal-summary-val { font-size: 17px; font-weight: 800; font-family: 'Syne', sans-serif; color: var(--text); }
.cal-summary-label { font-size: 10px; color: var(--muted); text-align: center; }

/* Day detail popup */
#cal-day-popup {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: var(--bg); border-top: 1.5px solid var(--border);
  border-radius: 16px 16px 0 0; margin: 16px -16px -32px; padding: 16px 16px 24px;
}
.cal-popup-date {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 15px;
  margin-bottom: 12px; color: var(--text);
}
.cal-popup-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 14px;
}
.cal-popup-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--card); border-radius: 10px; padding: 10px 4px; }
.cal-popup-val { font-size: 15px; font-weight: 800; font-family: 'Syne', sans-serif; color: var(--text); }
.cal-popup-label { font-size: 10px; color: var(--muted); }
.cal-popup-bar-row { margin-bottom: 10px; }
.cal-popup-bar-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.cal-mini-bar { height: 6px; background: var(--card2); border-radius: 3px; overflow: hidden; }
.cal-mini-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.cal-popup-note {
  font-size: 12px; font-style: italic; color: var(--muted);
  border-left: 2px solid var(--lime); padding-left: 10px; margin-top: 10px; line-height: 1.5;
}
.cal-popup-close {
  width: 100%; margin-top: 14px; background: var(--card2);
  border: 1.5px solid var(--border); border-radius: 12px; color: var(--text);
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px;
  padding: 12px; cursor: pointer;
}

/* Light mode overrides */
body.light .cal-modal-inner { background: var(--bg2); }
body.light .cal-cell { background: var(--card); }
body.light #cal-day-popup { background: var(--bg); }

/* ═══════════════════════════════════════════════════
   DAY PANEL — CLEAN HEADER (Task 2)
═══════════════════════════════════════════════════ */
.day-macro-header {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 16px 14px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.day-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  min-width: 58px;
}
.day-kcal-display {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--lime);
  line-height: 1;
  text-align: left !important;
  padding-top: 0 !important;
}
.day-kcal-label {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: left !important;
  margin-bottom: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.day-target-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 10px;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}
.day-target-edit-btn:hover { color: var(--lime); }
.day-macro-rings {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 2px;
}
.day-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.day-action-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  transition: border-color 0.15s, color 0.15s;
}
.day-action-btn:hover { border-color: var(--lime); color: var(--lime); }
.day-logall-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  transition: color 0.15s;
}
.day-logall-btn:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════
   MEAL CARD — CLEAN VERSION (Task 1)
═══════════════════════════════════════════════════ */
.meal-card-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.meal-more-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  padding: 3px 7px;
  cursor: pointer;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.meal-more-btn:hover { border-color: var(--border2); color: var(--text); }
.meal-note-preview {
  font-size: 12px;
  color: var(--muted);
  margin: 3px 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-style: italic;
}
.meal-note-preview:hover { color: var(--text); }

/* Day journal link style */
.day-journal-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  font-family: 'Figtree', sans-serif;
  padding: 0;
  margin-bottom: 6px;
  display: block;
  transition: color 0.15s;
  text-decoration: none;
}
.day-journal-link:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════
   MEAL ACTION SHEET (Task 1)
═══════════════════════════════════════════════════ */
.meal-action-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 9990;
  transition: background 0.25s ease;
  pointer-events: none;
}
.meal-action-sheet-overlay.open {
  background: rgba(0,0,0,0.55);
  pointer-events: all;
}
.meal-action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 0 0 max(20px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(.32,1,.36,1);
  z-index: 9991;
  max-width: 500px;
  margin: 0 auto;
}
.meal-action-sheet.open { transform: translateY(0); }
.sheet-drag-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 12px auto 8px;
}
.sheet-meal-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 15px;
  padding: 4px 20px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-rating-indicator {
  font-size: 11px;
  color: var(--muted);
  padding: 4px 20px;
  font-style: italic;
}
.meal-action-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 13px 20px;
  text-align: left;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  color: var(--text);
  transition: background 0.1s;
}
.meal-action-item:hover { background: var(--bg2); }
.meal-action-item:active { background: var(--bg2); }
.action-item-emoji { font-size: 18px; width: 24px; text-align: center; }
.action-item-label { flex: 1; }
.action-item-muted { color: var(--muted); }
body.light .meal-action-sheet { background: #fff; border-top-color: var(--border); }
body.light .meal-action-sheet-overlay.open { background: rgba(0,0,0,0.4); }

/* ═══════════════════════════════════════════════════
   TOPUP SPINNER (Task 5)
═══════════════════════════════════════════════════ */
.topup-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--lime);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════
   SECTION PADDING — ensure content clears bottom nav
═══════════════════════════════════════════════════ */
.section-panel { padding-bottom: 120px; }
#section-week { padding-bottom: 0; } /* week has its own card spacing */
#day-tabs-content { padding-bottom: 120px; }

/* Meals grid gap */
.meals-grid { gap: 10px; }

/* Day panel eaten bar — simplified (block layout, overrides old flex) */
.day-eaten-bar {
  display: block !important;
  padding: 0 16px 10px !important;
  margin-bottom: 2px;
}
.day-eaten-bar .day-eaten-track {
  flex: unset;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
body.light .day-eaten-bar .day-eaten-track { background: rgba(0,0,0,0.08); }