:root{
  --bg:#0e1116; --card:#171b22; --card2:#1e232c; --line:#262c37;
  --txt:#eef1f6; --sub:#9aa4b2; --pri:#4ade80; --pri2:#22c55e;
  --carbs:#f5a623; --protein:#5b9dff; --fat:#ff6b9d; --danger:#ff5a5a;
  --radius:20px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
  overscroll-behavior-y:none;
}
.hidden{display:none !important}
.screen{max-width:520px;margin:0 auto;min-height:100vh;padding:0 16px}
.view{padding-top:calc(12px + env(safe-area-inset-top))}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0 6px}
.topbar.dark{padding-top:calc(12px + env(safe-area-inset-top))}
.greeting{font-size:20px;font-weight:800}
.greeting.light{color:#fff}
.date-nav{display:flex;align-items:center;gap:10px;color:var(--sub);font-size:14px;margin-top:2px}
.date-nav span{min-width:70px;text-align:center;font-weight:600}
.icon-btn{background:none;border:none;color:var(--txt);font-size:16px;font-weight:600;padding:8px;cursor:pointer;border-radius:12px}
.icon-btn.round{background:var(--card);width:44px;height:44px;font-size:18px;display:grid;place-items:center}
.icon-btn.light{color:#fff}

/* Calorie card */
.calorie-card{background:var(--card);border-radius:var(--radius);padding:22px 18px;margin-top:8px;display:flex;align-items:center;gap:18px}
.ring-wrap{position:relative;width:150px;height:150px;flex:0 0 auto}
.ring{width:150px;height:150px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--card2);stroke-width:14}
.ring-fg{fill:none;stroke:url(#g);stroke:var(--pri);stroke-width:14;stroke-linecap:round;
  stroke-dasharray:540;stroke-dashoffset:540;transition:stroke-dashoffset .6s ease}
.ring-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring-num{font-size:34px;font-weight:800;line-height:1}
.ring-label{font-size:12px;color:var(--sub);margin-top:4px}
.cal-stats{display:flex;flex-direction:column;gap:14px;flex:1}
.cal-stat{display:flex;align-items:center;gap:10px}
.cal-stat b{font-size:18px}
.cal-stat small{display:block;color:var(--sub);font-size:12px}
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.dot.in{background:var(--sub)} .dot.eat{background:var(--pri)} .dot.burn{background:var(--protein)}

/* Macros */
.macros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.macro{background:var(--card);border-radius:16px;padding:12px}
.macro-bar{height:6px;border-radius:4px;background:var(--card2);overflow:hidden;margin-bottom:8px}
.macro-bar span{display:block;height:100%;width:0;border-radius:4px;transition:width .5s ease}
.macro[data-macro=carbs] .macro-bar span{background:var(--carbs)}
.macro[data-macro=protein] .macro-bar span{background:var(--protein)}
.macro[data-macro=fat] .macro-bar span{background:var(--fat)}
.macro-label{font-size:12px;color:var(--sub)}
.macro-val{font-size:13px;margin-top:2px}
.macro-val b{font-size:15px}

/* Water */
.water-card{background:var(--card);border-radius:16px;padding:14px 16px;margin-top:12px}
.water-head{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.water-glasses{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.glass{width:30px;height:38px;border-radius:6px 6px 8px 8px;border:2px solid var(--protein);
  opacity:.35;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.glass.full{opacity:1;background:linear-gradient(180deg,transparent 20%,var(--protein) 20%)}

/* Meals */
.meals{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.meal{background:var(--card);border-radius:16px;overflow:hidden}
.meal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer}
.meal-title{display:flex;align-items:center;gap:10px;font-weight:700}
.meal-title .emoji{font-size:20px}
.meal-kcal{color:var(--sub);font-size:13px;font-weight:600}
.meal-add{background:var(--pri);color:#052e16;border:none;width:30px;height:30px;border-radius:50%;
  font-size:20px;font-weight:700;cursor:pointer;display:grid;place-items:center;line-height:1}
.meal-items{border-top:1px solid var(--line)}
.food-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.food-item:last-child{border-bottom:none}
.food-item .fi-main{flex:1;min-width:0}
.food-item .fi-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.food-item .fi-sub{font-size:12px;color:var(--sub)}
.food-item .fi-kcal{font-weight:700;font-size:14px}
.food-item .fi-del{background:none;border:none;color:var(--sub);font-size:18px;cursor:pointer;padding:4px}
.meal-empty{padding:12px 16px;color:var(--sub);font-size:13px;border-top:1px solid var(--line)}

/* Bottom nav */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;
  background:rgba(20,24,31,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  display:flex;justify-content:space-around;align-items:center;padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:40}
.nav-item{background:none;border:none;color:var(--sub);font-size:11px;display:flex;flex-direction:column;
  align-items:center;gap:3px;cursor:pointer;font-weight:600}
.nav-item span{font-size:20px}
.nav-item.active{color:var(--pri)}
.nav-item.fab{background:var(--pri);color:#052e16;width:56px;height:56px;border-radius:50%;
  font-size:32px;margin-top:-24px;box-shadow:0 8px 20px rgba(74,222,128,.4);justify-content:center}

/* Search */
.search-box{margin:8px 0 12px}
.search-box input{width:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;color:var(--txt);font-size:16px;outline:none}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{flex:1;background:var(--card);border:none;color:var(--sub);padding:10px;border-radius:12px;font-weight:600;cursor:pointer}
.tab.active{background:var(--pri);color:#052e16}
.search-status{color:var(--sub);font-size:13px;padding:6px 2px;min-height:20px}
.results{display:flex;flex-direction:column;gap:8px;padding-bottom:120px}
.result{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:12px 14px;cursor:pointer;border:1px solid transparent}
.result:active{border-color:var(--pri)}
.result-img{width:44px;height:44px;border-radius:10px;background:var(--card2);object-fit:cover;flex:0 0 auto;display:grid;place-items:center;font-size:22px}
.result-main{flex:1;min-width:0}
.result-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-sub{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-kcal{text-align:right;font-weight:700;font-size:14px}
.result-kcal small{display:block;color:var(--sub);font-weight:400;font-size:11px}

/* Scanner */
.scan{background:#000;min-height:100vh}
#reader{width:100%;max-width:520px;margin:20px auto}
#reader video{border-radius:16px}
.scan-hint{text-align:center;color:#fff;opacity:.8;margin-top:16px;font-size:14px}

/* Sheet */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.sheet-card{position:relative;width:100%;max-width:520px;margin:0 auto;background:var(--card);
  border-radius:24px 24px 0 0;padding:12px 18px calc(20px + env(safe-area-inset-bottom));animation:up .3s ease}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-grip{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 14px}
.sheet-name{font-size:18px;font-weight:800}
.sheet-brand{color:var(--sub);font-size:13px}
.sheet-cal{display:flex;align-items:baseline;gap:6px;margin:14px 0 6px}
.sheet-cal-num{font-size:40px;font-weight:800;color:var(--pri)}
.sheet-macros{display:flex;gap:16px;margin-bottom:14px;font-size:13px;color:var(--sub)}
.sheet-macros b{color:var(--txt)}
.portion-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.sheet-actions{display:flex;gap:12px}

/* Onboarding */
.onboarding{display:grid;place-items:center;padding-top:calc(20px + env(safe-area-inset-top))}
.ob-card{background:var(--card);border-radius:24px;padding:26px 20px;width:100%;margin-top:20px}
.ob-logo{font-size:52px;text-align:center}
.ob-card h1{text-align:center;margin:6px 0 2px;font-size:28px}
.ob-sub{text-align:center;color:var(--sub);margin:0 0 22px}
.ob-step label{display:block;font-size:13px;color:var(--sub);margin-bottom:8px;font-weight:600}

/* Forms */
.chips{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.chip{flex:1;min-width:0;background:var(--card2);border:1px solid var(--line);color:var(--sub);
  padding:12px 8px;border-radius:12px;font-weight:600;cursor:pointer;font-size:14px}
.chip.active{background:var(--pri);color:#052e16;border-color:var(--pri)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--sub);margin-bottom:6px;font-weight:600}
input,select{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:12px;
  padding:12px;color:var(--txt);font-size:16px;outline:none;font-family:inherit}
input:focus,select:focus{border-color:var(--pri)}
select{appearance:none}

/* Buttons */
.btn-primary{background:var(--pri);color:#052e16;border:none;border-radius:14px;padding:14px;
  font-size:16px;font-weight:800;cursor:pointer;flex:1}
.btn-primary.big{width:100%;margin-top:10px}
.btn-ghost{background:var(--card2);color:var(--txt);border:1px solid var(--line);border-radius:14px;
  padding:14px;font-weight:700;cursor:pointer;flex:1}
.btn-danger{background:none;color:var(--danger);border:1px solid var(--danger);border-radius:14px;
  padding:12px;font-weight:700;cursor:pointer;width:100%;margin-top:12px}

/* Settings */
.settings{margin-top:10px}
.set-group{background:var(--card);border-radius:16px;padding:16px;margin-bottom:14px}
.set-group h3{margin:0 0 14px;font-size:15px}
.hint{color:var(--sub);font-size:12px}
.custom-form{margin-top:8px}

/* Toast */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--card2);
  color:var(--txt);padding:12px 20px;border-radius:30px;font-size:14px;font-weight:600;z-index:80;
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.5);animation:pop .25s ease}
@keyframes pop{from{transform:translateX(-50%) translateY(10px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--pri);border-radius:50%;
  animation:spin .8s linear infinite;display:inline-block;vertical-align:middle;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}