@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#151a17;
  --bg-2:#1e2620;
  --sage:#8fae8a;
  --sage-dim:#63795f;
  --amber:#d9944b;
  --cream:#ede8dd;
  --cream-dim:#a9a294;
  --line:rgba(237,232,221,0.10);
  --danger:#c96b5a;
  --ok:#7fae7c;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--cream);
  font-family:'Inter',-apple-system,sans-serif; min-height:100vh;
  -webkit-font-smoothing:antialiased;}

.wrap{max-width:520px;margin:0 auto;padding:0 0 100px 0;}

header{padding:24px 20px 14px; position:sticky; top:0; z-index:20;
  background:linear-gradient(var(--bg) 85%, transparent);}
@media (display-mode: standalone){
  header{padding-top:calc(10px + env(safe-area-inset-top));}
}
.eyebrow{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sage); font-weight:600; margin-bottom:4px;}
h1{font-family:'Fraunces',serif; font-weight:600; font-size:26px; line-height:1.05;
  margin:0; letter-spacing:-0.01em;}

/* Tab bar */
.tabbar{position:fixed; bottom:0; left:0; right:0; display:flex;
  background:var(--bg-2); border-top:1px solid var(--line); z-index:50;
  padding-bottom:env(safe-area-inset-bottom);}
.tabbar button{flex:1; background:none; border:none; color:var(--cream-dim);
  font-family:'Inter',sans-serif; font-size:11px; font-weight:600; padding:12px 4px 10px;
  display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;}
.tabbar button svg{width:22px; height:22px;}
.tabbar button.active{color:var(--sage);}

.tabpage{display:none; padding:0 20px;}
.tabpage.active{display:block;}

/* Card generico */
.card{background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:16px; margin-bottom:12px;}
.card-title{font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sage); font-weight:600; margin-bottom:10px;}

/* Budget ring */
.budget-card{display:flex; align-items:center; gap:18px;}
.budget-num{font-family:'Fraunces',serif; font-size:34px; font-weight:600; line-height:1;}
.budget-num small{font-family:'Inter',sans-serif; font-size:13px; font-weight:500;
  color:var(--cream-dim); display:block; margin-top:2px;}
.budget-bar-wrap{flex:1;}
.budget-bar{height:10px; background:var(--bg); border-radius:6px; overflow:hidden; margin-bottom:6px;}
.budget-bar-fill{height:100%; background:var(--sage); border-radius:6px; transition:width .3s;}
.budget-bar-fill.over{background:var(--danger);}
.budget-legend{font-size:12px; color:var(--cream-dim); display:flex; justify-content:space-between;}

/* Macro */
.macro-row{display:flex; gap:12px;}
.macro-item{flex:1;}
.macro-bar{height:6px; background:var(--bg); border-radius:4px; overflow:hidden; margin-bottom:6px;}
.macro-fill{height:100%; border-radius:4px; transition:width .3s;}
.macro-fill.protein{background:#7fae7c;}
.macro-fill.carbs{background:#d9944b;}
.macro-fill.fat{background:#c98a5a;}
.macro-label{display:flex; justify-content:space-between; font-size:11.5px; color:var(--cream-dim);}
.macro-label b{color:var(--cream); font-weight:600;}

/* Date nav */
.date-nav{display:flex; align-items:center; justify-content:space-between;
  margin:10px 0 14px;}
.date-nav button{background:var(--bg-2); border:1px solid var(--line); color:var(--cream);
  width:36px; height:36px; border-radius:10px; font-size:16px; cursor:pointer;}
.date-nav .date-label{font-weight:600; font-size:14.5px;}

/* Meal slots */
.meal-slot{margin-bottom:14px;}
.meal-slot-head{display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px; padding:0 2px;}
.meal-slot-title{font-family:'Fraunces',serif; font-size:16px; font-weight:600;}
.meal-slot-kcal{font-size:12.5px; color:var(--cream-dim);}
.food-item{display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  padding:11px 14px; margin-bottom:6px; gap:10px;}
.food-item-name{font-size:14px; font-weight:500; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.food-item-meta{font-size:12px; color:var(--cream-dim); flex-shrink:0;}
.food-item-del{background:none; border:none; color:var(--cream-dim);
  font-size:16px; cursor:pointer; padding:2px 4px; flex-shrink:0;}
.add-btn{width:100%; background:none; border:1px dashed var(--line); color:var(--sage);
  border-radius:12px; padding:11px; font-size:13.5px; font-weight:600; cursor:pointer;
  margin-top:2px;}

/* Activity */
.activity-item{display:flex; align-items:center; gap:12px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  padding:11px 14px; margin-bottom:6px;}
.activity-icon{width:32px; height:32px; border-radius:50%; background:rgba(143,174,138,0.15);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px;}
.activity-body{flex:1; min-width:0;}
.activity-name{font-size:13.5px; font-weight:600;}
.activity-meta{font-size:11.5px; color:var(--cream-dim);}

/* Stats grid */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.stat-box{background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:14px;}
.stat-box .n{font-family:'Fraunces',serif; font-size:22px; font-weight:600;}
.stat-box .l{font-size:11.5px; color:var(--cream-dim); margin-top:2px;}
.stat-box .trend{font-size:11px; margin-top:4px; font-weight:600;}
.trend.up{color:var(--danger);} .trend.down{color:var(--ok);} .trend.flat{color:var(--cream-dim);}

/* Chart placeholder (canvas) */
.chart-wrap{background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:16px; margin-bottom:12px;}
canvas{width:100%; display:block;}

/* Buttons */
.btn{padding:13px; border-radius:12px; border:none; font-size:14.5px;
  font-weight:600; font-family:'Inter',sans-serif; cursor:pointer; width:100%;}
.btn-primary{background:var(--amber); color:#241a12;}
.btn-ghost{background:transparent; color:var(--cream-dim); border:1px solid var(--line);}
.btn-sage{background:var(--sage); color:#12180f;}

/* Modal / sheet */
.sheet-overlay{position:fixed; inset:0; background:rgba(10,12,10,0.7);
  backdrop-filter:blur(2px); z-index:600; display:flex; align-items:flex-end;
  justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s;}
.sheet-overlay.show{opacity:1; pointer-events:auto;}
.sheet{width:100%; max-width:520px; background:var(--bg-2);
  border-radius:20px 20px 0 0; padding:22px 20px calc(20px + env(safe-area-inset-bottom));
  border:1px solid var(--line); border-bottom:none;
  transform:translateY(16px); transition:transform .25s; max-height:80vh; overflow-y:auto;}
.sheet-overlay.show .sheet{transform:translateY(0);}
.sheet-title{font-family:'Fraunces',serif; font-size:19px; font-weight:600; margin:0 0 14px;}
.sheet-close{position:absolute; top:16px; right:18px; background:none; border:none;
  color:var(--cream-dim); font-size:20px; cursor:pointer;}

.field{margin-bottom:12px;}
.field label{display:block; font-size:12px; color:var(--cream-dim); margin-bottom:5px; font-weight:600;}
.field input, .field select{width:100%; background:var(--bg); border:1px solid var(--line);
  color:var(--cream); border-radius:10px; padding:11px 12px; font-size:14.5px;
  font-family:'Inter',sans-serif;}
.field-row{display:flex; gap:10px;}
.field-row .field{flex:1;}

.slot-picker{display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;}
.slot-picker button{flex:1; min-width:70px; background:var(--bg); border:1px solid var(--line);
  color:var(--cream-dim); border-radius:10px; padding:9px 6px; font-size:12.5px;
  font-weight:600; cursor:pointer;}
.slot-picker button.active{background:var(--sage); color:#12180f; border-color:var(--sage);}

.search-results{max-height:200px; overflow-y:auto; margin:6px 0 12px;}
.search-result-item{padding:10px 12px; border-bottom:1px solid var(--line);
  cursor:pointer; font-size:13.5px; display:flex; justify-content:space-between;}
.search-result-item:active{background:var(--bg);}
.search-result-item .kcal{color:var(--cream-dim); font-size:12px;}

.empty-state{text-align:center; padding:30px 10px; color:var(--cream-dim); font-size:13.5px;}

.camera-btn{position:fixed; bottom:78px; right:20px; width:54px; height:54px;
  border-radius:50%; background:var(--amber); border:none; color:#241a12;
  font-size:22px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,0.35); cursor:pointer; z-index:40;}

.loading-spinner{display:inline-block; width:16px; height:16px;
  border:2px solid rgba(237,232,221,0.2); border-top-color:var(--cream);
  border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.toast{position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(10px);
  background:var(--bg-2); border:1px solid var(--line); color:var(--cream);
  padding:10px 18px; border-radius:12px; font-size:13px; z-index:700;
  opacity:0; transition:.25s; pointer-events:none;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}