:root{
  --bg: #0b0e10;
  --fg: #eaf1f5;
  --muted:#9fb0be;
  --card:#131820;
  --stroke:#232c38;
  --accent:#24a35d;
  --accent-2:#7b5cff;
}
:root.light{
  --bg:#f7f9fb;
  --fg:#0b0e10;
  --muted:#5a6a77;
  --card:#ffffff;
  --stroke:#e6edf3;
  --accent:#1e9151;
  --accent-2:#5b46e6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
img{max-width:100%;display:block}
.app-header{position:sticky;top:0;background:color-mix(in oklab, var(--bg) 85%, transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--stroke);z-index:10}
.brand{display:flex;gap:12px;align-items:center;padding:12px 16px}
.logo{width:32px;height:32px;border-radius:8px}
h1{margin:0;font-size:18px;letter-spacing:.2px}
.tag{font-size:12px;background:var(--accent-2);color:#fff;padding:2px 8px;border-radius:999px;margin-left:6px}
.header-actions{position:absolute;right:12px;top:12px}
#mode-toggle{border:1px solid var(--stroke);background:var(--card);color:var(--fg);border-radius:10px;padding:8px 10px;cursor:pointer}
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding:0 12px 12px}
.tab-btn{background:var(--card);color:var(--fg);border:1px solid var(--stroke);border-radius:12px;padding:10px 12px;cursor:pointer}
.tab-btn.active,.tab-btn:hover{outline:2px solid color-mix(in oklab, var(--accent) 60%, transparent)}
main{padding:16px;max-width:1100px;margin:0 auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:14px;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.kpi .kpi-val{font-size:28px;font-weight:700;margin:6px 0}
.progress-wrap{height:10px;border-radius:6px;background:color-mix(in oklab, var(--card) 70%, #000);border:1px solid var(--stroke)}
.progress{height:8px;background:linear-gradient(90deg,var(--accent),#3fd47e);border-radius:6px;width:0%}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:12px}
.panel{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:14px}
.list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.list li{background:color-mix(in oklab, var(--card) 80%, #000);border:1px solid var(--stroke);border-radius:12px;padding:10px;display:flex;align-items:center;justify-content:space-between}
.badge{background:var(--accent-2);color:#fff;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:700}
.tab{display:none}
.tab.active{display:block}
.row{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.row.two{flex-direction:row;gap:10px}
.row.two>div{flex:1}
input,select,button{padding:11px 12px;border-radius:12px;border:1px solid var(--stroke);background:var(--card);color:var(--fg)}
input::placeholder{color:var(--muted)}
button{background:var(--accent);color:#08130b;border:none;font-weight:700;cursor:pointer}
button:hover{filter:brightness(1.05)}
.export-wrap{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
#meal-plan,#recipes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.recipe,.meal{background:var(--card);border:1px solid var(--stroke);border-radius:14px;padding:12px}
.recipe h4,.meal h4{margin:6px 0}
ul#shopping-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.app-footer{padding:18px;text-align:center;color:var(--muted);border-top:1px solid var(--stroke);margin-top:24px}
.sodium{font-weight:700}
.challenge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.challenge{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:12px}
.challenge .status{font-weight:700;margin-top:8px}
.muted{color:var(--muted)}