:root {
  --green:#1fa34a; --green-soft:#e3f4ea;
  --orange:#e8541c; --orange-soft:#fff1e6;
  --blue:#1d8fd6;   --blue-soft:#e6f3fc;
  --yellow:#f2b705; --yellow-soft:#fff7d9;
  --pink:#e85a8b;   --pink-soft:#fde8ef;
  --bg:#fdfbf6;
  --ink:#1f1d1a; --muted:#7a7468;
  --card:#ffffff; --card-elev:#fffdf8;
  --border:#ece6d6;
  --red:#c0392b; --teal:#0f9d8f; --purple:#7c3aed;
  --shadow-sm:0 1px 2px rgba(70,55,30,0.06);
  --shadow-md:0 4px 14px rgba(70,55,30,0.08);
  --shadow-lg:0 10px 30px rgba(70,55,30,0.12);
  --grad-warm:linear-gradient(135deg,#fff8ec 0%,#ffeede 50%,#fff3ec 100%);
  --grad-mint:linear-gradient(135deg,#f0faf3 0%,#e3f4ea 100%);
  --grad-pink:linear-gradient(135deg,#fff3f7 0%,#fde2ec 100%);
  --grad-blue:linear-gradient(135deg,#eef6fc 0%,#dceffb 100%);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; }
body { font-family:"Inter",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; background:var(--bg); color:var(--ink); padding-bottom:env(safe-area-inset-bottom); -webkit-font-smoothing:antialiased; }

/* ===== HERO ===== */
.hero { display:flex; align-items:center; gap:16px; padding:22px 24px; padding-top:calc(22px + env(safe-area-inset-top));
  background:var(--grad-warm); border-bottom:3px solid transparent;
  background-clip:padding-box; box-shadow:var(--shadow-md); position:relative; }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:linear-gradient(90deg,var(--green),var(--orange),var(--pink),var(--blue)); }
.logo { height:60px; width:60px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.hero h1 { margin:0; color:var(--orange); font-size:26px; font-weight:800; letter-spacing:-0.5px; }
.tag { margin:2px 0 0; color:var(--green); font-style:italic; font-weight:500; font-size:13px; }
.hero-controls { margin-left:auto; }
.region-sel { min-width:130px; font-weight:600; padding:8px 10px; border:1.5px solid var(--border); border-radius:8px; font-size:13px; background:#fff; font-family:inherit; }

/* ===== FESTIVAL BANNER ===== */
.festival-banner { margin:0; padding:0; }
.festival-banner.active {
  background:linear-gradient(135deg,#fff3e0 0%,#ffe0b2 50%,#fff8e1 100%);
  border-bottom:3px solid var(--orange); padding:16px 20px;
}
.festival-banner.upcoming {
  background:#f0f7ff; border-bottom:2px solid var(--blue); padding:10px 20px;
}
.fest-greeting { font-size:18px; font-weight:700; color:var(--orange); margin-bottom:8px; }
.fest-progress { margin-bottom:10px; }
.fest-progress span { font-size:13px; color:var(--ink); font-weight:600; }
.progress-bar { height:6px; background:#e0e0e0; border-radius:3px; margin-top:4px; overflow:hidden; }
.progress-fill { height:100%; background:var(--orange); border-radius:3px; transition:width 0.3s; }
.fest-meals { margin-top:8px; }
.fest-dish { padding:6px 0; font-size:13px; border-bottom:1px dashed #e0d6c8; display:flex; align-items:center; gap:8px; }
.fest-dish:last-child { border-bottom:none; }
.fest-dish > span:first-child { display:inline-block; width:72px; flex-shrink:0; font-weight:700; color:var(--orange); text-transform:uppercase; font-size:10px; letter-spacing:0.4px; }
.fest-dish .dish-emoji { font-size:18px; flex-shrink:0; }
.fest-upcoming { font-size:14px; color:var(--blue); }
.fest-upcoming b { color:var(--ink); }

/* ===== MAIN TABS ===== */
.tabs { display:flex; gap:4px; padding:0 16px; background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; overflow-x:auto; box-shadow:0 1px 0 rgba(0,0,0,0.02); }
.tabs::-webkit-scrollbar { display:none; }
.tab { background:transparent; border:none; padding:14px 16px; font-size:14px; cursor:pointer; color:var(--muted); border-bottom:3px solid transparent; font-weight:600; white-space:nowrap; transition:color 0.18s; }
.tab:hover { color:var(--orange); }
.tab.active { color:var(--green); border-bottom-color:var(--green); }
main { padding:20px 16px 40px; max-width:1100px; margin:0 auto; }
.panel { display:none; } .panel.active { display:block; }

/* ===== GAS CYLINDER WIDGET ===== */
.gas-widget { display:flex; align-items:center; gap:10px; background:linear-gradient(90deg,#fff3e0,#ffe0b2); border:1px solid #f2d98a;
  border-radius:10px; padding:10px 16px; margin-bottom:12px; }
.gas-widget:empty { display:none; }
.gas-icon { font-size:20px; }
.gas-text { flex:1; font-size:13px; color:var(--ink); }
.gas-text b { color:var(--orange); font-size:15px; }

/* ===== TODAY TAB ===== */
.today-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:6px; }
.today-date-label { font-size:16px; font-weight:700; color:var(--orange); }
.today-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:12px; }
.today-card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:10px; position:relative; box-shadow:var(--shadow-sm); transition:box-shadow 0.2s, transform 0.18s; overflow:hidden; }
.today-card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--yellow); }
.today-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.today-card:nth-child(1)::before { background:linear-gradient(90deg,#f2b705,#ffd966); }
.today-card:nth-child(2)::before { background:linear-gradient(90deg,var(--orange),#ff8a5b); }
.today-card:nth-child(3)::before { background:linear-gradient(90deg,var(--teal),#5fc7bb); }
.today-card:nth-child(4)::before { background:linear-gradient(90deg,var(--blue),#7bb8e2); }
.today-slot-header { display:flex; align-items:center; gap:8px; }
.slot-icon { font-size:22px; }
.slot-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.6px; color:var(--muted); }
.today-meal-display { font-size:15.5px; font-weight:600; min-height:26px; line-height:1.45; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.today-meal-display .meal-emoji { font-size:22px; flex-shrink:0; }
.today-meal-display .meal-name { flex:1; min-width:0; }
.today-meal-display.set { color:var(--ink); }
.today-meal-display.suggestion { color:var(--green); }
.today-meal-display.empty { color:var(--muted); font-style:italic; font-size:13px; }
.today-meal-display.festival { color:var(--orange); }
.today-select-wrap select { width:100%; padding:9px 12px; font-size:13.5px; border:1.5px solid var(--border); border-radius:10px; background:var(--card-elev); transition:border-color 0.15s; }
.today-select-wrap select:focus { border-color:var(--green); outline:none; }
.today-missing { font-size:11px; margin-top:-4px; }
.fest-override-label { font-size:12px; color:var(--orange); font-weight:600; background:#fff3e0; padding:4px 8px; border-radius:6px; }

/* ===== SHARED LAYOUT ===== */
.toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
h2 { margin:0; font-size:18px; } h3 { margin:0; font-size:14px; }
.hint { color:var(--muted); font-size:13px; margin:0 0 14px; }
.btn { background:#fff; border:1.5px solid var(--border); padding:10px 16px; border-radius:10px; cursor:pointer; font-weight:600; font-size:14px; transition:transform 0.12s, box-shadow 0.18s, background 0.18s, border-color 0.18s; }
.btn:hover { box-shadow:var(--shadow-sm); border-color:var(--green); }
.btn.primary { background:linear-gradient(135deg,var(--green) 0%,#28b455 100%); color:#fff; border-color:transparent; box-shadow:0 2px 8px rgba(31,163,74,0.25); }
.btn.primary:hover { box-shadow:0 4px 14px rgba(31,163,74,0.35); }
.btn.xs { padding:6px 11px; font-size:11.5px; border-radius:8px; }
.btn:active { transform:scale(0.96); }
input,select { padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; font-size:14px; background:#fff; font-family:inherit; transition:border-color 0.15s; }
input:focus, select:focus { border-color:var(--green); outline:none; }
.switch { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); font-weight:600; }
.switch select { padding:6px 8px; }

/* ===== KITCHEN / GROCERY CARDS ===== */
.category { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:14px; box-shadow:var(--shadow-sm); transition:box-shadow 0.18s; }
.category:hover { box-shadow:var(--shadow-md); }
.category h3 { color:var(--orange); font-size:13px; text-transform:uppercase; letter-spacing:0.6px; display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; }
.category h3 .cat-icon { font-size:18px; margin-right:6px; }
.category h3 .count { color:var(--muted); font-size:11px; font-weight:500; text-transform:none; letter-spacing:0; margin-left:auto; }
.category details summary { cursor:pointer; color:var(--muted); font-size:12px; padding:8px 4px; font-weight:600; }
.category details summary:hover { color:var(--orange); }
.items { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; margin-top:6px; }
.item { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--card-elev); border-radius:10px; font-size:13.5px; border-left:3px solid transparent; transition:transform 0.12s, box-shadow 0.18s, background 0.18s; }
.item:hover { box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.item .item-icon { font-size:18px; line-height:1; flex-shrink:0; width:24px; text-align:center; filter:saturate(1.1); }
.item.stocked { border-left-color:var(--green); background:linear-gradient(90deg,var(--green-soft),#fff); }
.item.empty { opacity:0.78; background:#fbfaf3; }
.item.empty:hover { opacity:1; }
.item .name { flex:1; font-weight:500; color:var(--ink); }
.item .qty { width:64px; padding:5px 8px; font-size:12px; border-radius:6px; }
.item .unit { font-size:11px; color:var(--muted); min-width:28px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }

/* ===== MEAL PLAN ===== */
.banner { background:var(--grad-warm); border:1px solid var(--yellow); border-radius:14px; padding:14px 16px; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; box-shadow:var(--shadow-sm); }
.banner .meta { color:var(--muted); font-size:12px; margin-top:4px; }
#plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.day-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; border-left:4px solid var(--blue); box-shadow:var(--shadow-sm); transition:box-shadow 0.18s, transform 0.18s; }
.day-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.day-card h4 { margin:0 0 10px; color:var(--blue); font-size:14px; font-weight:700; }
.day-card.festival-day { border-left-color:var(--orange); background:var(--grad-warm); }
.fest-badge { display:inline-block; background:var(--orange); color:#fff; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.5px; padding:3px 9px; border-radius:6px; margin-bottom:6px; }
.meal-row { padding:9px 4px; border-bottom:1px dashed var(--border); font-size:13.5px; line-height:1.45; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
.meal-row:last-child { border-bottom:none; }
.meal-row b { color:var(--orange); text-transform:capitalize; display:block; font-size:11px; margin-bottom:2px; font-weight:800; letter-spacing:0.4px; width:100%; }
.meal-row .meal-emoji { font-size:18px; line-height:1; flex-shrink:0; }
.meal-row.partial { background:var(--orange-soft); border-radius:8px; padding:9px 10px; }
.meal-row select { width:100%; padding:6px 10px; font-size:12.5px; border-radius:8px; }
.miss { display:inline-block; margin-left:6px; font-size:11px; color:var(--red); background:var(--pink-soft); padding:2px 8px; border-radius:6px; font-weight:600; }
.missing-panel { background:var(--card); border:1px solid var(--yellow); border-left:4px solid var(--yellow); border-radius:12px; padding:14px; margin-top:16px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:4px; background:#faf9f2; border:1px solid var(--border); border-radius:20px; padding:4px 4px 4px 12px; font-size:13px; }
.chip button { border:none; background:transparent; cursor:pointer; padding:4px 6px; font-size:13px; border-radius:50%; }
.chip button[title=Approve] { color:var(--green); font-weight:bold; }
.chip button[title=Dismiss] { color:#c0392b; }

/* ===== REMINDERS SUB-TABS ===== */
.rem-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:2px; }
.rem-tab { background:transparent; border:none; border-bottom:3px solid transparent; padding:10px 16px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; }
.rem-tab.active { color:var(--orange); border-bottom-color:var(--orange); }
.rem-panel { display:none; } .rem-panel.active { display:block; }

/* ===== REMINDER ROWS ===== */
#reminder-list { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.rem { display:flex; justify-content:space-between; align-items:center; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 16px; gap:10px; box-shadow:var(--shadow-sm); transition:box-shadow 0.18s; }
.rem:hover { box-shadow:var(--shadow-md); }
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); }
.rem.off { opacity:0.45; } .rem .meta { color:var(--muted); font-size:12px; margin-top:2px; }
.rem .actions { display:flex; gap:6px; } .rem .actions .btn { padding:6px 10px; font-size:12px; }
.add-row { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.add-row input,.add-row select { flex:1; min-width:120px; }

/* ===== TRACKER ===== */
.tracker-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:14px 0 8px; }
.tracker-month { font-size:15px; font-weight:700; color:var(--ink); min-width:140px; text-align:center; }
.tracker-stats { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:12px; }
@media(max-width:700px) { .tracker-stats { grid-template-columns:repeat(3,1fr); } }
@media(max-width:400px) { .tracker-stats { grid-template-columns:repeat(2,1fr); } }
.stat-card { border-radius:14px; padding:14px 10px; text-align:center; box-shadow:var(--shadow-sm); transition:transform 0.18s, box-shadow 0.18s; }
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-card.maid-color  { background:#e8f7ec; border:1px solid #a8ddb5; }
.stat-card.absent-color{ background:#fde8e4; border:1px solid #f5b9ae; }
.stat-card.milk-color  { background:#e8f4fd; border:1px solid #a8d3f0; }
.stat-card.missed-color{ background:#fff8e8; border:1px solid #f2d98a; }
.stat-card.news-color  { background:#f3e8fd; border:1px solid #c8a8f0; }
.stat-card.news-missed-color { background:#fce8f1; border:1px solid #f0a8c0; }
.stat-val { font-size:24px; font-weight:800; }
.stat-lbl { font-size:11px; color:var(--muted); font-weight:600; margin-top:2px; }
.stat-card.maid-color  .stat-val { color:var(--green); }
.stat-card.absent-color .stat-val { color:var(--red); }
.stat-card.milk-color  .stat-val { color:var(--blue); }
.stat-card.missed-color .stat-val { color:#b7830a; }
.stat-card.news-color  .stat-val { color:var(--purple); }
.stat-card.news-missed-color .stat-val { color:#c0396b; }
.tracker-legend { font-size:11px; color:var(--muted); margin-bottom:12px; display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.leg-dot { display:inline-block; width:10px; height:10px; border-radius:3px; }
.leg-dot.present  { background:#1fa34a; }
.leg-dot.absent   { background:#c0392b; }
.leg-dot.received { background:#1d8fd6; }
.leg-dot.missed   { background:#f2b705; }
.leg-dot.news-yes { background:#7c3aed; }
.leg-dot.news-no  { background:#c0396b; }
.leg-note { color:#aaa; font-style:italic; margin-left:4px; }

/* ===== CALENDAR GRID ===== */
.tracker-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-header { text-align:center; font-size:10px; font-weight:700; color:var(--muted); padding:4px 0; text-transform:uppercase; letter-spacing:0.5px; }
.cal-cell { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:5px 4px 6px; min-height:82px; display:flex; flex-direction:column; gap:3px; transition:border-color 0.15s, box-shadow 0.15s; }
.cal-cell:hover:not(.blank):not(.future) { border-color:var(--green); box-shadow:var(--shadow-sm); }
.cal-cell.blank { background:transparent; border-color:transparent; }
.cal-cell.today { border-color:var(--orange); border-width:2px; background:var(--orange-soft); }
.cal-cell.future { opacity:0.4; pointer-events:none; }
.cal-day { font-size:11px; font-weight:700; color:var(--ink); text-align:center; }
.cal-cell.today .cal-day { color:var(--orange); }
.cal-badges { display:flex; flex-direction:column; gap:2px; }
.badge { border:none; border-radius:5px; padding:2px 4px; font-size:8px; font-weight:700; cursor:pointer; text-align:left; width:100%; transition:background 0.15s; }
.maid-badge        { background:#f0f0f0; color:var(--muted); }
.maid-badge.present{ background:#d4f0de; color:var(--green); }
.maid-badge.absent { background:#fde8e4; color:var(--red); }
.milk-badge        { background:#f0f0f0; color:var(--muted); }
.milk-badge.received{ background:#daeeff; color:var(--blue); }
.milk-badge.missed { background:#fff8e0; color:#b7830a; }
.news-badge        { background:#f0f0f0; color:var(--muted); }
.news-badge.received { background:#ede0fd; color:var(--purple); }
.news-badge.missed { background:#fce8f1; color:#c0396b; }

/* ===== FESTIVAL CALENDAR PANEL ===== */
#festival-list { display:flex; flex-direction:column; gap:12px; }
.fest-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; border-left:4px solid var(--muted); transition:border-color 0.2s, box-shadow 0.18s, transform 0.18s; box-shadow:var(--shadow-sm); }
.fest-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.fest-card.active { border-left-color:var(--orange); background:var(--grad-warm); }
.fest-card.past { opacity:0.5; }
.fest-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.fest-card-head h4 { margin:0; font-size:15px; color:var(--ink); }
.badge.live { background:var(--orange); color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:2px 8px; border-radius:4px; }
.badge.past { background:#e0e0e0; color:#888; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:2px 8px; border-radius:4px; }
.badge.soon { background:#e3f2fd; color:var(--blue); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:2px 8px; border-radius:4px; }
.fest-card-meta { font-size:12px; color:var(--muted); margin-bottom:2px; }
.fest-card-states { font-size:11px; color:var(--blue); font-weight:500; }
.fest-card-greeting { font-size:13px; color:var(--orange); font-weight:600; margin-top:6px; }

/* ===== DIALOG OVERLAY ===== */
.dialog-overlay { position:fixed; inset:0; background:rgba(20,12,0,0.5); backdrop-filter:blur(4px); z-index:100; display:flex; align-items:center; justify-content:center; padding:16px; animation:fadeIn 0.2s ease; }
.dialog { background:#fff; border-radius:20px; padding:24px; max-width:420px; width:100%; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:12px; animation:slideUp 0.25s ease; }
.dialog h3 { margin:0 0 4px; font-size:17px; color:var(--orange); font-weight:800; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
.dialog label { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--muted); }
.dialog label input, .dialog label select { margin-top:2px; }
.dialog-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }

/* ===== VEG & SPECIAL BADGES ===== */
.veg-badge-small { display:inline-block; background:#e8f7ec; color:var(--green); font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px; }
.special-badge { display:inline-block; background:#fff3e0; color:var(--orange); font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px; }
.special-day-label { font-size:12px; color:var(--purple); font-weight:600; background:#f3e8fd; padding:4px 8px; border-radius:6px; }
.special-day-banner { background:linear-gradient(135deg,#f3e8fd 0%,#ede0fd 100%) !important; border-bottom-color:var(--purple) !important; }

/* ===== CHIP BUTTONS (Veg day toggles) ===== */
.chip-btn { background:#faf9f2; border:1.5px solid var(--border); border-radius:20px; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.chip-btn:hover { border-color:var(--green); }
.chip-btn.active { background:var(--green); color:#fff; border-color:var(--green); }

/* ===== VEG RESTRICTIONS SECTION ===== */
.veg-restrictions-section { margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.veg-restrictions-section h3 { margin-bottom:8px; }
.veg-days { margin-bottom:12px; }
.veg-days label { font-size:13px; font-weight:600; color:var(--muted); display:block; margin-bottom:6px; }
.veg-day-chips { display:flex; flex-wrap:wrap; gap:6px; }
.veg-month-row { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-bottom:8px; }
.veg-month-row label { font-size:13px; font-weight:600; color:var(--muted); }
.veg-months-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }

/* ===== SPECIAL DAYS HEADER ===== */
.sd-header { display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); margin-bottom:8px; }
.sd-header h3 { margin:0; }

/* ===== BUY MISSING BUTTON ===== */
.buy-missing-btn { background:var(--green); color:#fff; border:none; border-radius:4px; padding:2px 8px; font-size:10px; font-weight:700; cursor:pointer; margin-left:4px; vertical-align:middle; }
.buy-missing-btn:hover { background:#178a3a; }

/* ===== PARTIAL MATCH HIGHLIGHT ===== */
.today-meal-display.partial { color:var(--orange); }
.meal-row.partial { background:#fff8e8; border-radius:6px; padding:8px; }

/* ===== RECURRING BADGE ===== */
.badge.recur { background:#e8f7ec; color:var(--green); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:2px 8px; border-radius:4px; }

/* ===== SPECIAL FEST CARD ===== */
.fest-card.special { border-left-color:var(--purple); }
.fest-card.special.past { opacity:0.5; }

footer { text-align:center; padding:24px; color:var(--muted); font-size:12px; }

/* ===== KITCHEN BULK-EDIT ===== */
.item .bulk-check { width:20px; height:20px; margin-right:4px; accent-color:var(--green); cursor:pointer; flex-shrink:0; }
.item { cursor:pointer; user-select:none; }
.item.selected { background:#fff3e0 !important; border-left-color:var(--orange) !important; }
.bulk-bar {
  position:fixed; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom));
  background:#fff; border:1.5px solid var(--green); border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18); padding:10px 12px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; z-index:50;
}
.bulk-count { font-weight:700; color:var(--green); font-size:13px; min-width:80px; }

/* ===== WATER TRACKER ===== */
.water-tracker-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; padding-top:8px; border-top:1px dashed var(--border); flex-wrap:wrap; }
.water-count-display { font-size:14px; font-weight:700; color:var(--blue); padding:6px 12px; background:#e8f4fd; border-radius:20px; }
.water-count-display.goal-met { color:#fff; background:var(--green); }

/* ===== MOBILE-FIRST REFINEMENTS ===== */
@media (max-width:600px) {
  .hero { padding:14px 14px; gap:10px; }
  .hero h1 { font-size:20px; }
  .logo { height:46px; width:46px; }
  .tag { font-size:12px; }
  .region-sel { min-width:auto; padding:7px 8px; font-size:12px; }
  main { padding:14px 10px 100px; }    /* extra bottom padding so bulk bar doesn't cover content */
  .tab { padding:12px 10px; font-size:13px; }
  .today-grid { grid-template-columns:1fr; gap:10px; }
  .today-card { padding:12px; }
  .items { grid-template-columns:1fr; }   /* one item per row on phones */
  .item { padding:10px 12px; font-size:14px; }
  .item .qty { width:64px; padding:6px 8px; font-size:13px; }
  .btn { padding:10px 14px; min-height:40px; }   /* finger-friendly */
  .btn.xs { padding:7px 10px; min-height:34px; font-size:12px; }
  input[type="number"], input[type="time"], input[type="date"], select { min-height:40px; font-size:15px; }
  .toolbar { gap:8px; }
  .add-row { flex-direction:column; }
  .add-row input, .add-row select, .add-row button { width:100%; }
  #plan-grid { grid-template-columns:1fr; }
  /* Stack reminder cards content vertically */
  .water-tracker-row { flex-direction:column; align-items:stretch; }
  .water-tracker-row .row { justify-content:space-between; }
  /* Bulk bar full-width buttons on phones */
  .bulk-bar { flex-direction:row; justify-content:space-between; padding:10px 8px; }
  .bulk-bar .btn { flex:1; min-width:0; padding:9px 4px; font-size:11px; }
  .bulk-count { width:100%; text-align:center; margin-bottom:4px; }
  /* Bigger tap targets on tracker calendar cells */
  .cal-cell { min-height:74px; }
  .badge { padding:4px 4px; font-size:9px; min-height:22px; }
}

/* Tighten festival banner on small screens */
@media (max-width:480px) {
  .festival-banner.active { padding:12px 14px; }
  .fest-greeting { font-size:16px; }
  .fest-dish span { width:60px; font-size:10px; }
}

/* Ensure inputs are large enough on tablets too */
@media (max-width:900px) {
  .tracker-grid { gap:3px; }
  .cal-cell { padding:4px 3px 5px; }
}