/* کالری‌شمار — یک پالت ثابت، موبایل‌اول، راست‌چین
   مهارت‌ها: mobile-ui-ux (یک پالت، سلسله‌مراتب روشن، هدف‌های لمسی بزرگ،
   حالت خالی صادقانه، کنتراست بالا) + mobile_state_verification
   (هندسه ثابت در همه حالت‌ها؛ هیچ ردیف تمام‌عرضی فقط برای یک حالت اضافه نمی‌شود) */
:root{
  --emerald:#0f766e; --emerald2:#14b8a6; --orange:#f97316; --orange2:#fb923c;
  --bg:#f4f6f3; --card:#ffffff; --text:#12201d; --muted:#5b6b66; --line:#e2e8e3;
  --red:#dc2626; --radius:22px; --shadow:0 10px 30px rgba(15,50,45,.10);
  --tap:48px;
}
[data-theme="dark"]{
  --bg:#0b1210; --card:#15201d; --text:#f2f7f4; --muted:#a7b8b0; --line:#24332e;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{font-size:clamp(15px,4vw,17px)}
body{margin:0;font-family:Vazirmatn,"Vazirmatn",Tahoma,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.8}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:var(--emerald)}
.wrap{max-width:760px;margin:0 auto;padding:16px 16px calc(96px + env(safe-area-inset-bottom))}
/* سربرگ: یک سلسله‌مراتب، یک پیام اصلی */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.brand{min-width:0}
.brand>div{min-width:0}
.brand h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:52px;height:52px;border-radius:16px;box-shadow:var(--shadow);display:block}
.brand h1{font-size:1.35rem;margin:0;line-height:1.4}
.brand p{margin:0;color:var(--muted);font-size:.85rem}
.iconbtn{min-width:var(--tap);height:var(--tap);border-radius:14px;border:1px solid var(--line);
  background:var(--card);color:var(--text);font-size:1.1rem;display:inline-grid;place-items:center;padding:0;line-height:1}
.iconbtn svg{display:block;width:22px;height:22px}
/* هیرو: گرادیان عمیق + هاله نارنجی + حلقه گرادیانی؛ باقی‌مانده برجسته، نه یک خط کوچک */
.hero{background:linear-gradient(135deg,#064e3b,#0f766e 45%,#0d9488 75%,#14b8a6);color:#fff;border-radius:32px;
  padding:22px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;top:-90px;left:-70px;
  background:radial-gradient(circle,rgba(251,146,60,.55),transparent 70%)}
.hero::after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;bottom:-90px;right:-50px;
  border:22px solid rgba(255,255,255,.08)}
.heroTop{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:1;margin-bottom:14px}
.heroDate{font-size:.88rem;background:rgba(255,255,255,.16);padding:6px 13px;border-radius:999px}
.heroPill{font-size:.82rem;font-weight:700;background:rgba(249,115,22,.92);color:#fff;padding:6px 13px;border-radius:999px;white-space:nowrap}
.heroMain{display:flex;gap:18px;align-items:center;position:relative;z-index:1}
.heroText{min-width:0}
.hero h2{margin:0 0 4px;font-size:1.35rem}
.hero p{margin:0;opacity:.95;font-size:.95rem}
.heroRemain{display:inline-block;margin-top:10px !important;font-size:1.1rem;font-weight:800;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:8px 14px;border-radius:14px}
.ring{flex:0 0 140px;width:140px;height:140px;position:relative}
.ring svg{width:140px;height:140px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:12;stroke-linecap:round}
.ring .bg{stroke:rgba(255,255,255,.22)}
.ring .fg{stroke:url(#ringGrad);transition:stroke-dashoffset .6s ease;filter:drop-shadow(0 0 6px rgba(249,115,22,.6))}
.ring .label{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .label b{font-size:1.5rem;line-height:1.2}
.ring .label span{font-size:.75rem;opacity:.9}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-size:1.2rem}
.stat span{color:var(--muted);font-size:.8rem}
.stat.warn b{color:var(--red)}
/* انتخابگر شمسی: سه سلکت + دکمه امروز، همه لمسی */
.jalaliRow{align-items:stretch}
.jalaliRow select{flex:1 1 0;min-width:0}
.jalaliRow .iconbtn{flex:0 0 var(--tap)}
.jalaliRow .btn{flex:0 0 auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:14px;box-shadow:var(--shadow)}
.card h3{margin:0 0 10px;font-size:1.05rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>*{flex:1 1 auto}
input[type="text"],input:not([type]),input[type="email"],input[type="password"],input[type="number"],input[type="date"],select{
  width:100%;min-height:var(--tap);border:1px solid var(--line);border-radius:14px;padding:10px 12px;
  background:var(--bg);color:var(--text)}
input:focus,select:focus,button:focus-visible{outline:3px solid rgba(249,115,22,.45);outline-offset:1px}
.btn{min-height:var(--tap);border:0;border-radius:14px;padding:10px 16px;font-weight:700;
  background:linear-gradient(135deg,var(--emerald),var(--emerald2));color:#fff}
.btn.orange{background:linear-gradient(135deg,var(--orange),var(--orange2))}
.btn.ghost{background:transparent;color:var(--emerald);border:1px solid var(--line)}
.btn.danger{background:#fff1f1;color:var(--red);border:1px solid #fecaca}
.btn:disabled{opacity:.55;cursor:not-allowed}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.chip{flex:0 0 auto;min-height:40px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);padding:6px 14px}
.chip.on{background:var(--emerald);color:#fff;border-color:var(--emerald)}
/* ردیف غذا: کل ردیف قابل لمس است، نه فقط یک دکمه کوچک */
.food{display:flex;gap:12px;align-items:center;width:100%;text-align:right;border:1px solid var(--line);
  background:var(--card);border-radius:18px;padding:12px;min-height:64px}
.food:hover{border-color:var(--emerald2)}
.food .emoji{font-size:1.6rem}
.food .meta{flex:1;min-width:0}
.food .meta b{display:block;line-height:1.4}
.food .meta span{color:var(--muted);font-size:.82rem}
.food .kcal{font-weight:800;color:var(--orange)}
.food .add{flex:0 0 44px;height:44px;border-radius:12px;border:0;background:var(--emerald);color:#fff;display:grid;place-items:center}
.food .add svg{width:22px;height:22px}
.meal .x svg{width:18px;height:18px}
.meal .x{display:grid;place-items:center}
.meal{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.meal:last-child{border-bottom:0}
.meal .x{min-width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--red)}
.empty{border:1px dashed var(--line);border-radius:16px;padding:18px;text-align:center;color:var(--muted)}
/* حالت خالی صادقانه: یک خط، وقتی داده آمد محو می‌شود — نه پاراگراف توضیحی */
.muted{color:var(--muted);font-size:.9rem}
.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:14px;padding:10px 12px}
.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;border-radius:14px;padding:10px 12px}
label{display:block;font-size:.9rem;margin:10px 0 4px;font-weight:600}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:520px){.formgrid{grid-template-columns:1fr}.heroMain{gap:12px}.ring{flex:0 0 118px;width:118px;height:118px}.ring svg{width:118px;height:118px}.stats{grid-template-columns:1fr 1fr 1fr}}
/* ناوبری پایین: یک ردیف مشترک در همه حالت‌های لاگین‌شده؛ حالت لاگین‌نشده آن را ندارد (نه اینکه خالی بماند) */
.bottomnav{position:fixed;right:0;left:0;bottom:0;z-index:20;background:var(--card);border-top:1px solid var(--line);
  display:flex;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.bottomnav button{flex:1;border:0;background:transparent;color:var(--muted);min-height:48px;border-radius:12px;font-size:.78rem}
.bottomnav button.on{color:var(--emerald);font-weight:800;background:#ecfdf5}
[data-theme="dark"] .bottomnav button.on{background:#12332e}
.hidden{display:none !important}
.bar{height:12px;background:var(--line);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--emerald),var(--emerald2));transition:width .5s ease}
.bar.over>i{background:linear-gradient(90deg,var(--red),var(--orange))}
canvas{width:100%;max-height:220px}
.water{display:flex;gap:8px;flex-wrap:wrap}
.glass{width:44px;height:52px;border-radius:10px 10px 16px 16px;border:2px solid var(--emerald2);background:transparent;font-size:1.2rem}
.glass.full{background:#bae6fd;border-color:#38bdf8}
.note{font-size:.82rem;color:var(--muted)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.view{animation:fade .25s ease}

/* فونت ایرانی برای تیترها: لاله‌زار برای هویت، وزیرمتن برای اعداد و متن */
.brand h1,.hero h2,.card h3{font-family:Lalezar,Vazirmatn,Tahoma,sans-serif;font-weight:400;letter-spacing:0}
.brand h1{font-size:1.6rem}
.hero h2{font-size:1.6rem}
.card h3{font-size:1.3rem;display:flex;align-items:center;gap:8px}
.hicon{display:inline-flex;width:26px;height:26px;color:var(--emerald);flex:0 0 auto}
.hicon svg{width:26px;height:26px}
.logo{object-fit:cover}
.iconbtn svg{width:22px;height:22px}
.heroPill svg{width:16px;height:16px;vertical-align:-3px}
.bottomnav button{display:flex;flex-direction:column;align-items:center;gap:2px}
.bottomnav button svg{width:20px;height:20px}
/* فاصله غذاها در صفحه غذاها و صفحه اصلی */
#allFoods{display:flex;flex-direction:column;gap:14px}
#foodList{gap:12px}
.food .foodicon{flex:0 0 44px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#ecfdf5;color:var(--emerald)}
.food .foodicon svg{width:26px;height:26px}
/* تامبنیل غذا: مربع گرد با گرادیان دسته و آیکون سفید بزرگ، مثل عکس بندانگشتی */
.food .thumb{flex:0 0 64px;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.12);flex-shrink:0}
.food .thumb svg{width:38px;height:38px}
/* لیوان آب: یک سطر، هشت لیوان هم‌عرض، عدد روی هر لیوان */
.water{display:flex;gap:6px;flex-wrap:nowrap}
.glass{flex:1 1 0;min-width:0;width:auto;height:58px;border-radius:12px 12px 16px 16px;border:2px solid var(--emerald2);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px 0}
.glass svg{width:22px;height:22px;color:var(--emerald2)}
.glass.full svg{color:#0284c7}
.glass .gnum{font-size:.78rem;font-weight:800;line-height:1}

/* دکمه خروج: فقط آیکون نیست؛ متن «خروج» + رنگ قرمز ملایم تا با دکمه برگشت اشتباه نشود */
.logoutBtn{display:inline-flex;align-items:center;gap:7px;min-height:48px;padding:0 15px;border-radius:14px;border:2px solid #dc2626;background:#fef2f2;color:#dc2626;font-weight:800;box-shadow:0 2px 10px rgba(220,38,38,.15)}
.logoutBtn svg{width:22px;height:22px}
[data-theme="dark"] .logoutBtn{background:#3a1515;border-color:#7f1d1d;color:#fca5a5}

/* توست موبایلی: پایین صفحه، بالای ناوبری، نرم می‌آید و خودش می‌رود */
.toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translate(-50%,16px);z-index:50;
  max-width:calc(100vw - 32px);background:#12201d;color:#fff;padding:12px 20px;border-radius:999px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);font-size:.92rem;font-weight:600;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:#0f766e}
.toast.error{background:#dc2626}

/* موبایل: تیتر، خروج و دارک‌مود توی هم نروند */
@media(max-width:520px){
  .wrap{padding:12px 12px calc(96px + env(safe-area-inset-bottom))}
  .topbar{gap:8px}
  .logo{width:44px;height:44px;border-radius:14px}
  .brand{gap:8px}
  .brand h1{font-size:1.35rem}
  .brand p{display:none}
  .topbar .row{gap:8px}
  .iconbtn{min-width:44px;height:44px}
  .logoutBtn{min-height:44px;padding:0 11px}
  .logoutFull{display:none}
}

/* ماکروها: چهار کارت جدا با آیکون و رنگ خودش، نه یک خط نقطه‌دار */
.macros{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.macro{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:16px;text-align:center}
.macro.protein{background:#fef2f2;color:#dc2626}
.macro.carbs{background:#fffbeb;color:#d97706}
.macro.fat{background:#eff6ff;color:#2563eb}
.macro.bmi{background:#ecfdf5;color:#0f766e}
.macroIcon{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.75)}
.macroIcon svg{width:22px;height:22px}
.macroVal{font-size:1.05rem;line-height:1.3}
.macroVal small{font-size:.72rem;font-weight:600;opacity:.8;margin-right:2px}
.macroName{font-size:.78rem;font-weight:700;opacity:.85}
[data-theme="dark"] .macro.protein{background:#3a1515}
[data-theme="dark"] .macro.carbs{background:#3a2a08}
[data-theme="dark"] .macro.fat{background:#17233a}
[data-theme="dark"] .macro.bmi{background:#12332e}
[data-theme="dark"] .macroIcon{background:rgba(0,0,0,.25)}
@media(max-width:420px){.macros{gap:8px}.macro{padding:10px 4px}.macroVal{font-size:.95rem}}

/* تقویم شمسی بازشونده: مثل دیت‌پیکر میلادی، ولی جلالی */
.dateBtn{flex:1 1 auto;font-weight:800}
.calPopup{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px;margin-top:10px;box-shadow:var(--shadow)}
.calHead{display:flex;align-items:center;gap:8px}
.calTitle{display:flex;gap:8px;flex:1}
.calTitle select{flex:1}
.calGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px;text-align:center}
.calWeek span{font-size:.72rem;color:var(--muted);font-weight:700;padding:4px 0}
.calDay{min-height:42px;border-radius:12px;border:0;background:transparent;color:var(--text);font-weight:600}
.calDay:hover{background:var(--bg)}
.calDay.today{border:2px solid var(--orange)}
.calDay.selected{background:var(--emerald);color:#fff}
.calDay.empty{background:transparent}

/* BMR و TDEE و هدف: سه کارت جدا، هدف برجسته، نه یک خط نقطه‌دار */
.goalCards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.goalCard{display:flex;flex-direction:column;gap:4px;padding:14px 10px;border-radius:18px;background:var(--bg);border:1px solid var(--line);text-align:center}
.goalCard.highlight{background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff;border-color:transparent}
.goalName{font-size:.8rem;font-weight:700;opacity:.85}
.goalCard b{font-size:1.25rem;line-height:1.3}
.goalUnit{font-size:.72rem;opacity:.8}
@media(max-width:420px){.goalCards{gap:8px}.goalCard{padding:12px 6px}.goalCard b{font-size:1.05rem}}

/* موبایل: همه‌چیز یک درجه کوچک‌تر، بدون اینکه دکمه‌ها زیر ۴۴ پیکسل بروند */
@media(max-width:520px){
  html{font-size:14px}
  .wrap{padding:10px 10px calc(84px + env(safe-area-inset-bottom))}
  .card{padding:14px;border-radius:18px}
  .card h3{font-size:1.15rem}
  .hero{padding:16px;border-radius:24px}
  .hero h2{font-size:1.3rem}
  .hero p{font-size:.88rem}
  .heroMain{gap:10px}
  .ring{flex:0 0 100px;width:100px;height:100px}
  .ring svg{width:100px;height:100px}
  .ring .label b{font-size:1.25rem}
  .heroRemain{font-size:1rem}
  .stat{padding:10px 6px}
  .stat b{font-size:1.05rem}
  .food{padding:10px;min-height:60px}
  .food .thumb{flex:0 0 56px;width:56px;height:56px;border-radius:15px}
  .food .thumb svg{width:32px;height:32px}
  .food b{font-size:.95rem}
  .chip{min-height:38px;padding:5px 12px;font-size:.88rem}
  .btn{min-height:44px;padding:9px 14px}
  .glass{width:40px;height:48px}
  .calDay{min-height:38px}
  .macro{padding:10px 4px}
  .goalCard{padding:11px 6px}
  .tabs button{padding:9px 6px;font-size:.88rem}
}
@media(max-width:360px){
  html{font-size:13.5px}
  .ring{flex:0 0 92px;width:92px;height:92px}
  .ring svg{width:92px;height:92px}
  .food .thumb{flex:0 0 50px;width:50px;height:50px}
}