:root{
  --green:#123d2b;--green2:#2f7652;--cream:#f7f6ef;--mint:#e8f3eb;
  --gold:#dcae38;--ink:#18231d;--muted:#7b837d;--line:#e1e6e1;--white:#fff;
  --danger:#a53c32;--shadow:0 12px 35px rgba(18,61,43,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#eeeFE9;color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app{width:100%;max-width:520px;min-height:100vh;margin:auto;background:var(--cream);position:relative;overflow:hidden}
header{padding:22px 20px 8px}
.headerTop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-size:22px;font-weight:900;letter-spacing:-.7px;color:var(--green)}
.brandLogo{display:block;width:min(205px,calc(100% - 58px));height:auto;max-height:58px;object-fit:contain;object-position:left center;border-radius:0}
.tag{font-size:12px;color:var(--muted);margin-top:3px}
.notifyBtn{position:relative;width:42px;height:42px;flex:none;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--green);display:grid;place-items:center;box-shadow:0 4px 14px rgba(18,61,43,.08);-webkit-tap-highlight-color:transparent}
.notifyBtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.notifyBadge{position:absolute;right:-1px;top:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:10px;background:var(--gold);color:#fff;border:2px solid var(--cream);font-size:9px;font-weight:900;display:none;align-items:center;justify-content:center}
.notifyBtn.hasUnread .notifyBadge{display:flex}
.notifyBtn:active{transform:scale(.95)}
.notificationList{margin-top:12px}
.notificationItem{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px;margin:8px 0}
.notificationItem.unread{border-color:#c8dfd0;background:#f4faf5}
.notificationItem b{display:block;font-size:13px;color:var(--ink)}
.notificationItem p{font-size:11px;line-height:1.45;color:var(--muted);margin:5px 0 0;white-space:pre-wrap}
.notificationItem small{display:block;font-size:9px;color:var(--muted);margin-top:7px}
.notificationEmpty{text-align:center;padding:28px 12px;color:var(--muted);font-size:12px}
.notificationRefresh{border:1px solid var(--line);background:#fff;color:var(--green);border-radius:12px;padding:9px 12px;font-weight:800;font-size:11px}
main{padding:0 16px 112px}
.screen{display:none;animation:rise .24s ease}
.screen.active{display:block}.onboarding-mode .bottom{display:none!important}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.hero{padding:20px 4px 12px}
.hero h1{font-size:31px;line-height:1.08;letter-spacing:-1.3px;margin:0 0 9px}
.hero p{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
.card{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:18px;margin:12px 0;box-shadow:var(--shadow)}
.title{font-size:17px;font-weight:850;margin:0 0 4px}
.sub{font-size:12px;color:var(--muted);line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{width:100%;border:1.5px solid var(--line);background:#fff;border-radius:18px;padding:15px;text-align:left;min-height:82px;color:var(--ink);transition:.18s}
.choice.selected{border-color:var(--green2);background:var(--mint);box-shadow:inset 0 0 0 1px var(--green2)}
.choice .emoji{font-size:23px;display:block;margin-bottom:7px}
.choice b{font-size:14px}.choice small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
label{font-size:12px;font-weight:800;display:block;margin:14px 0 7px}
.field{width:100%;padding:13px;border:1px solid var(--line);border-radius:14px;background:#fbfcfa;color:var(--ink);outline:none}
.field:focus{border-color:var(--green2)}
.inputrow{display:flex;gap:8px}
.toggle{display:flex;background:#edf1ed;border-radius:13px;padding:4px;margin:10px 0}
.toggle button{flex:1;border:0;background:transparent;padding:9px;border-radius:10px;color:var(--muted);font-weight:800}
.toggle button.on{background:#fff;color:var(--green);box-shadow:0 2px 8px rgba(18,61,43,.09)}
.cta{width:100%;border:0;background:var(--green);color:#fff;border-radius:16px;padding:15px;font-weight:850;margin-top:14px}
.secondary{width:100%;border:1px solid var(--line);background:#fff;color:var(--green);border-radius:15px;padding:13px;font-weight:800;margin-top:9px}
.back{width:100%;border:0;background:transparent;color:var(--muted);padding:11px}
.progressline{height:5px;background:#e4e8e3;border-radius:9px;overflow:hidden;margin:4px 20px 7px}
.progressline i{display:block;height:100%;background:var(--gold);width:16%;transition:.25s}
.alert{background:#fff6df;border:1px solid #ecd38b;border-radius:15px;padding:13px;font-size:12px;line-height:1.5;color:#5d491d}
.danger{background:#fff1ef!important;color:var(--danger)!important;border-color:#f0cfca!important}

/* dashboard */
.dashTop{display:flex;justify-content:space-between;align-items:center;padding-top:10px}
.dashTop h2{font-size:25px;letter-spacing:-.8px;margin:4px 0 0}
.avatar{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:900}
.goalCard{margin-top:16px;background:var(--green);color:#fff;border-radius:26px;padding:22px 20px 20px;position:relative;overflow:hidden;min-height:218px}
.goalLabel{font-size:13px;letter-spacing:.2px;color:rgba(255,255,255,.72);font-weight:700}
.goalWeight{font-size:52px!important;line-height:1;margin:8px 0 13px!important;letter-spacing:-2px!important;color:#f2c94c!important;font-weight:900!important}
.currentWeightLine{display:flex;flex-direction:column;gap:2px;width:calc(100% - 125px);padding-top:11px;border-top:1px solid rgba(255,255,255,.18)}
.currentWeightLine span{font-size:12px;color:rgba(255,255,255,.72)}
.currentWeightLine b{font-size:25px;line-height:1.1;color:#fff;letter-spacing:-.5px}

.ring{width:100px;height:100px;border-radius:50%;background:conic-gradient(var(--gold) 0 42%,#37664e 42% 100%);position:absolute;right:17px;top:22px;display:grid;place-items:center}
.ring:after{content:"";width:72px;height:72px;border-radius:50%;background:var(--green)}
.ring span{position:absolute;z-index:1;text-align:center;font-size:10px}.ring b{display:block;font-size:19px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.metric{background:#f4f6f2;border-radius:17px;padding:12px 9px}.metric .ico{font-size:18px}.metric b{display:block;font-size:17px;margin-top:4px}.metric small{font-size:10px;color:var(--muted)}
.mealRow{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.mealRow:last-child{border-bottom:0}
.foodIcon{width:58px;height:58px;border-radius:17px;background:var(--mint);display:grid;place-items:center;font-size:28px;flex:none}
.mealRow h3{font-size:14px;margin:0}.mealRow p{font-size:11px;color:var(--muted);margin:4px 0 0;line-height:1.35}.mealMeta{margin-left:auto;font-size:10px;font-weight:850;color:var(--green)}
.quickGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;text-align:left}.quick b{display:block;font-size:13px}.quick span{font-size:20px}.quick small{color:var(--muted);font-size:10px}
.tip{background:var(--mint);border-radius:18px;padding:14px;font-size:12px;line-height:1.5}

/* food search */
.search{display:flex;gap:8px}.search .field{flex:1}.search button{border:0;background:var(--green);color:#fff;border-radius:14px;padding:0 16px;font-weight:800}
.foodCard{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.foodCard:last-child{border:0}
.foodEmoji{width:52px;height:52px;border-radius:15px;background:var(--mint);display:grid;place-items:center;font-size:25px}
.foodCard h3{margin:0;font-size:14px}.foodCard p{margin:4px 0 0;color:var(--muted);font-size:11px}.foodKcal{margin-left:auto;font-size:11px;font-weight:850;color:var(--green)}

/* progress */
.statGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:15px}.stat small{color:var(--muted)}.stat b{display:block;font-size:25px;color:var(--green);margin-top:5px}
.barChart{height:130px;display:flex;align-items:end;gap:8px;padding-top:20px}.barItem{flex:1;text-align:center}.bar{height:var(--h);max-height:90px;min-height:8px;background:var(--green);border-radius:7px 7px 3px 3px}.barItem small{font-size:9px;color:var(--muted)}
.checkin{display:flex;gap:9px;align-items:center}.checkin button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff}.checkin button.done{background:var(--green);color:#fff;border-color:var(--green)}

/* habits */
.habit{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.habit:last-child{border:0}.habitIcon{width:45px;height:45px;border-radius:14px;background:var(--mint);display:grid;place-items:center;font-size:21px}.habitText{flex:1}.habitText b{font-size:13px}.habitText small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.check{width:28px;height:28px;border-radius:50%;border:2px solid #cdd5cf;background:#fff;color:#fff}.check.done{background:var(--green);border-color:var(--green)}

/* profile */
.profileLine{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.profileLine:last-child{border:0}.profileLine span{color:var(--muted)}
.backupRow{display:grid;grid-template-columns:1fr 1fr;gap:8px}.backupRow button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px;color:var(--green);font-weight:800}

.hidden{display:none!important}
@media(max-width:520px){.bottom{height:76px}.nav.on .navIcon{width:56px;height:56px}}

.req{color:var(--danger);font-weight:900}
.mealRow{cursor:pointer;transition:.18s}.mealRow:active{transform:scale(.99);background:#f7faf7;border-radius:15px}
.mealTap{font-size:10px;color:var(--green);font-weight:800;margin-left:auto;white-space:nowrap}
.mealKcal{font-size:11px;font-weight:900;color:var(--green);margin-top:3px}
.modalBack{position:fixed;inset:0;background:rgba(11,35,25,.48);z-index:100;display:none;align-items:flex-end;justify-content:center}
.modalBack.open{display:flex}
.modal{width:min(520px,100%);max-height:88vh;overflow:auto;background:var(--cream);border-radius:28px 28px 0 0;padding:18px 18px 28px;box-shadow:0 -15px 50px rgba(0,0,0,.18)}
.modalHead{display:flex;justify-content:space-between;align-items:center;gap:12px}.modalHead h2{margin:0;font-size:23px}.closeBtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--green);font-size:22px}
.nutriGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.nutri{background:#fff;border:1px solid var(--line);border-radius:15px;padding:11px}.nutri b{display:block;font-size:17px;color:var(--green)}.nutri small{color:var(--muted)}
.optionMeal{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;margin:9px 0}.optionMealTop{display:flex;gap:10px;align-items:flex-start}.optionMealTop>div:first-child{flex:1}.optionMeal h3{font-size:15px;margin:0 0 3px}.optionMeal p{font-size:11px;color:var(--muted);margin:0;line-height:1.4}.macroLine{font-size:10px;color:var(--green);font-weight:800;margin-top:7px}.addFoodBtn{border:0;background:var(--green);color:#fff;border-radius:12px;padding:9px 11px;font-weight:800;font-size:11px}
.calcTotal{background:var(--green);color:#fff;border-radius:22px;padding:18px}.calcTotal .sub{color:#d9e7df}.calcNums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.calcNum{background:rgba(255,255,255,.1);border-radius:14px;padding:10px}.calcNum b{display:block;font-size:18px}.calcNum small{font-size:10px;color:#d9e7df}
.calcSearch{display:flex;gap:8px}.calcSearch input{flex:1}.calcSearch button{border:0;background:var(--green);color:#fff;border-radius:14px;padding:0 15px;font-weight:850}
.calcItem{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.calcItem:last-child{border-bottom:0}.calcItemMain{flex:1}.calcItemMain b{font-size:13px}.calcItemMain small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.qty{width:58px!important;padding:8px!important;text-align:center}.remove{border:0;background:#fff1ef;color:var(--danger);border-radius:10px;padding:8px;font-weight:800}
.foodResult{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}.foodResult:last-child{border-bottom:0}.foodResult .emoji{width:42px;height:42px;border-radius:13px;background:var(--mint);display:grid;place-items:center;font-size:21px}.foodResultMain{flex:1}.foodResultMain b{font-size:13px}.foodResultMain small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.foodResult button{border:0;background:var(--green);color:#fff;border-radius:10px;padding:8px 10px;font-weight:800;font-size:11px}
@media(max-width:380px){.nutriGrid{gap:5px}.calcNums{gap:5px}}

.overTarget{font-weight:900}

.overTarget{font-weight:900}
.mealLogResult{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.mealLogResult:last-child{border-bottom:0}
.mealLogResult .foodResultMain{flex:1}
.mealLoggedLine{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}
.mealLoggedLine:last-child{border-bottom:0}
.mealLoggedLine .foodResultMain{flex:1}

.mealAddBtn{
  min-width:76px;
  position:relative;
  transition:transform .14s ease, background-color .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.mealAddBtn.adding{
  transform:scale(.88);
  opacity:.72;
}
.mealAddBtn.added{
  background:#2d8060!important;
  transform:scale(1.03);
  box-shadow:0 4px 12px rgba(16,67,48,.18);
  pointer-events:none;
}
.mealAddBtn .addCheck{display:none}
.mealAddBtn.added .addText{display:none}
.mealAddBtn.added .addCheck{display:inline}
.calcAddBtn{
  min-width:68px;
  transition:transform .14s ease, background-color .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.calcAddBtn.adding{
  transform:scale(.88);
  opacity:.72;
}
.calcAddBtn.added{
  background:#2d8060!important;
  transform:scale(1.03);
  box-shadow:0 4px 12px rgba(16,67,48,.18);
  pointer-events:none;
}
.calcAddBtn .addCheck{display:none}
.calcAddBtn.added .addText{display:none}
.calcAddBtn.added .addCheck{display:inline}

.menuModalBack{position:fixed;inset:0;background:rgba(11,35,25,.48);z-index:120;display:none;align-items:flex-end;justify-content:center}
.menuModalBack.open{display:flex}
.menuModal{width:min(520px,100%);background:var(--cream);border-radius:28px 28px 0 0;padding:20px 18px 28px;box-shadow:0 -15px 50px rgba(0,0,0,.2)}
.menuModalHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.menuModalHead h2{margin:0;font-size:25px}
.menuGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}
.menuItem{border:1px solid var(--line);background:#fff;border-radius:18px;padding:17px;text-align:left;cursor:pointer}
.menuItem span{display:block;font-size:25px;margin-bottom:7px}
.menuItem b{display:block;font-size:15px;color:var(--green)}
.menuItem small{display:block;color:var(--muted);margin-top:3px;font-size:10px}
.menuClose{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--green);font-size:22px}
/* ============================================================
   SMART ANIMATED FOOTER — DeepSeek footer structure
   ============================================================ */

.footer-wrap{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  width:calc(100% - 20px);
  max-width:480px;
  z-index:30;
}

.bottom{
  position:relative;
  width:100%;
  height:72px;
  background:#0d4935;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:0 8px;
  box-shadow:0 12px 30px rgba(13,73,53,.35);
}

/* Small page-colour cut-out */
.notch{
  position:absolute;
  top:-22px;
  left:0;
  width:66px;
  height:66px;
  border-radius:50%;
  background:#f7f6ef;
  transition:left .5s cubic-bezier(.34,1.2,.4,1);
  pointer-events:none;
  z-index:3;
}

/* Active bubble */
.activeBubble{
  position:absolute;
  top:-19px;
  left:0;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:left .5s cubic-bezier(.34,1.2,.4,1);
  z-index:10;
  pointer-events:none;
}

.bubble-icon{
  width:46px;
  height:46px;
  border-radius:50%;
  background:#0d4935;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f7f6ef;
  box-shadow:0 4px 12px rgba(13,73,53,.5);
}

.bubble-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Nav buttons */
.nav{
  position:relative;
  flex:1;
  height:72px;
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0;
  gap:3px;
  z-index:2;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}

.navIcon{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f7f6ef;
  transition:opacity .2s ease;
}

.navIcon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.navLabel{
  font-size:10px;
  font-weight:700;
  color:#f7f6ef;
  letter-spacing:.1px;
  opacity:.85;
  transition:opacity .2s ease;
}

.nav.on .navLabel{
  opacity:1;
  transform:translateY(-9px);
}

.nav.on .navIcon{
  visibility:hidden;
}

.nav.moving .navIcon{
  animation:navMove .4s cubic-bezier(.34,1.2,.4,1);
}

@keyframes navMove{
  0%{transform:scale(.85)}
  55%{transform:scale(1.10)}
  100%{transform:scale(1)}
}

@media(max-width:520px){
  .footer-wrap{
    width:calc(100% - 20px);
  }
  .bottom{
    height:72px;
  }
  .nav{
    height:72px;
  }
}