:root{
  --bg:#0f1411; --panel:#171d19; --ink:#e8efe9; --mute:#9aa8a0;
  --accent:#7dd3a1; --accent-2:#f0b87a; --line:#26302a; --bad:#e57373;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{margin:0;font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink)}

body{
  background:
    radial-gradient(900px 600px at 90% 100%, rgba(240,184,122,.06), transparent 60%),
    radial-gradient(900px 700px at 0% 0%,    rgba(125,211,161,.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  position:relative;
  min-height:100vh;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
header.site, main.wrap, footer.site { position:relative; z-index:1; }

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

header.site{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:14px 22px;border-bottom:1px solid var(--line);
  background:rgba(12,16,14,.85);backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  position:sticky;top:0;z-index:10}
.brand{font-weight:700;font-size:18px;color:var(--ink)}
nav.top-nav a{margin-left:14px;color:var(--mute);font-size:14px}
nav.top-nav a:hover{color:var(--ink);text-decoration:none}
nav.top-nav a.active{color:var(--accent)}
nav.top-nav a.cta{background:var(--accent);color:#0c100e;padding:6px 12px;border-radius:6px;font-weight:600}

.wrap{max-width:980px;margin:0 auto;padding:28px 22px}
h1{font-size:30px;margin:0 0 8px}
h2{font-size:22px;margin:28px 0 10px}
.lede{color:var(--mute);font-size:18px;margin:0 0 22px}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:18px;margin:12px 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 12px 30px -16px rgba(0,0,0,.55);
}

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

.metric{display:flex;flex-direction:column;align-items:center;padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--panel);
  border:1px solid var(--line);border-radius:12px;
  box-shadow: 0 12px 30px -16px rgba(0,0,0,.55)}
.metric .n{font-size:30px;font-weight:700;color:var(--accent)}
.metric .l{color:var(--mute);font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-top:4px}

.meal{display:flex;flex-direction:column;gap:6px}
.meal .title{font-weight:600}
.meal .macros{color:var(--mute);font-size:13px}
.meal .desc{color:var(--ink);font-size:14px}

.badge{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  padding:2px 8px;border:1px solid var(--line);border-radius:999px;color:var(--mute);margin-right:6px}

form .row{display:flex;flex-direction:column;gap:6px;margin:12px 0}
input[type=email],input[type=password],input[type=text],input[type=number],select,textarea{
  background:#0c100e;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:0}
button,.btn{background:var(--accent);color:#0c100e;border:0;border-radius:8px;padding:10px 16px;
  font-weight:600;cursor:pointer;font-size:15px;display:inline-block;text-decoration:none;
  box-shadow:0 8px 20px -10px rgba(125,211,161,.55)}
.btn:hover{filter:brightness(1.05);text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

.error{color:var(--bad);margin:8px 0}
.success{color:var(--accent);margin:8px 0}

fieldset{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0}
legend{padding:0 6px;color:var(--mute);font-size:13px}
label.chk{display:inline-flex;align-items:center;gap:6px;margin:6px 12px 6px 0;color:var(--ink)}

footer.site{border-top:1px solid var(--line);padding:36px 22px 22px;color:var(--mute);font-size:13px;margin-top:50px;background:#0c100e}

/* ---- Affiliate recommendation card ---- */
.aff-card{
  position:relative;margin:18px 0;padding:20px 22px;border-radius:14px;
  border:1px solid rgba(240,184,122,.30);
  background:
    radial-gradient(500px 220px at 100% 0%, rgba(240,184,122,.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 50%),
    var(--panel);
  box-shadow:0 14px 32px -18px rgba(0,0,0,.6); overflow:hidden;
}
.aff-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--accent-2), rgba(240,184,122,0));}
.aff-tag{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-2);padding:4px 10px;border:1px solid rgba(240,184,122,.40);
  border-radius:999px;margin-bottom:10px;}
.aff-title{margin:0 0 6px;font-size:20px}
.aff-body{color:var(--mute);margin:0 0 14px;font-size:15px;line-height:1.55}
.aff-cta{background:var(--accent-2);color:#22150a;box-shadow:0 8px 20px -10px rgba(240,184,122,.65);margin-bottom:8px}
.aff-cta:hover{filter:brightness(1.05)}

/* ============ Mobile bottom tab bar ============ */
.tabbar{ display:none; }

@media (max-width:760px){
  /* Hide top nav for logged-in users on mobile; tabs replace it */
  body.has-tabs nav.top-nav{ display:none; }
  body.has-tabs header.site{ justify-content:center; }

  body.has-tabs{
    padding-bottom: calc(72px + var(--safe-bottom));
  }
  body.has-tabs footer.site{
    margin-bottom: calc(64px + var(--safe-bottom));
  }

  .tabbar{
    display:flex;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:50;
    padding: 6px 0 calc(6px + var(--safe-bottom));
    background:rgba(12,16,14,.92);
    backdrop-filter:saturate(140%) blur(12px);
    -webkit-backdrop-filter:saturate(140%) blur(12px);
    border-top:1px solid var(--line);
    box-shadow: 0 -10px 30px -10px rgba(0,0,0,.5);
  }
  .tabbar .tab{
    flex:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    background:transparent;border:0;color:var(--mute);
    font-size:11px;padding:8px 4px;cursor:pointer;
    text-decoration:none; min-height:54px;
    box-shadow:none;font-weight:500;
  }
  .tabbar .tab svg{ width:24px; height:24px; }
  .tabbar .tab.active{ color:var(--accent); }
  .tabbar .tab:active{ transform: scale(0.96); }
  .tabbar .tab span{ letter-spacing:.04em; }
}

/* ============ Menu sheet ============ */
.sheet{
  position:fixed; inset:0; z-index:100;
  pointer-events:none; visibility:hidden;
}
.sheet.open{ pointer-events:auto; visibility:visible; }
.sheet-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  opacity:0; transition:opacity .18s ease;
}
.sheet.open .sheet-backdrop{ opacity:1; }
.sheet-panel{
  position:absolute; left:0; right:0; bottom:0;
  background:var(--panel);
  border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;
  padding: 8px 18px calc(22px + var(--safe-bottom));
  transform: translateY(100%);
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 -20px 50px -20px rgba(0,0,0,.6);
  max-height: 80vh; overflow:auto;
}
.sheet.open .sheet-panel{ transform: translateY(0); }
.sheet-grip{
  width:42px;height:4px;border-radius:99px;background:var(--line);
  margin: 8px auto 14px;
}
.sheet-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;
}
.sheet-head h3{ margin:0; font-size:18px; }
.sheet-x{
  background:transparent;border:0;color:var(--mute);
  font-size:28px;line-height:1;padding:0 6px;cursor:pointer;
  box-shadow:none;
}
.sheet-links{ display:flex; flex-direction:column; }
.sheet-links a{
  display:block;padding:14px 6px;color:var(--ink);
  border-bottom:1px solid var(--line);font-size:16px;
}
.sheet-links a:hover{ text-decoration:none; color:var(--accent); }
.sheet-links a:last-child{ border-bottom:0; }
.sheet-links a.logout{ color:var(--bad); margin-top:6px; }
/* ============================================================
   Mode theming (Shop / Kitchen / Log)
   Each mode swaps --accent so existing accent-colored elements
   (buttons, active tabs, focus rings, links) pick up the tint
   automatically. --mode-accent is used by mode-specific chrome
   like the header ribbon and mode-card left borders.
   ============================================================ */
:root{
  --shop-accent:    #7dd3a1;   /* emerald green (same as default --accent) */
  --kitchen-accent: #f0b87a;   /* amber (same as --accent-2) */
  --log-accent:     #7ab8d9;   /* sky blue */
}
body.mode-shop    { --accent: var(--shop-accent);    --mode-accent: var(--shop-accent); }
body.mode-kitchen { --accent: var(--kitchen-accent); --mode-accent: var(--kitchen-accent); }
body.mode-log     { --accent: var(--log-accent);     --mode-accent: var(--log-accent); }

/* Button shadow uses hardcoded green rgba; soften on non-shop modes */
body.mode-kitchen .btn{ box-shadow:0 8px 20px -10px rgba(240,184,122,.55); }
body.mode-log     .btn{ box-shadow:0 8px 20px -10px rgba(122,184,217,.55); }

/* ============================================================
   Mode header (persistent bar inside each mode page)
   [🏠 Home]   Shop   [Kitchen | Log]
   ============================================================ */
.mode-header{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(12,16,14,.85);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  position:sticky; top:0; z-index:9;
}
.mode-header::before{
  /* Thin accent ribbon along the bottom edge — the color signal */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--mode-accent);
}
.mode-header{ position:sticky; }
.mode-header .home-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  background:transparent; border:1px solid var(--line);
  color:var(--ink); text-decoration:none;
  box-shadow:none; padding:0;
}
.mode-header .home-btn:hover{ border-color:var(--accent); color:var(--accent); }
.mode-header .home-btn svg{ width:20px; height:20px; }
.mode-header .mode-title{
  font-weight:700; font-size:17px; letter-spacing:.02em;
  flex:0 0 auto;
}
.mode-header .mode-title .dot{
  display:inline-block; width:8px; height:8px; border-radius:99px;
  background:var(--mode-accent); margin-right:8px; vertical-align:middle;
}
.mode-header .mode-switch{
  margin-left:auto;
  display:inline-flex; gap:2px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:10px; padding:3px;
}
.mode-header .mode-switch a{
  padding:6px 12px; font-size:13px; color:var(--mute);
  border-radius:7px; text-decoration:none;
}
.mode-header .mode-switch a:hover{ color:var(--ink); background:rgba(255,255,255,.04); }

/* ============================================================
   Home screen: three big mode cards
   ============================================================ */
.mode-cards{
  display:grid; gap:14px; margin:18px 0;
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .mode-cards{ grid-template-columns:repeat(3,1fr); }
}
.mode-card{
  display:flex; flex-direction:column; gap:8px;
  padding:22px 20px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 50%), var(--panel);
  border:1px solid var(--line);
  text-decoration:none; color:var(--ink);
  position:relative; overflow:hidden;
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.6);
  transition: transform .12s ease, border-color .12s ease;
}
.mode-card:hover{ transform:translateY(-1px); text-decoration:none; }
.mode-card::before{
  /* Left accent stripe */
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--card-accent, var(--accent));
}
.mode-card.shop    { --card-accent: var(--shop-accent); }
.mode-card.kitchen { --card-accent: var(--kitchen-accent); }
.mode-card.log     { --card-accent: var(--log-accent); }
.mode-card:hover   { border-color: var(--card-accent); }
.mode-card .mc-title{
  font-weight:700; font-size:20px; color:var(--ink);
}
.mode-card .mc-sub{
  font-size:13px; color:var(--mute);
}
.mode-card .mc-icon{
  width:34px; height:34px; margin-bottom:4px;
  color:var(--card-accent);
}

/* ============================================================
   Mode-specific bottom nav reuses .tabbar but the active tint
   comes from --accent, which is scoped per-mode above. Nothing
   more needed here — but on desktop the mode tabbar is still
   visible (unlike the old bottom nav), so show it always:
   ============================================================ */
body.has-mode-tabs .mode-tabbar{ display:flex; }
.mode-tabbar{
  /* Same visual as .tabbar but always visible */
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding: 6px 0 calc(6px + var(--safe-bottom));
  background:rgba(12,16,14,.92);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-top:1px solid var(--line);
  box-shadow: 0 -10px 30px -10px rgba(0,0,0,.5);
}
.mode-tabbar .tab{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:transparent;border:0;color:var(--mute);
  font-size:11px;padding:8px 4px;cursor:pointer;
  text-decoration:none; min-height:54px;
  box-shadow:none;font-weight:500;
}
.mode-tabbar .tab svg{ width:22px; height:22px; }
.mode-tabbar .tab.active{ color:var(--accent); }
.mode-tabbar .tab:active{ transform: scale(0.96); }
body.has-mode-tabs{ padding-bottom: calc(72px + var(--safe-bottom)); }