*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#000;--bg2:#1C1C1E;--bg3:#2C2C2E;--bg4:#3A3A3C;--bg5:#48484A;
  --sep:rgba(255,255,255,0.07);--sep2:rgba(255,255,255,0.12);
  --t1:#FFFFFF;--t2:rgba(255,255,255,0.55);--t3:rgba(255,255,255,0.28);
  --acc:#30D158;--acc-d:rgba(48,209,88,0.14);
  --ora:#FF9F0A;--ora-d:rgba(255,159,10,0.14);
  --red:#FF453A;--red-d:rgba(255,69,58,0.14);
  --blu:#0A84FF;--blu-d:rgba(10,132,255,0.14);
  --pur:#BF5AF2;--pur-d:rgba(191,90,242,0.14);
  --tea:#5AC8FA;--tea-d:rgba(90,200,250,0.14);
  --r:12px;--rl:18px;--rxl:24px;
  --font:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --tab-h:64px;
}
html,body{
  height:100%;
  overflow:hidden;
  font-family:var(--font);
  background:var(--bg);
  color:var(--t1);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{min-height:100dvh}

/* SCREENS */
.screen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  opacity:1;
  transition:opacity .18s,transform .22s cubic-bezier(.4,0,.2,1)
}
.screen.hidden{opacity:0;pointer-events:none;transform:translateY(12px)}
.scroller{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 18px)
}

/* STATUS BAR */
.sb{height:calc(env(safe-area-inset-top,44px) + 6px);flex-shrink:0}

/* LARGE TITLE */
.pg-title{font-size:32px;font-weight:900;letter-spacing:-.6px;padding:4px 18px 0}
.pg-sub{font-size:15px;color:var(--t2);padding:3px 18px 14px;font-weight:500}

/* TAB BAR */
.tab-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:100;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));
  background:rgba(18,18,18,.94);
  backdrop-filter:blur(30px) saturate(200%);
  -webkit-backdrop-filter:blur(30px) saturate(200%);
  border-top:1px solid var(--sep);
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:0;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tb{
  flex:1;
  height:var(--tab-h);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  transition:transform .1s
}
.tb:active{transform:scale(.88)}
.tb-ico{font-size:24px;line-height:1;transition:transform .15s}
.tb.active .tb-ico{transform:scale(1.12)}
.tb-lbl{font-size:10px;font-weight:700;color:var(--t3);transition:color .15s;letter-spacing:.02em}
.tb.active .tb-lbl{color:var(--acc)}

/* SECTION HEADER */
.sh{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);padding:18px 18px 7px}

/* GROUPED LIST */
.grp{margin:0 16px 14px;border-radius:var(--rl);overflow:hidden;background:var(--bg2)}
.grp-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--sep);min-height:48px}
.grp-row:last-child{border-bottom:none}
.grp-row:active{background:var(--bg3)}
.grp-lbl{flex:1;font-size:16px;font-weight:600}
.grp-val{font-size:15px;color:var(--t2);font-weight:500}
.grp-chev{color:var(--t3);font-size:18px;margin-left:4px}

/* HERO CARD */
.hero{
  margin:4px 16px 14px;
  border-radius:var(--rxl);
  padding:22px 18px 18px;
  position:relative;overflow:hidden;
  background:linear-gradient(140deg,#1a2f1e,#0d1a0f);
  border:1px solid rgba(48,209,88,.18);
  transition:background .4s,border .4s;
}
.hero::after{
  content:'';
  position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(48,209,88,.1),transparent 70%);
  pointer-events:none
}
.hero-emoji{font-size:38px;margin-bottom:10px;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}
.hero-wk{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--acc);margin-bottom:3px}
.hero-name{font-size:24px;font-weight:900;letter-spacing:-.3px;line-height:1.15;margin-bottom:2px}
.hero-theme{font-size:13px;color:var(--t2);font-weight:600;margin-bottom:14px}
.hero-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700;border:1px solid transparent}
.chip-acc{background:var(--acc-d);color:var(--acc);border-color:rgba(48,209,88,.2)}
.chip-ora{background:var(--ora-d);color:var(--ora);border-color:rgba(255,159,10,.2)}
.chip-ghost{background:rgba(255,255,255,.07);color:var(--t2);border-color:rgba(255,255,255,.1)}
.hero-nav{display:flex;gap:8px}
.hn-btn,.wa-btn,.sa,.save-btn,.cal-dl-btn,.w-btn{
  -webkit-appearance:none;
  appearance:none;
}
.hn-btn{flex:1;padding:10px 8px;border-radius:12px;border:none;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:800;transition:opacity .15s}
.hn-btn:active{opacity:.75}
.hn-prev{background:rgba(255,255,255,.09);color:var(--t1)}
.hn-next{background:var(--acc);color:#000}
.hn-sel{flex:1.5;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.09);border:none}
.hn-sel select{width:100%;background:transparent;border:none;color:var(--t1);font-size:13px;font-weight:700;font-family:var(--font);padding:10px 12px;cursor:pointer;appearance:none;-webkit-appearance:none}
.hn-sel select option{background:#1C1C1E}

/* WEATHER BANNER */
.wx-banner{margin:0 16px 10px;padding:11px 14px;border-radius:var(--r);background:var(--ora-d);border:1px solid rgba(255,159,10,.2);font-size:13px;font-weight:700;color:var(--ora);display:none;align-items:center;gap:8px}
.wx-banner.on{display:flex}

/* DAY CARDS */
.day-card{
  display:flex;align-items:stretch;
  margin:0 16px 8px;
  background:var(--bg2);border-radius:var(--rl);
  border:1px solid var(--sep);overflow:hidden;
  cursor:pointer;transition:transform .1s,opacity .1s;
}
.day-card:active{transform:scale(.975);opacity:.88}
.dc-bar{width:4px;flex-shrink:0}
.dc-body{flex:1;padding:13px 12px;min-width:0}
.dc-day{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:3px}
.dc-name{font-size:15px;font-weight:800;line-height:1.3;color:var(--t1);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dc-tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:800;border-radius:6px;padding:3px 8px}
.tg-c{background:var(--ora-d);color:var(--ora)}
.tg-t{background:var(--acc-d);color:var(--acc)}
.tg-p{background:var(--red-d);color:#FF6B61}
.tg-f{background:var(--blu-d);color:var(--blu)}
.tg-v{background:var(--acc-d);color:#34D470}
.tg-g{background:rgba(48,209,88,.09);color:var(--acc)}
.tg-b{background:var(--tea-d);color:var(--tea)}
.tg-th{background:var(--pur-d);color:var(--pur)}
.dc-chev{display:flex;align-items:center;padding:0 14px;color:var(--t3);font-size:20px;flex-shrink:0}

/* WEEK ACTION BUTTONS */
.week-actions{display:flex;gap:8px;margin:0 16px 6px}
.wa-btn{flex:1;background:var(--bg2);border:1px solid var(--sep2);border-radius:12px;padding:12px 8px;color:var(--t1);font-size:13px;font-weight:800;font-family:var(--font);cursor:pointer;text-align:center;transition:background .12s}
.wa-btn:active{background:var(--bg3)}
.wa-btn.acc{background:var(--acc);color:#000;border-color:transparent}
.wa-btn.acc:active{opacity:.82}

/* BOTTOM SHEET */
.overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .25s}
.overlay.on{opacity:1;pointer-events:all}
.sheet{
  position:fixed;bottom:0;left:0;right:0;z-index:401;
  background:var(--bg2);border-radius:22px 22px 0 0;
  max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
  padding-bottom:max(env(safe-area-inset-bottom,0px),16px);
}
.overlay.on .sheet{transform:translateY(0)}
.sh-handle{width:36px;height:5px;border-radius:3px;background:var(--bg5);margin:10px auto 0;flex-shrink:0}
.sh-hdr{
  padding:18px 18px 12px;
  padding-top:calc(env(safe-area-inset-top, 0px) + 8px);
  border-bottom:1px solid var(--sep);
  flex-shrink:0;position:relative
}
.sh-close{position:absolute;top:12px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--bg4);border:none;color:var(--t2);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sh-close:active{background:var(--bg5)}
.sh-title{font-size:19px;font-weight:900;letter-spacing:-.2px;line-height:1.2;padding-right:36px}
.sh-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.mc{font-size:12px;font-weight:700;padding:4px 10px;border-radius:8px}
.mc-t{background:var(--ora-d);color:var(--ora)}
.mc-s{background:var(--blu-d);color:var(--blu)}
.mc-c{background:var(--acc-d);color:var(--acc)}
.mc-g{background:rgba(48,209,88,.09);color:var(--acc)}
.sh-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.rs-hdr{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);padding:16px 18px 7px}
.ing-list{margin:0 16px;border-radius:var(--r);overflow:hidden;background:var(--bg3)}
.ing-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--sep)}
.ing-row:last-child{border-bottom:none}
.ing-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex-shrink:0}
.ing-name{flex:1;font-size:14px;font-weight:600}
.ing-qty{font-size:13px;color:var(--t2);font-weight:600}
.step-list{padding:0 16px;display:flex;flex-direction:column;gap:9px}
.step-row{display:flex;gap:12px;align-items:flex-start}
.step-n{width:28px;height:28px;border-radius:9px;background:var(--bg3);color:var(--t1);font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.step-t{font-size:14px;line-height:1.6;flex:1;padding-top:3px}
.note-box{margin:12px 16px 4px;padding:12px 14px;border-radius:var(--r);font-size:13px;font-weight:600;line-height:1.55}
.note-tip{background:var(--ora-d);color:var(--ora);border:1px solid rgba(255,159,10,.18)}
.note-gf{background:var(--acc-d);color:var(--acc);border:1px solid rgba(48,209,88,.18);margin-top:8px}

/* SHOPPING */
.shop-acts{display:flex;gap:8px;margin:0 16px 4px}
.sa{flex:1;background:var(--bg2);border:1px solid var(--sep2);border-radius:12px;padding:12px 6px;color:var(--t1);font-size:13px;font-weight:800;font-family:var(--font);cursor:pointer;text-align:center;transition:background .12s}
.sa:active{background:var(--bg3)}
.cat-hdr{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);padding:16px 18px 6px}
.shop-grp{margin:0 16px 12px;border-radius:var(--rl);overflow:hidden;background:var(--bg2)}
.ck-row{display:flex;align-items:center;gap:13px;padding:13px 16px;border-bottom:1px solid var(--sep);cursor:pointer;transition:background .1s;min-height:50px}
.ck-row:last-child{border-bottom:none}
.ck-row:active{background:var(--bg3)}
.ck-row.done .ck-name{opacity:.3;text-decoration:line-through}
.ck-circle{width:24px;height:24px;border-radius:50%;border:2px solid var(--bg5);flex-shrink:0;transition:all .18s;display:flex;align-items:center;justify-content:center}
.ck-row.done .ck-circle{background:var(--acc);border-color:var(--acc)}
.ck-chk{font-size:12px;font-weight:900;color:#000;opacity:0;transition:opacity .15s}
.ck-row.done .ck-chk{opacity:1}
.ck-name{flex:1;font-size:15px;font-weight:600}
.ck-qty{font-size:13px;color:var(--t2);font-weight:600;margin-right:6px}
.w-btn{
  width:32px;
  height:32px;
  border-radius:10px;
  background:#0071CE;
  border:none;
  color:#fff;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  flex-shrink:0;
  transition:opacity .12s
}
.w-btn:active{opacity:.72}

/* CALENDAR */
.cal-nav{display:flex;align-items:center;gap:8px;padding:0 16px 14px}
.cal-nav h2{flex:1;font-size:22px;font-weight:900;letter-spacing:-.3px}
.cal-nb{width:36px;height:36px;border-radius:10px;background:var(--bg2);border:1px solid var(--sep2);color:var(--t1);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s}
.cal-nb:active{background:var(--bg3)}
.cal-wrap{margin:0 16px;border-radius:var(--rl);overflow:hidden;background:var(--bg2);border:1px solid var(--sep)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--sep)}
.cdow{text-align:center;padding:9px 2px;font-size:11px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:.04em}
.cal-cells{display:grid;grid-template-columns:repeat(7,1fr)}
.cc{min-height:64px;padding:5px 3px;border-right:1px solid var(--sep);border-bottom:1px solid var(--sep);cursor:pointer;overflow:hidden;transition:background .1s}
.cc:nth-child(7n){border-right:none}
.cc:active{background:var(--bg3)}
.cc.emp{cursor:default;background:transparent}
.cc.emp:active{background:transparent}
.cc.today .cc-d{color:var(--blu);font-weight:900}
.cc-d{font-size:13px;font-weight:600;color:var(--t2);text-align:center;margin-bottom:3px}
.cc-dot{width:5px;height:5px;border-radius:50%;margin:0 auto 2px}
.cc-m{font-size:9px;font-weight:700;line-height:1.3;text-align:center;color:var(--t2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cc-m.taco{color:var(--ora)}
.cc-m.pizza{color:var(--red)}
.cal-dl-btn{display:block;margin:12px 16px 0;width:calc(100% - 32px);background:var(--blu);color:#fff;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:800;font-family:var(--font);cursor:pointer;transition:opacity .12s}
.cal-dl-btn:active{opacity:.8}

/* THEME PICKER SHEET */
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px}
.theme-card{background:var(--bg3);border-radius:var(--rl);padding:14px;cursor:pointer;border:2px solid transparent;transition:all .15s;position:relative;overflow:hidden;min-height:108px}
.theme-card:active{opacity:.8}
.theme-card.sel{border-color:var(--acc)}
.tc-emoji{font-size:28px;margin-bottom:6px;display:block}
.tc-name{font-size:14px;font-weight:800;margin-bottom:2px}
.tc-desc{font-size:11px;color:var(--t2);font-weight:600;line-height:1.4}
.tc-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--acc);display:none;align-items:center;justify-content:center;font-size:11px;color:#000;font-weight:900}
.theme-card.sel .tc-check{display:flex}

/* PREP SHEET */
.prep-section{padding:0 16px 8px}
.prep-card{background:var(--bg3);border-radius:var(--r);padding:14px;margin-bottom:8px}
.prep-card-title{font-size:14px;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:7px}
.prep-steps{display:flex;flex-direction:column;gap:5px}
.prep-step{font-size:13px;color:var(--t2);line-height:1.5;padding-left:14px;position:relative}
.prep-step::before{content:'•';position:absolute;left:0;color:var(--acc)}

/* SETTINGS */
.set-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--sep);background:var(--bg2);min-height:52px}
.set-row:first-child{border-radius:var(--rl) var(--rl) 0 0}
.set-row:last-child{border-bottom:none;border-radius:0 0 var(--rl) var(--rl)}
.set-row:only-child{border-radius:var(--rl)}
.set-lbl{flex:1;font-size:15px;font-weight:700}
.set-inp{background:var(--bg4);border:none;color:var(--t1);font-size:15px;font-family:var(--font);font-weight:600;border-radius:8px;padding:6px 10px;width:145px;text-align:right}
select.set-inp{text-align:left}
.set-inp:focus{outline:none;background:var(--bg5)}
.save-btn{display:block;margin:0 16px 8px;width:calc(100% - 32px);background:var(--acc);color:#000;border:none;border-radius:12px;padding:15px;font-size:16px;font-weight:900;font-family:var(--font);cursor:pointer;transition:opacity .12s}
.save-btn:active{opacity:.82}

/* ICAL OPTIONS */
.ical-row{display:flex;align-items:center;gap:13px;padding:15px 16px;border-bottom:1px solid var(--sep);cursor:pointer;transition:background .1s}
.ical-row:last-child{border-bottom:none}
.ical-row:active{background:var(--bg3)}
.ical-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.ical-inf{flex:1}
.ical-t{font-size:15px;font-weight:800;margin-bottom:2px}
.ical-d{font-size:13px;color:var(--t2);font-weight:500;line-height:1.4}
.ical-chev{color:var(--t3);font-size:20px}

/* TOAST */
.toast{
  position:fixed;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 10px);left:50%;
  transform:translateX(-50%) translateY(16px);
  background:rgba(38,38,40,.97);backdrop-filter:blur(20px);color:var(--t1);
  padding:11px 20px;border-radius:20px;font-size:14px;font-weight:700;white-space:nowrap;
  z-index:999;opacity:0;transition:all .28s cubic-bezier(.34,1.56,.64,1);border:1px solid var(--sep2);
  box-shadow:0 6px 28px rgba(0,0,0,.45);pointer-events:none
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
