:root{
  --primary:#6fae3d; --primary-dark:#5e9a33; --deep:#3f5130;
  --panel-text:#e9efe1; --panel-muted:#b8c7aa;
  --accent:#f2c84b; --carbs:#9cd36b; --fat:#e89b5b;
  --bg:#f4f7f1; --surface:#fff; --soft:#f7faf3;
  --border:#eef1ea; --border-alt:#e6e9e1;
  --ink:#1c2417; --muted:#8a9181;
  --chip-bg:#eef3e8; --chip-txt:var(--deep);
  --kcal:var(--primary); --prot:var(--accent); --carb:var(--carbs); --fatc:var(--fat);
  --danger:#e85b4b;
  --shadow-card:0 1px 2px rgba(20,30,15,.04);
  --shadow-cta:0 6px 16px rgba(111,174,61,.32);
  --sidebar:236px;
}
[data-theme="forest"]{
  --primary:#3f7d52; --primary-dark:#336844; --deep:#1f3a2b; --panel-text:#eef0e6; --panel-muted:#a9bda5;
  --accent:#c87a4f; --carbs:#7fa368; --fat:#c87a4f; --chip-bg:#e7ece2; --bg:#f3f1e9; --soft:#f6f4ec;
}
[data-theme="mono"]{
  --primary:#222a25; --primary-dark:#111613; --deep:#131a15; --panel-text:#eef1ee; --panel-muted:#9aa79f;
  --accent:#5fb487; --carbs:#8fc9a8; --fat:#6f9b82; --chip-bg:#eef1ee; --bg:#f7f9f7; --soft:#f6f8f6;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5; font-size:14.5px;
  -webkit-text-size-adjust:100%;
}
a{color:inherit; text-decoration:none}
h1{font-size:24px; font-weight:800; letter-spacing:-.02em; margin:.1em 0}
h3{font-weight:800; letter-spacing:-.01em}
svg{display:block}
img{max-width:100%}

/* ---------- Brand ---------- */
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.25rem; letter-spacing:-.02em; color:var(--ink); padding:6px 4px 18px}
.brand-accent{color:var(--primary)}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--chip-bg);color:var(--primary-dark);display:grid;place-items:center}
.brand-mark svg{width:18px;height:18px}
.brand-min{display:flex;align-items:center;gap:9px;max-width:920px;margin:0 auto;padding:20px;font-weight:800;font-size:1.2rem}
.brand-min .brand-accent{color:var(--primary)}

/* ---------- App shell ---------- */
.app{display:flex; min-height:100vh}
.sidebar{display:none}
.content-wrap{flex:1; min-width:0; padding-bottom:90px}
.container{max-width:980px; margin:0 auto; padding:8px 16px 24px}
.container-guest{max-width:460px; margin:0 auto; padding:8px 16px 24px}

.topbar{position:sticky; top:0; z-index:10; background:var(--bg);
  display:flex; align-items:center; gap:12px; padding:14px 16px 8px; max-width:980px; margin:0 auto}
.topbar .greet{flex:1; min-width:0}
.topbar .greet small{color:var(--muted); font-size:.78rem}
.topbar .greet b{display:block; font-size:1.05rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.avatar{width:42px;height:42px;border-radius:12px;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-weight:800;flex:none}
.avatar-lg{width:64px;height:64px;border-radius:18px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.6rem;flex:none}

/* ---------- Sidebar (desktop) ---------- */
.side-nav{display:flex; flex-direction:column; gap:3px}
.side-nav a{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; color:var(--muted); font-weight:600}
.side-nav a svg{width:21px; height:21px; flex:none}
.side-nav a:hover{background:var(--soft); color:var(--ink)}
.side-nav a.active{background:var(--chip-bg); color:var(--deep); font-weight:700}
.side-bottom{margin-top:auto; padding-top:12px; border-top:1px solid var(--border)}

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav{position:fixed; left:0; right:0; bottom:0; z-index:20; height:70px;
  display:flex; background:var(--surface); border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--muted); font-size:.66rem; font-weight:600}
.bottom-nav a svg{width:23px; height:23px}
.bottom-nav a.active{color:var(--primary-dark)}

/* ---------- Cards ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-card); padding:18px; margin-bottom:14px}
.card.tight{padding:8px 16px}
.section-title{font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:20px 2px 10px}
.grid{display:grid; gap:13px}
.grid-2{grid-template-columns:1fr 1fr}

/* ---------- Day strip ---------- */
.day-strip{display:flex; gap:8px; overflow-x:auto; padding:6px 2px; scrollbar-width:none}
.day-strip::-webkit-scrollbar{display:none}
.day{flex:1 0 auto; min-width:48px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:9px 0}
.day small{display:block; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em}
.day b{display:block; font-size:1.05rem; font-weight:800; margin-top:3px}
.day.today{background:var(--primary); border-color:var(--primary)}
.day.today small,.day.today b{color:#fff}

/* ---------- Macro pills ---------- */
.pills{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.mp{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:9px; background:var(--soft); color:var(--deep); font-size:.74rem; font-weight:700}
.mp::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--d,#bcc4b3)}
.mp.kcal{--d:var(--kcal)} .mp.prot{--d:var(--prot)} .mp.fat{--d:var(--fatc)} .mp.carb{--d:var(--carb)}
.pill{display:inline-block; padding:3px 11px; border-radius:999px; background:var(--chip-bg); color:var(--chip-txt); font-size:.74rem; font-weight:700}

/* ---------- Progress rows ---------- */
.prow{padding:13px 0; border-bottom:1px solid var(--border)}
.prow:last-child{border:0}
.prow .top{display:flex; justify-content:space-between; align-items:baseline}
.prow .top .lab{color:var(--deep); font-weight:700; font-size:.92rem}
.prow .top .val{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.88rem}
.prow .top .val b{color:var(--ink); font-weight:800}
.bar{height:8px; border-radius:999px; background:rgba(63,81,48,.10); overflow:hidden; margin-top:8px}
.bar>span{display:block; height:100%; background:var(--primary); border-radius:999px; transition:width .3s}
.bar>span.prot{background:var(--accent)} .bar>span.fat{background:var(--fatc)} .bar>span.carb{background:var(--carbs)}

/* ---------- Lists ---------- */
.stat{display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--border)}
.stat:last-child{border:0}
.stat b{font-weight:700}
.meal-row{display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--border)}
.meal-row:last-child{border:0}
.meal-tag{width:46px; height:46px; border-radius:14px; background:var(--chip-bg); color:var(--deep); display:grid; place-items:center; font-size:1.4rem; flex:none}
.meal-row .body{flex:1; min-width:0}
.meal-row .body .nm{font-weight:700}

/* ---------- Forms ---------- */
label{display:block; font-size:.8rem; font-weight:700; color:var(--deep); margin:12px 0 5px}
input,select,textarea{width:100%; padding:11px 13px; border:1px solid var(--border-alt); border-radius:12px; font-size:.95rem; background:var(--surface); color:var(--ink); font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(111,174,61,.15)}
.btn{display:block; width:100%; text-align:center; background:var(--primary); color:#fff; border:0; padding:13px 16px; border-radius:13px; font-size:.95rem; font-weight:700; cursor:pointer; font-family:inherit; box-shadow:var(--shadow-cta)}
.btn:hover{background:var(--primary-dark)}
.btn svg{display:inline-block; width:18px; height:18px; vertical-align:-4px; margin-right:4px}
.btn-sec{background:var(--surface); color:var(--deep); border:1px solid var(--border-alt); box-shadow:none}
.btn-sec:hover{background:var(--soft)}
.muted{color:var(--muted)}
.error{color:var(--danger); font-size:.88rem; margin:6px 0}
.flash{max-width:980px; margin:10px auto 0; padding:12px 16px; background:var(--chip-bg); border:1px solid #d8e6c9; border-radius:12px; color:var(--deep); font-weight:700; font-size:.9rem}

details{border-top:1px solid var(--border); margin-top:10px; padding-top:6px}
details>summary{cursor:pointer; list-style:none; font-weight:700; font-size:.85rem; color:var(--muted); padding:6px 0}
details>summary::-webkit-details-marker{display:none}

/* ---------- Dashboard hero ---------- */
.hero{background:var(--deep); border-radius:22px; padding:24px; color:var(--panel-text);
  display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-bottom:14px}
.hero-left{display:flex; align-items:center; gap:18px; flex:1; min-width:240px}
.cal-ring{width:128px; height:128px; border-radius:50%; flex:none;
  background:conic-gradient(var(--accent) calc(var(--pct,0)*1%), rgba(255,255,255,.13) 0); display:grid; place-items:center}
.cal-ring .inner{width:96px; height:96px; border-radius:50%; background:var(--deep); display:grid; place-items:center; text-align:center; line-height:1.1}
.cal-ring .inner .big{font-size:22px; font-weight:800}
.cal-ring .inner small{display:block; color:var(--panel-muted); font-size:11px}
.hero-info small{color:var(--panel-muted); font-size:13px}
.hero-info .left-kcal{font-size:26px; font-weight:800; margin:2px 0 8px}
.hero-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.12); font-size:.78rem; font-weight:700}
.hero-pill .dot{color:#9cd36b; font-weight:800}
.hero-macros{flex:1; min-width:200px; display:flex; flex-direction:column; gap:12px}
.hmacro .top{display:flex; justify-content:space-between; font-size:12.5px; color:var(--panel-muted); margin-bottom:5px}
.hmacro .top b{color:var(--panel-text); font-weight:700}
.hbar{height:8px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden}
.hbar>span{display:block; height:100%; border-radius:999px}

.qstats{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:13px}
.qstat{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow:var(--shadow-card)}
.qicon{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:1.15rem; margin-bottom:10px}
.qstat .v{font-weight:800; font-size:1.15rem}
.qstat .l{color:var(--muted); font-size:.8rem}

.row-head{display:flex; justify-content:space-between; align-items:center; margin:20px 2px 10px}
.row-head .section-title{margin:0}
.row-head a{color:var(--primary-dark); font-weight:700; font-size:.85rem}

.cta-banner{display:block; background:var(--chip-bg); border:1px dashed #bcd3a6; border-radius:18px; padding:16px 18px; margin-top:14px}
.cta-banner b{display:block; color:var(--deep)}
.cta-banner small{color:var(--muted)}

.meal-thumb{width:48px; height:48px; border-radius:13px; flex:none; display:grid; place-items:center; font-size:1.3rem;
  background:repeating-linear-gradient(135deg,#dfe9d2,#dfe9d2 6px,#eef3e8 6px,#eef3e8 12px)}
.meal-type-lbl{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--primary-dark)}

/* ---------- Calendar / plan ---------- */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.cal-head .range{font-weight:800; font-size:16px}
.cal-nav{display:flex; gap:8px}
.cal-nav a{width:36px; height:36px; border-radius:11px; border:1px solid var(--border); background:var(--surface); color:#6b7466; display:grid; place-items:center; font-weight:800}
.cal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.cal-day{background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-card); padding:14px; display:flex; flex-direction:column; gap:10px}
.cal-day.sel{border-color:var(--primary); box-shadow:0 0 0 3px rgba(111,174,61,.12)}
.cal-day .dh{display:flex; align-items:baseline; justify-content:space-between}
.cal-day .dow{font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.cal-day .dnum{font-weight:800; font-size:19px}
.cal-day.sel .dow,.cal-day.sel .dnum{color:var(--deep)}
.cal-kcal{font-size:11px; font-weight:700; color:var(--primary); background:var(--chip-bg); padding:3px 8px; border-radius:999px}
.cal-mini{display:flex; flex-direction:column; gap:7px}
.cal-mini a{background:var(--soft); border-radius:10px; padding:8px 10px; display:block}
.cal-mini .mt{font-size:10px; font-weight:800; color:var(--primary); text-transform:uppercase; letter-spacing:.03em}
.cal-mini .mn{font-size:12px; font-weight:600; line-height:1.3; margin-top:1px}
.cal-day .pickday{font-size:11px; color:var(--primary-dark); font-weight:700; margin-top:auto}

/* ---------- Tabs + plan cards ---------- */
.tabs{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:5px; display:inline-flex; gap:4px; margin-bottom:16px}
.tabs a{border-radius:10px; padding:9px 15px; font-weight:700; font-size:13.5px; color:#7c8473}
.tabs a.active{background:var(--primary); color:#fff}
.plan-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.plan-card{text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-card); padding:18px; display:flex; flex-direction:column; gap:8px; width:100%; cursor:pointer; font:inherit; color:var(--ink)}
.plan-card:hover{background:var(--soft)}
.plan-card .pico{width:40px; height:40px; border-radius:12px; background:var(--chip-bg); color:var(--primary-dark); display:grid; place-items:center; font-size:1.2rem}
.plan-card .pn{font-weight:800; font-size:16px}
.plan-card .pk{font-weight:700; font-size:13px; color:var(--primary-dark)}
.plan-card .pd{font-size:12.5px; color:var(--muted); line-height:1.5}
.badge-pop{display:inline-block; background:#fdf3d6; color:#b58a16; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:4px 9px; border-radius:999px}

/* ---------- Meal detail ---------- */
.meal-banner{height:180px; border-radius:20px; position:relative; display:flex; align-items:flex-end; padding:16px; margin-bottom:16px;
  background:repeating-linear-gradient(135deg,#e7ede0,#e7ede0 14px,var(--chip-bg) 14px,var(--chip-bg) 28px)}
.meal-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:20px}
.photo-ctrl{position:absolute; z-index:2; right:12px; bottom:12px; display:flex; gap:8px}
.btn-mini{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.92); backdrop-filter:blur(4px); color:var(--deep); border:0; border-radius:10px; padding:8px 12px; font-size:.8rem; font-weight:700; cursor:pointer}
.meal-banner .badge{position:absolute; z-index:2; top:14px; left:14px; background:rgba(255,255,255,.85); backdrop-filter:blur(4px); color:var(--deep); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:6px 11px; border-radius:999px}
.meal-banner .ph{font-family:ui-monospace,monospace; font-size:11px; color:var(--muted); background:rgba(255,255,255,.7); padding:5px 9px; border-radius:7px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.chip-meta{display:inline-flex; align-items:center; gap:6px; background:#f1f4ec; color:#6b7466; border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:600}
.macro-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:12px; margin:16px 0}
.macro-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:15px}
.macro-card small{font-size:12px; color:var(--muted)}
.macro-card b{display:block; font-weight:800; font-size:21px; margin-top:3px}
.macro-card.dark{background:var(--deep); border-color:var(--deep); color:var(--panel-text)}
.macro-card.dark small{color:var(--panel-muted)}
.two-col{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; align-items:start; margin-bottom:16px}
.ing-row{display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #f2f4ee; padding:10px 0}
.ing-row:last-child{border:0}
.ing-row .nm{display:flex; align-items:center; gap:10px; font-size:14px}
.ing-row .dot{width:7px; height:7px; border-radius:50%; background:var(--primary); flex:none}
.ing-row .qty{font-size:13px; color:var(--muted); font-weight:600; white-space:nowrap}
.step{display:flex; gap:12px; margin-bottom:13px}
.step:last-child{margin-bottom:0}
.step .n{width:26px; height:26px; border-radius:50%; background:var(--chip-bg); color:var(--deep); font-weight:800; font-size:13px; display:grid; place-items:center; flex:none}
.step .t{font-size:14px; line-height:1.55; color:#3a4233; padding-top:2px}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
.actions form{flex:1; min-width:160px; margin:0}

/* ---------- Wait overlay ---------- */
.wait-overlay{position:fixed; inset:0; z-index:100; background:rgba(28,36,23,.55); backdrop-filter:blur(2px); display:grid; place-items:center; padding:24px}
.wait-overlay[hidden]{display:none}
.wait-box{background:var(--surface); border-radius:20px; padding:28px 26px; text-align:center; max-width:320px; box-shadow:0 20px 50px rgba(20,30,15,.35); display:flex; flex-direction:column; align-items:center; gap:10px}
.wait-box b{font-size:1.05rem}
.spinner{width:46px; height:46px; border-radius:50%; border:4px solid var(--chip-bg); border-top-color:var(--primary); animation:spin .8s linear infinite; margin-bottom:4px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Desktop ---------- */
@media(min-width:880px){
  .sidebar{display:flex; flex-direction:column; width:var(--sidebar); flex:none;
    padding:22px 16px; border-right:1px solid var(--border); background:var(--surface); position:sticky; top:0; height:100vh}
  .bottom-nav{display:none}
  .content-wrap{padding-bottom:0}
  .container{padding:8px 22px 32px}
}