/* ===== חניס — עיצוב פרוטוטייפ ===== */
:root {
  --bg: #efe6d6;          /* שמנת חמה (אוט) */
  --card: #fbf6ee;        /* קרם רך — לא לבן */
  --card-2: #f6eee1;      /* קרם עמוק יותר לאזורים שקועים */
  --ink: #4a3f37;         /* חום אספרסו רך */
  --muted: #a4937e;       /* טאופ עמום */
  --line: #e6dac7;        /* חול רך למפרידים */
  --brand: #c68763;       /* טרקוטה עמומה / חימר */
  --brand-dark: #b0714d;  /* חימר עמוק */
  --brand-soft: #f3e4d7;  /* גוון חימר פסטלי לרקעים רכים */
  --olive: #8a986c;       /* מרווה רכה */
  --olive-soft: #e8ead6;  /* מרווה פסטלית */
  --gold: #d7b36b;        /* דבש */
  --shadow: 0 4px 18px rgba(120,90,55,.07);
  --shadow-lg: 0 12px 38px rgba(120,90,55,.13);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: "Heebo", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  direction: rtl;
  line-height: 1.5;
  overflow: hidden;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  box-shadow: 0 0 60px rgba(0,0,0,.06);
}

/* ===== Auth screen ===== */
#auth-screen {
  position: fixed; inset: 0; z-index: 500; background: linear-gradient(160deg, #f3ebdd 0%, #efe6d6 100%);
  display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto;
}
.auth-card {
  background: var(--card); border-radius: 26px; box-shadow: var(--shadow-lg);
  padding: 34px 26px 28px; max-width: 400px; width: 100%; text-align: center;
}
.auth-logo { font-size: 52px; }
.auth-card h1 { font-size: 30px; font-weight: 800; margin-top: 4px; color: var(--brand-dark); }
.auth-tag { color: var(--muted); font-size: 15px; margin: 2px 0 22px; }
.auth-tabs { display: flex; gap: 8px; background: var(--card-2); border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.auth-tab { flex: 1; background: none; border: none; padding: 10px; border-radius: 9px; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--muted); font-family: inherit; }
.auth-tab.on { background: var(--card); color: var(--brand-dark); box-shadow: var(--shadow); }
.auth-card input {
  width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 13px; border: 1.5px solid var(--line);
  font-size: 16px; font-family: inherit; text-align: right; margin-bottom: 11px; background: var(--card-2); color: var(--ink);
}
.auth-card input:focus { outline: none; border-color: var(--brand); }
.auth-card .btn-primary { margin-top: 6px; }
.auth-err { color: #c0392b; font-size: 14px; min-height: 18px; margin-top: 10px; }

/* ===== Header ===== */
.app-header {
  padding: 18px 20px 14px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  flex-shrink: 0;
}
.app-header { position: relative; }
.profile-btn { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,.18); border: none; width: 38px; height: 38px; border-radius: 50%; font-size: 19px; cursor: pointer; color: #fff; }
.app-header .brand { display: flex; align-items: center; gap: 9px; }
/* onboarding */
.ob-body { padding: 20px; }
.ob-body h2 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.ob-body p.sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.ob-body h4 { font-size: 15px; font-weight: 700; margin: 18px 0 10px; }
.skill-opts { display: flex; flex-direction: column; gap: 10px; }
.skill-opt { display: flex; align-items: center; gap: 13px; background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 13px 15px; cursor: pointer; }
.skill-opt.on { border-color: var(--brand); background: var(--brand-soft); }
.skill-opt .em { font-size: 28px; }
.skill-opt h5 { font-size: 16px; font-weight: 700; }
.skill-opt .d { font-size: 12.5px; color: var(--muted); }
.diet-opts { display: flex; flex-wrap: wrap; gap: 9px; }
.app-header .brand h1 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.app-header .brand .logo { font-size: 28px; }
.app-header .tagline { font-size: 13px; opacity: .92; margin-top: 2px; font-weight: 300; }
.screen-title { padding: 18px 20px 6px; }
.screen-title h2 { font-size: 22px; font-weight: 800; }
.screen-title p { font-size: 13.5px; color: var(--muted); margin-top: 2px; }

/* ===== Screens ===== */
.screen-wrap { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 90px; }
.screen { display: none; animation: fade .25s ease; }
.screen.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== Recipe cards ===== */
.recipe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 12px 16px; }
.recipe-card {
  background: var(--card); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow); cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.recipe-card:active { transform: scale(.97); }
.recipe-card .hero { height: 96px; display: flex; align-items: center; justify-content: center; font-size: 46px; }
.recipe-card .body { padding: 10px 12px 13px; }
.recipe-card .body h3 { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.recipe-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.recipe-meta span { display: inline-flex; align-items: center; gap: 3px; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
}
.pill.have { background: var(--olive-soft); color: var(--olive); }
.pill.missing { background: var(--brand-soft); color: var(--brand-dark); }
.pill.tag { background: #f4ede3; color: #9a7b4f; }

/* ===== "מה לבשל" cards ===== */
.cook-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.cook-card {
  background: var(--card); border-radius: 16px; padding: 14px; box-shadow: var(--shadow);
  display: flex; gap: 13px; align-items: center; cursor: pointer; border: 2px solid transparent;
}
.cook-card.ready { border-color: var(--olive); }
.cook-card .emoji { font-size: 38px; flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.cook-card .info { flex: 1; min-width: 0; }
.cook-card .info h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.cook-card .missing-list { font-size: 12px; color: var(--muted); margin-top: 5px; }
.cook-card .missing-list b { color: var(--brand-dark); font-weight: 600; }

/* ===== Pantry ===== */
.pantry-actions { padding: 6px 16px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.btn-soft {
  background: var(--card); border: 1.5px solid var(--line); color: var(--ink);
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn-soft.active { background: var(--olive); border-color: var(--olive); color: #fff; }
.search-box { margin: 12px 16px 4px; position: relative; }
.search-box input {
  width: 100%; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--line);
  font-size: 15px; font-family: inherit; background: var(--card); color: var(--ink);
}
.search-box input:focus { outline: none; border-color: var(--brand); }
.cat-group { padding: 6px 16px; }
.cat-group h4 { font-size: 14px; color: var(--muted); margin: 14px 0 9px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 9px 15px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line);
  font-size: 14px; cursor: pointer; transition: all .12s; font-weight: 500; user-select: none;
}
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 3px 10px rgba(176,113,77,.28); }

/* ===== Weekly menu ===== */
.week-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.day-card { background: var(--card); border-radius: 16px; padding: 14px 15px; box-shadow: var(--shadow); }
.day-card .day-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.day-card .day-head h4 { font-size: 16px; font-weight: 800; }
.day-card .add-btn { background: var(--olive-soft); color: var(--olive); border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 20px; cursor: pointer; font-weight: 700; line-height: 1; }
.day-meals { display: flex; flex-direction: column; gap: 7px; }
.day-card.day-busy { border-right: 4px solid #e08a5a; }
.busy-row { display: flex; gap: 6px; margin-bottom: 10px; }
.busy-opt { flex: 1; background: var(--card-2); border: 1.5px solid var(--line); border-radius: 10px; padding: 7px 4px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--muted); }
.busy-opt.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.prep-banner { background: var(--olive-soft); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.prep-banner h4 { font-size: 15px; font-weight: 800; color: var(--olive); margin-bottom: 8px; }
.prep-banner .prep-day { font-size: 14px; font-weight: 800; color: var(--brand-dark); margin: 8px 0 4px; }
.prep-banner .prep-day:first-of-type { margin-top: 0; }
.prep-banner .prep-line { font-size: 13px; color: var(--ink); line-height: 1.55; padding: 4px 0 4px 0; padding-inline-start: 10px; border-inline-start: 2px solid transparent; }
.prep-banner .prep-line.prep-prep { border-inline-start-color: var(--olive); }
.prep-banner .prep-line.prep-batch { border-inline-start-color: var(--gold); }
.prep-banner .prep-line.prep-fresh { color: var(--muted); }
.prep-tip { background: var(--olive-soft); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--ink); margin-top: 16px; }
/* AI plan */
#ai-plan-out { padding: 0 16px; }
.ai-plan { background: linear-gradient(135deg, #fbf2e9 0%, #f6ece0 100%); border: 1.5px solid var(--brand-soft); border-radius: 16px; padding: 15px 16px; margin: 12px 0 4px; }
.ai-loading { color: var(--brand-dark); font-weight: 600; text-align: center; padding: 8px; }
.ai-err { color: #c0392b; text-align: center; font-size: 14px; }
.ai-tip { font-size: 14px; font-weight: 600; color: var(--brand-dark); line-height: 1.6; margin-bottom: 12px; }
.ai-day { margin-bottom: 11px; }
.ai-day-h { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.ai-item { font-size: 13.5px; color: var(--ink); line-height: 1.55; padding: 3px 0; padding-inline-start: 12px; position: relative; }
.ai-item::before { content: "•"; position: absolute; right: 0; color: var(--brand); }
.day-meals:empty::after { content: "אין ארוחות עדיין"; color: var(--muted); font-size: 13px; }
.meal-chip { display: flex; align-items: center; gap: 9px; background: #f9f4ee; border-radius: 11px; padding: 8px 11px; font-size: 14px; }
.meal-chip .em { font-size: 20px; }
.meal-chip .x { margin-inline-start: auto; color: var(--muted); cursor: pointer; font-size: 18px; padding: 0 4px; }

/* ===== Grocery list ===== */
.grocery { padding: 12px 16px; }
.grocery .summary { background: var(--olive-soft); color: var(--olive); border-radius: 14px; padding: 13px 16px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.grocery .empty { text-align: center; color: var(--muted); padding: 50px 20px; font-size: 15px; }
.grocery .empty .big { font-size: 46px; display: block; margin-bottom: 12px; }
.gcat { margin-bottom: 18px; }
.gcat h4 { font-size: 14px; color: var(--muted); font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.gitem { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow); cursor: pointer; }
.gitem .check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; }
.gitem.checked .check { background: var(--olive); border-color: var(--olive); }
.gitem.checked .label { text-decoration: line-through; color: var(--muted); }
.gitem .label { font-size: 15px; font-weight: 500; }
.gitem .amt { margin-inline-start: auto; font-size: 13px; color: var(--muted); }

/* ===== Bottom nav ===== */
.tabbar {
  position: absolute; bottom: 0; right: 0; left: 0;
  background: rgba(251,246,238,.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display: flex; padding: 8px 6px calc(8px + var(--safe-bottom));
  z-index: 50;
}
.tabbar button {
  flex: 1; background: none; border: none; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted);
  font-size: 10.5px; font-weight: 600; padding: 4px 0; position: relative;
}
.tabbar button .ic { font-size: 22px; line-height: 1; transition: transform .15s; }
.tabbar button.active { color: var(--brand); }
.tabbar button.active .ic { transform: translateY(-2px) scale(1.08); }
.tabbar button .badge {
  position: absolute; top: -2px; left: 50%; transform: translateX(14px);
  background: var(--brand); color: #fff; font-size: 10px; min-width: 17px; height: 17px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ===== Modal (recipe detail / picker) ===== */
.modal-back {
  position: fixed; inset: 0; background: rgba(30,20,15,.5); z-index: 100;
  display: none; align-items: flex-end; justify-content: center;
}
.modal-back.open { display: flex; animation: fade .2s; }
.modal {
  background: var(--bg); width: 100%; max-width: 480px; max-height: 90dvh;
  border-radius: 24px 24px 0 0; overflow-y: auto; animation: slideup .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideup { from { transform: translateY(100%); } to { transform: none; } }
.modal .m-hero { height: 130px; display: flex; align-items: center; justify-content: center; font-size: 64px; position: relative; }
.modal .m-close { position: absolute; top: 12px; left: 14px; background: rgba(251,246,238,.9); border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.modal .m-body { padding: 18px 20px 30px; }
.modal .m-body h2 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.modal .m-meta { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.modal h3.sec { font-size: 16px; font-weight: 800; margin: 18px 0 10px; }
.ing-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ing-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ing-row .dot.have { background: var(--olive); }
.ing-row .dot.miss { background: var(--brand); }
.ing-row .amt { margin-inline-start: auto; color: var(--muted); font-size: 13.5px; }
.steps { counter-reset: step; }
.steps li { list-style: none; position: relative; padding: 4px 38px 14px 0; font-size: 15px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; right: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.btn-primary {
  width: 100%; background: var(--brand); color: #fff; border: none; padding: 15px;
  border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 22px;
  font-family: inherit; box-shadow: 0 6px 18px rgba(176,113,77,.3);
}
.btn-primary:active { transform: scale(.98); }

/* picker list inside modal */
.picker-day-label { padding: 16px 20px 4px; font-size: 14px; color: var(--muted); }
.picker-list { padding: 6px 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.picker-item { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); cursor: pointer; }
.picker-item .em { font-size: 30px; }
.picker-item h4 { font-size: 15px; font-weight: 700; }
.picker-item .sub { font-size: 12px; color: var(--muted); }

/* toast */
.toast {
  position: fixed; bottom: 100px; right: 50%; transform: translateX(50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 14px;
  font-weight: 600; opacity: 0; transition: all .3s; z-index: 200; pointer-events: none; max-width: 90%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(50%) translateY(0); }