:root{--bg:#f4f5f7;--card:#fff;--text:#1f2937;--muted:#6b7280;--border:#e5e7eb;--primary:#2563eb;--primary-dark:#1d4ed8;--green:#16a34a;--green-light:#dcfce7;--yellow:#ca8a04;--yellow-light:#fef9c3;--red:#dc2626;--red-light:#fee2e2;--purple:#7c3aed;--orange:#ea580c;--orange-light:#ffedd5;--shadow:0 2px 8px rgba(0,0,0,.07);--radius:14px}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}header{background:#111827;color:#fff;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}header h1{margin:0;font-size:24px}header .small{color:#d1d5db}nav{background:#fff;border-bottom:1px solid var(--border);display:flex;overflow-x:auto;position:sticky;top:0;z-index:20}nav button{background:none;border:none;padding:16px 20px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}nav button.active{color:var(--primary);border-bottom-color:var(--primary)}main{max-width:1250px;margin:auto;padding:22px}.page{display:none}.page.active{display:block}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:18px}.grid{display:grid;gap:18px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:16px}h2,h3,h4{margin-top:0}.muted{color:var(--muted)}.btn{border:none;border-radius:9px;padding:10px 14px;font-weight:700}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-green{background:var(--green);color:#fff}.btn-red{background:var(--red);color:#fff}.btn-light{background:#f3f4f6;color:#374151;border:1px solid var(--border)}.btn-purple{background:var(--purple);color:#fff}.btn-orange{background:var(--orange);color:#fff}.btn-large{padding:14px 22px;font-size:16px}.button-row{display:flex;flex-wrap:wrap;gap:8px}input,select,textarea{border:1px solid #d1d5db;border-radius:8px;padding:10px;background:#fff;color:var(--text);width:100%}textarea{resize:vertical;min-height:85px}label{font-weight:700;display:block;margin-bottom:5px}.field{margin-bottom:14px}.form-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end}.recipe-card{display:flex;flex-direction:column;height:100%}.recipe-card .recipe-title{font-size:19px;font-weight:800;margin-bottom:5px}.recipe-meta{font-size:14px;color:var(--muted);margin-bottom:12px}.recipe-card .button-row{margin-top:auto}.badge{display:inline-block;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800}.badge-green{color:#166534;background:var(--green-light)}.badge-yellow{color:#854d0e;background:var(--yellow-light)}.badge-red{color:#991b1b;background:var(--red-light)}.badge-purple{color:#6d28d9;background:#ede9fe}.hero{padding:26px}.hero h2{font-size:28px;margin-bottom:5px}.hero-meal-name{font-size:32px;font-weight:900;margin:12px 0 4px}.progress{height:10px;background:#e5e7eb;border-radius:20px;overflow:hidden}.progress div{height:100%;background:var(--green)}.inventory-row,.shopping-row,.ingredient-row,.step-row{display:grid;gap:10px;align-items:center;border-bottom:1px solid var(--border);padding:10px 0}.inventory-row{grid-template-columns:2fr 130px 120px 140px auto}.shopping-row{grid-template-columns:42px 2fr 110px 120px auto}.ingredient-row{grid-template-columns:2fr 100px 120px auto}.step-row{grid-template-columns:1fr 100px auto}.quantity-control{display:flex;align-items:center;gap:6px}.quantity-control button{width:34px;height:34px;border-radius:7px;border:1px solid var(--border);background:#f9fafb;font-weight:900}.quantity-control input{min-width:70px}.side-card{border:1px solid var(--border);border-radius:11px;padding:14px;margin-bottom:10px}.side-title{font-weight:800;font-size:17px}.available-item{color:var(--green);font-weight:700}.zero-item{color:var(--red);font-weight:800}.day-card{min-height:230px}.day-name{font-size:18px;font-weight:900;margin-bottom:12px}.plan-meal{margin-top:10px;padding:10px;border-radius:9px;background:#f3f4f6}.plan-random-button{width:100%;margin-top:10px}.modal{display:none;position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.55);padding:20px;overflow-y:auto}.modal.open{display:block}.modal-content{max-width:850px;margin:20px auto;background:#fff;border-radius:16px;padding:22px;box-shadow:0 10px 40px rgba(0,0,0,.2)}.modal-large{max-width:1050px}.modal-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}.close-btn{background:#f3f4f6;border:none;border-radius:50%;width:38px;height:38px;font-size:20px}.cook-step{padding:16px;border-left:4px solid var(--primary);background:#f9fafb;margin-bottom:12px;border-radius:0 10px 10px 0}.cook-time{font-weight:900;color:var(--primary);margin-bottom:4px}.finish-section{background:var(--green-light);border:1px solid #86efac;border-radius:12px;padding:18px;margin-top:24px}.empty-state{text-align:center;padding:35px;color:var(--muted)}.search-bar{display:grid;grid-template-columns:1fr auto;gap:10px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}.section-title h2,.section-title h3{margin:0}.summary-box{background:#f9fafb;border-radius:10px;padding:14px}.delete-section{margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}.delete-section .btn-red{width:100%}.sync{font-size:12px;color:#d1d5db}.sync.error{color:#fecaca}.sync.ok{color:#bbf7d0}hr{border:0;border-top:1px solid var(--border);margin:20px 0}
@media(max-width:850px){.grid-2,.grid-3,.form-row{grid-template-columns:1fr}.inventory-row,.shopping-row,.ingredient-row,.step-row{grid-template-columns:1fr}.shopping-row{position:relative;padding-left:45px}.shopping-row>input[type="checkbox"]{position:absolute;left:0;top:16px;width:25px}header{align-items:flex-start;flex-direction:column}}

.search-bar{grid-template-columns:1fr auto auto}
.drag-handle{cursor:grab;font-size:20px;user-select:none;text-align:center;color:var(--muted)}
.step-row.enhanced{grid-template-columns:36px 1fr 90px 40px 40px auto}
.ingredient-row.enhanced{grid-template-columns:2fr 110px 140px auto}
.expiry-warning{background:#fff7ed;border:1px solid #fdba74;border-radius:12px;padding:14px;margin-bottom:12px}
.expiry-critical{background:#fef2f2;border-color:#fca5a5}
.nutrition-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.nutrition-stat{background:#f9fafb;border:1px solid var(--border);border-radius:10px;padding:10px}
.nutrition-stat strong{display:block;font-size:18px}
.scan-product{border:1px solid var(--border);border-radius:12px;padding:14px;margin-top:14px}
.inventory-meta{font-size:12px;color:var(--muted);margin-top:4px}
.stock-warning{color:#b45309;font-weight:700;font-size:12px;margin-top:4px}
.expiry-soon{color:#c2410c;font-weight:700;font-size:12px;margin-top:4px}
#barcodeReader{width:100%;min-height:120px}
@media(max-width:850px){
  .search-bar{grid-template-columns:1fr}
  .step-row.enhanced,.ingredient-row.enhanced{grid-template-columns:1fr}
  .nutrition-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drag-handle{text-align:left}
}


/* Meal image cards */
.meal-card-visual{
  position:relative;
  min-height:260px;
  overflow:hidden;
  border-radius:var(--radius);
  background:
    linear-gradient(135deg,#374151,#111827);
  background-size:cover;
  background-position:center;
  color:white;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-shadow:var(--shadow);
}
.meal-card-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 48%,rgba(0,0,0,.10) 100%);
}
.meal-card-visual>*{position:relative;z-index:1}
.meal-card-content{padding:18px}
.meal-card-visual .recipe-title{font-size:22px;font-weight:900;margin-bottom:6px;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.meal-card-visual .recipe-meta,.meal-card-visual .muted{color:#f3f4f6}
.meal-card-visual .btn-light{background:rgba(255,255,255,.92)}
.meal-card-visual .badge{backdrop-filter:blur(4px)}
.meal-card-fallback-breakfast{background:linear-gradient(135deg,#f59e0b,#92400e)}
.meal-card-fallback-lunch{background:linear-gradient(135deg,#10b981,#065f46)}
.meal-card-fallback-dinner{background:linear-gradient(135deg,#7c3aed,#312e81)}
.meal-card-fallback-snack{background:linear-gradient(135deg,#ec4899,#9d174d)}
.meal-card-fallback-side{background:linear-gradient(135deg,#0ea5e9,#0f766e)}

.meal-image-preview{
  margin-top:10px;
  min-height:180px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#f3f4f6;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:var(--muted);
  text-align:center;
  padding:20px;
}
.meal-image-preview:not(.empty) span{display:none}

.plan-meal.visual{
  min-height:145px;
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
  color:white;
}
.plan-meal.visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.25));
}
.plan-meal.visual>*{position:relative;z-index:1}
.plan-meal.visual .field label{color:white}
.plan-meal.visual .btn-light{background:rgba(255,255,255,.92)}

.can-make-visual{
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
  color:white;
}
.can-make-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to right,rgba(0,0,0,.80),rgba(0,0,0,.28));
}
.can-make-visual>*{position:relative;z-index:1}
.can-make-visual .recipe-meta,.can-make-visual .muted{color:#f3f4f6}
.can-make-visual .btn-light{background:rgba(255,255,255,.92)}


.camera-scan-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.camera-scan-btn svg{
  width:22px;
  height:22px;
  fill:currentColor;
  flex:none;
}

.barcode-camera-stage{
  position:relative;
  min-height:260px;
  border-radius:14px;
  overflow:hidden;
  background:#111827;
}
#barcodeReader{
  min-height:260px;
}
#barcodeReader video{
  width:100%!important;
  object-fit:cover;
}
.barcode-frame-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:20;
}
.barcode-frame-overlay .corner{
  position:absolute;
  width:52px;
  height:52px;
  border-color:#fff;
  border-style:solid;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.65));
}
.barcode-frame-overlay .tl{left:12%;top:23%;border-width:5px 0 0 5px;border-radius:10px 0 0 0}
.barcode-frame-overlay .tr{right:12%;top:23%;border-width:5px 5px 0 0;border-radius:0 10px 0 0}
.barcode-frame-overlay .bl{left:12%;bottom:23%;border-width:0 0 5px 5px;border-radius:0 0 0 10px}
.barcode-frame-overlay .br{right:12%;bottom:23%;border-width:0 5px 5px 0;border-radius:0 0 10px 0}
.barcode-frame-label{
  position:absolute;
  left:50%;
  bottom:11%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.65);
  color:white;
  font-weight:700;
  font-size:13px;
  padding:7px 12px;
  border-radius:999px;
  white-space:nowrap;
}

.meal-image-search-results{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(145px,1fr));
  gap:10px;
  margin-top:12px;
}
.meal-image-choice{
  position:relative;
  min-height:120px;
  border:2px solid transparent;
  border-radius:10px;
  overflow:hidden;
  background:#e5e7eb;
  padding:0;
  cursor:pointer;
}
.meal-image-choice:hover,
.meal-image-choice:focus{
  border-color:var(--primary);
}
.meal-image-choice img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
}
.meal-image-choice .credit{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:5px 7px;
  background:rgba(0,0,0,.68);
  color:#fff;
  font-size:10px;
  text-align:left;
}
.image-attribution{
  font-size:11px;
  color:var(--muted);
  margin-top:6px;
}

@media(max-width:520px){
  .camera-scan-btn span{display:none}
  .camera-scan-btn{min-width:46px;justify-content:center}
  .meal-image-search-results{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.scanner-actions{display:flex;gap:10px;flex-wrap:wrap}
.camera-launch-btn{display:inline-flex;align-items:center;gap:8px}
.camera-launch-btn svg{width:22px;height:22px;fill:currentColor}
.file-scan-label{display:inline-flex;align-items:center;justify-content:center}
#liveCameraArea{margin-top:12px}
#liveCameraArea .barcode-frame-overlay{display:none}
#liveCameraArea.camera-active .barcode-frame-overlay{display:block!important}
.minimum-toggle-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.minimum-toggle-row input{width:auto}
.minimum-disabled{opacity:.5}

:root{
  --banner-start:#111827;--banner-mid:#1f2937;--banner-end:#312e81;
  --menu-bg:#ffffff;--input-bg:#ffffff;--soft-bg:#f9fafb;
}
html[data-theme="dark"]{
  --bg:#111827;--card:#1f2937;--text:#f3f4f6;--muted:#9ca3af;--border:#374151;
  --primary:#60a5fa;--primary-dark:#3b82f6;--green:#22c55e;--green-light:#16351f;
  --yellow:#facc15;--yellow-light:#3b3512;--red:#f87171;--red-light:#431c1c;
  --purple:#a78bfa;--orange:#fb923c;--orange-light:#432511;--menu-bg:#1f2937;
  --input-bg:#111827;--soft-bg:#111827;--banner-start:#0f172a;--banner-mid:#172554;--banner-end:#3b0764;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  html[data-theme="system"]{
    --bg:#111827;--card:#1f2937;--text:#f3f4f6;--muted:#9ca3af;--border:#374151;
    --primary:#60a5fa;--primary-dark:#3b82f6;--green:#22c55e;--green-light:#16351f;
    --yellow:#facc15;--yellow-light:#3b3512;--red:#f87171;--red-light:#431c1c;
    --purple:#a78bfa;--orange:#fb923c;--orange-light:#432511;--menu-bg:#1f2937;
    --input-bg:#111827;--soft-bg:#111827;--banner-start:#0f172a;--banner-mid:#172554;--banner-end:#3b0764;
    color-scheme:dark;
  }
}
body{background:var(--bg);color:var(--text)}
.card,.modal-content{background:var(--card);color:var(--text)}
input,select,textarea{background:var(--input-bg);color:var(--text);border-color:var(--border)}
.summary-box,.plan-meal,.cook-step{background:var(--soft-bg)}
nav{background:var(--card);border-color:var(--border)}
.btn-light{background:var(--soft-bg);color:var(--text);border-color:var(--border)}

.app-banner{
  position:relative;background:
  radial-gradient(circle at 18% 20%,rgba(255,255,255,.14),transparent 26%),
  radial-gradient(circle at 86% 35%,rgba(255,255,255,.10),transparent 24%),
  linear-gradient(120deg,var(--banner-start),var(--banner-mid) 52%,var(--banner-end));
  color:white;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  overflow:visible;box-shadow:0 8px 24px rgba(0,0,0,.16)
}
.app-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#22c55e,#60a5fa,#a78bfa,#fb923c)}
.banner-copy{display:flex;align-items:center;gap:14px;min-width:0}
.banner-mark{width:54px;height:54px;flex:none;display:grid;place-items:center;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.banner-mark svg{width:39px;height:39px}.banner-mark circle{fill:none;stroke:rgba(255,255,255,.9);stroke-width:3}.banner-mark path{fill:none;stroke:white;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.app-banner h1{margin:0;font-size:26px;letter-spacing:-.02em}.app-banner .small{color:#e5e7eb;margin-top:3px}
.banner-actions{position:relative;flex:none}
.hamburger-button{width:48px;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.hamburger-button span{display:block;width:22px;height:2px;border-radius:2px;background:white}
.app-menu{position:absolute;right:0;top:58px;z-index:200;width:min(360px,calc(100vw - 32px));background:var(--menu-bg);color:var(--text);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden}
.app-menu[hidden]{display:none}.app-menu-section{padding:14px}.app-menu-section+.app-menu-section{border-top:1px solid var(--border)}
.app-menu-title{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 8px}
.menu-action{width:100%;display:flex;align-items:flex-start;gap:12px;border:0;background:transparent;color:var(--text);padding:11px 9px;border-radius:10px;text-align:left}
.menu-action:hover{background:var(--soft-bg)}.menu-action strong{display:block}.menu-action small{display:block;color:var(--muted);margin-top:2px;line-height:1.35}
.menu-icon{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--soft-bg);border:1px solid var(--border);font-size:18px}
.theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.theme-options button{min-height:42px;border-radius:9px;border:1px solid var(--border);background:var(--soft-bg);color:var(--text);font-weight:700}
.theme-options button.active{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);color:var(--primary)}
.app-menu-footer{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--border);background:var(--soft-bg);font-size:12px}

.meal-card-visual,.plan-meal.visual,.can-make-visual{background-size:contain!important;background-repeat:no-repeat;background-position:center;background-color:#111827}
.meal-card-visual.has-meal-image,.plan-meal.visual.has-meal-image,.can-make-visual.has-meal-image{isolation:isolate}
.meal-card-visual.has-meal-image::after,.plan-meal.visual.has-meal-image::after,.can-make-visual.has-meal-image::after{
  content:"";position:absolute;inset:-16px;z-index:0;background-image:var(--meal-image);background-size:cover;background-position:center;filter:blur(20px) brightness(.45);transform:scale(1.08)
}
.meal-card-visual.has-meal-image::before,.plan-meal.visual.has-meal-image::before,.can-make-visual.has-meal-image::before{z-index:1}
.meal-card-visual.has-meal-image>*,.plan-meal.visual.has-meal-image>*,.can-make-visual.has-meal-image>*{z-index:2}
@media(max-width:700px){.app-banner{padding:16px}.banner-mark{width:46px;height:46px;border-radius:13px}.app-banner h1{font-size:21px}.app-banner .small{font-size:12px}}


/* ============================================================
   V2.7 DARK CONTRAST + SETTINGS MENU + SHARP MEAL IMAGES
============================================================ */

/* Keep hamburger on the far-right edge of the banner */
.app-banner{justify-content:space-between}
.banner-copy{flex:1;min-width:0}
.banner-actions{
  margin-left:auto!important;
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.hamburger-button{margin-left:auto}

/* Menu can scroll on smaller screens */
.app-menu{
  right:0!important;
  left:auto!important;
  max-height:76vh;
  display:flex;
  flex-direction:column;
}
.app-menu[hidden]{display:none!important}
.app-menu-scroll{overflow:auto;overscroll-behavior:contain}

/* Strong, readable button contrast in dark mode */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-green,
html[data-theme="dark"] .btn-red,
html[data-theme="dark"] .btn-purple,
html[data-theme="dark"] .btn-orange{
  color:#fff!important;
}
html[data-theme="dark"] .btn-primary{background:#2563eb!important}
html[data-theme="dark"] .btn-green{background:#15803d!important}
html[data-theme="dark"] .btn-red{background:#b91c1c!important}
html[data-theme="dark"] .btn-purple{background:#6d28d9!important}
html[data-theme="dark"] .btn-orange{background:#c2410c!important}
html[data-theme="dark"] .btn-light{
  background:#374151!important;
  color:#f9fafb!important;
  border-color:#4b5563!important;
}
html[data-theme="dark"] .theme-options button{
  background:#374151!important;
  color:#f9fafb!important;
  border-color:#4b5563!important;
}
html[data-theme="dark"] .menu-action{
  color:#f9fafb!important;
}
html[data-theme="dark"] .menu-action small,
html[data-theme="dark"] .app-menu-title,
html[data-theme="dark"] .app-menu-footer .muted{
  color:#d1d5db!important;
}
html[data-theme="dark"] .menu-icon{
  background:#374151!important;
  color:#f9fafb!important;
  border-color:#4b5563!important;
}
html[data-theme="dark"] nav button{color:#d1d5db}
html[data-theme="dark"] nav button.active{color:#93c5fd}
html[data-theme="dark"] .badge-green{background:#14532d;color:#dcfce7}
html[data-theme="dark"] .badge-yellow{background:#713f12;color:#fef3c7}
html[data-theme="dark"] .badge-red{background:#7f1d1d;color:#fee2e2}
html[data-theme="dark"] .badge-purple{background:#4c1d95;color:#ede9fe}
html[data-theme="dark"] .available-item{color:#86efac}
html[data-theme="dark"] .zero-item{color:#fca5a5}

/* System-dark gets the same contrast fixes */
@media (prefers-color-scheme:dark){
  html[data-theme="system"] .btn-primary,
  html[data-theme="system"] .btn-green,
  html[data-theme="system"] .btn-red,
  html[data-theme="system"] .btn-purple,
  html[data-theme="system"] .btn-orange{color:#fff!important}
  html[data-theme="system"] .btn-primary{background:#2563eb!important}
  html[data-theme="system"] .btn-green{background:#15803d!important}
  html[data-theme="system"] .btn-red{background:#b91c1c!important}
  html[data-theme="system"] .btn-purple{background:#6d28d9!important}
  html[data-theme="system"] .btn-orange{background:#c2410c!important}
  html[data-theme="system"] .btn-light{background:#374151!important;color:#f9fafb!important;border-color:#4b5563!important}
}

/* Sharp, fully visible meal images: no blur, no crop */
.meal-card-visual,
.plan-meal.visual,
.can-make-visual{
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-color:#111827!important;
}
.meal-card-visual.has-meal-image::after,
.plan-meal.visual.has-meal-image::after,
.can-make-visual.has-meal-image::after{
  display:none!important;
  content:none!important;
}
.meal-card-visual.has-meal-image,
.plan-meal.visual.has-meal-image,
.can-make-visual.has-meal-image{
  isolation:auto!important;
}
.meal-card-visual.has-meal-image::before,
.plan-meal.visual.has-meal-image::before,
.can-make-visual.has-meal-image::before{
  z-index:0!important;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.28) 46%,rgba(0,0,0,.04) 100%)!important;
}
.meal-card-visual.has-meal-image>*,
.plan-meal.visual.has-meal-image>*,
.can-make-visual.has-meal-image>*{
  z-index:1!important;
}

/* Settings UI */
.settings-list{display:grid;gap:10px}
.settings-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.settings-row:last-child{border-bottom:0}
.settings-inline{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:end;
}
.settings-chip-list{display:flex;flex-wrap:wrap;gap:8px}
.settings-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--border);
  background:var(--soft-bg);
  border-radius:999px;
  padding:7px 10px;
}
.settings-chip button{
  width:25px;height:25px;padding:0;
  border:0;border-radius:50%;
  background:var(--red);color:white;font-weight:900;
}
.user-card{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:11px;
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:8px;
}

@media(max-width:650px){
  .app-menu{width:min(340px,calc(100vw - 20px))}
  .settings-inline{grid-template-columns:1fr}
}


/* ============================================================
   V2.8 CRISP MEAL CARD IMAGES
   Use real <img> tags instead of background-image effects.
============================================================ */

.meal-card-crisp{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  min-width:0;
}

.meal-card-image-wrap{
  width:100%;
  height:210px;
  background:#111827;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}

.meal-card-image-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  backdrop-filter:none!important;
}

.meal-card-image-wrap.no-image{
  background:linear-gradient(135deg,#374151,#111827);
}

.meal-card-image-wrap.no-image::after{
  content:"Meal photo";
  color:#d1d5db;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
}

.meal-card-details{
  padding:16px;
  color:var(--text);
  background:var(--card);
  flex:1;
  display:flex;
  flex-direction:column;
}

.meal-card-details .recipe-title{
  color:var(--text);
  text-shadow:none!important;
}

.meal-card-details .recipe-meta,
.meal-card-details .muted{
  color:var(--muted)!important;
}

.meal-card-details .button-row{
  margin-top:auto;
}

.plan-image-wrap{
  width:100%;
  height:125px;
  background:#111827;
  border-radius:9px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:10px;
}

.plan-image-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:none!important;
  opacity:1!important;
}

.can-make-image-wrap{
  width:100%;
  height:180px;
  background:#111827;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
}

.can-make-image-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:none!important;
  opacity:1!important;
}

html[data-theme="dark"] .meal-card-details{
  background:#1f2937;
}

@media(max-width:600px){
  .meal-card-image-wrap{height:185px}
  .can-make-image-wrap{height:155px}
}


/* ============================================================
   V2.9 FULL-CARD CRISP BACKGROUND IMAGES
============================================================ */

.meal-card-background{
  position:relative;
  min-height:300px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background-color:#111827;
  background-image:var(--card-image);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  filter:none!important;
}

.meal-card-background::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.55) 38%,
    rgba(0,0,0,.15) 70%,
    rgba(0,0,0,.03) 100%
  );
  pointer-events:none;
}

.meal-card-background .meal-card-overlay-content{
  position:relative;
  z-index:1;
  min-height:300px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
}

.meal-card-background .recipe-title,
.meal-card-background .recipe-meta,
.meal-card-background .muted{
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

.meal-card-background .button-row{
  margin-top:12px;
}

.meal-card-background .btn-light{
  background:rgba(255,255,255,.92)!important;
  color:#111827!important;
  border-color:rgba(255,255,255,.8)!important;
}

.meal-card-background.no-card-image{
  background-image:linear-gradient(135deg,#374151,#111827);
}

.plan-card-background{
  position:relative;
  min-height:205px;
  margin-top:12px;
  border-radius:10px;
  overflow:hidden;
  background-color:#111827;
  background-image:var(--card-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.plan-card-background::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.12));
}

.plan-card-background .plan-overlay{
  position:relative;
  z-index:1;
  min-height:205px;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:white;
}

.plan-card-background .plan-overlay label,
.plan-card-background .plan-overlay strong{
  color:white!important;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

.can-make-card-background{
  position:relative;
  min-height:270px;
  background-color:#111827;
  background-image:var(--card-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:var(--radius);
  overflow:hidden;
}

.can-make-card-background::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.84),rgba(0,0,0,.15));
}

.can-make-card-background .can-make-overlay{
  position:relative;
  z-index:1;
  min-height:270px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
}

.can-make-card-background .can-make-overlay h3,
.can-make-card-background .can-make-overlay .recipe-meta,
.can-make-card-background .can-make-overlay .muted,
.can-make-card-background .can-make-overlay .available-item{
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

@media(max-width:600px){
  .meal-card-background,
  .meal-card-background .meal-card-overlay-content{min-height:270px}
}


/* ============================================================
   V3.1 PROFILES + PIN + ACTIVITY HISTORY
============================================================ */

.active-user-pill{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:6px 10px 6px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.12);
  color:white;
  font-weight:800;
}
.active-user-pill:hover{background:rgba(255,255,255,.18)}
.user-avatar{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.20);
  font-size:13px;
}
.banner-actions{gap:8px}

.profile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;
}
.profile-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  background:var(--soft-bg);
  text-align:center;
}
.profile-card .profile-avatar{
  width:54px;height:54px;border-radius:50%;
  margin:0 auto 10px;
  display:grid;place-items:center;
  background:var(--primary);
  color:white;
  font-size:20px;font-weight:900;
}
.profile-card strong{display:block}
.profile-card small{display:block;color:var(--muted);margin-top:4px}
.pin-entry{
  max-width:340px;
  margin:0 auto;
  text-align:center;
}
.pin-entry input{
  text-align:center;
  font-size:24px;
  letter-spacing:.28em;
  font-weight:800;
}
.profile-security-note{
  margin-top:12px;
  font-size:12px;
  color:var(--muted);
}

.activity-entry{
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:12px;
  align-items:start;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.activity-entry:last-child{border-bottom:0}
.activity-avatar{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--primary);
  color:white;font-weight:900;
}
.activity-time{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
.activity-detail{
  color:var(--muted);
  font-size:13px;
  margin-top:3px;
}
.profile-admin-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.profile-admin-row:last-child{border-bottom:0}

@media(max-width:650px){
  .active-user-pill #activeUserName{display:none}
  .active-user-pill{padding-right:7px}
  .activity-entry{grid-template-columns:38px 1fr}
  .activity-time{grid-column:2}
}


/* ============================================================
   V3.2 RESPONSIVE FIVE-TAB NAVIGATION
   Always fit Tonight / Meals / Inventory / Shopping / Plan
   across the available screen width without horizontal swiping.
============================================================ */

nav{
  width:100%;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:4px!important;
  overflow:visible!important;
  overflow-x:visible!important;
  padding-left:4px!important;
  padding-right:4px!important;
}

nav button{
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  padding:12px 4px!important;
  margin:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  font-size:clamp(10px,2.8vw,14px)!important;
  text-align:center!important;
}

@media(max-width:480px){
  nav{
    gap:1px!important;
    padding-left:1px!important;
    padding-right:1px!important;
  }

  nav button{
    padding:11px 1px!important;
    font-size:clamp(9px,2.65vw,12px)!important;
    letter-spacing:-0.02em;
  }
}

@media(max-width:360px){
  nav button{
    font-size:9px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* Prevent a parent container from reintroducing horizontal nav scrolling. */
header,
nav,
nav *{
  box-sizing:border-box;
}


/* ============================================================
   V4.0 SMART DASHBOARD / QUICK ADD / COOK MODE / SHOPPING
============================================================ */

.dashboard-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
.dashboard-stack{display:grid;gap:14px}
.dashboard-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.dashboard-card h3{margin-top:0}
.dashboard-list{display:grid;gap:8px}
.dashboard-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.dashboard-row:last-child{border-bottom:0}
.dashboard-meal-card{position:relative;min-height:330px;border-radius:var(--radius);overflow:hidden;background:#111827;background-size:cover;background-position:center;box-shadow:var(--shadow)}
.dashboard-meal-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.08))}
.dashboard-meal-content{position:relative;z-index:1;min-height:330px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}
.dashboard-meal-content h2{font-size:30px;margin:0 0 6px}.dashboard-meal-content .muted{color:#f3f4f6!important}
.recommendation-row{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center}
.recommendation-thumb{width:72px;height:58px;border-radius:9px;background:#111827;object-fit:cover}
.recommendation-score{font-weight:800;color:var(--primary)}
.reason-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}.reason-pill{font-size:11px;border:1px solid var(--border);border-radius:999px;padding:3px 7px;background:var(--soft-bg)}
.universal-add-button{position:fixed;right:22px;bottom:22px;z-index:140;width:58px;height:58px;border:0;border-radius:50%;background:var(--primary);color:#fff;font-size:34px;line-height:1;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.quick-add-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quick-add-card{min-height:110px;border:1px solid var(--border);border-radius:12px;background:var(--soft-bg);color:var(--text);padding:14px;text-align:left}.quick-add-card strong,.quick-add-card span{display:block}.quick-add-card span{color:var(--muted);font-size:12px;margin-top:5px}
.compact-modal{max-width:560px}
.smart-shopping-section{margin-bottom:18px}.smart-shopping-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid var(--border)}
.shop-reason{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.cook-focus{max-width:760px;margin:0 auto}.cook-progress{height:7px;background:var(--border);border-radius:999px;overflow:hidden;margin:10px 0 20px}.cook-progress span{display:block;height:100%;background:var(--primary)}
.cook-focus-step{font-size:clamp(24px,5vw,38px);font-weight:800;line-height:1.25;margin:24px 0}.cook-focus-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
.cook-timer{font-size:34px;font-weight:900;font-variant-numeric:tabular-nums}
.rating-stars{display:flex;gap:8px;justify-content:center;margin:18px 0}.rating-stars button{font-size:34px;border:0;background:transparent;color:#f59e0b}
.inventory-confidence{font-size:12px}
.aisle-total{font-weight:800}
.manual-shopping-card{display:grid;grid-template-columns:1fr 100px 110px auto;gap:8px;align-items:end;margin-bottom:12px}
.metric-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}.metric-box{padding:9px;border-radius:9px;background:rgba(255,255,255,.12);text-align:center}.metric-box strong{display:block}
@media(max-width:850px){.dashboard-grid{grid-template-columns:1fr}.dashboard-meal-card,.dashboard-meal-content{min-height:280px}.manual-shopping-card{grid-template-columns:1fr 1fr}.metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.universal-add-button{right:14px;bottom:14px;width:52px;height:52px}.quick-add-grid{grid-template-columns:1fr}.recommendation-row{grid-template-columns:58px 1fr}.recommendation-thumb{width:58px;height:50px}.recommendation-row>.btn{grid-column:2}.manual-shopping-card{grid-template-columns:1fr}}


/* ============================================================
   V4.0.1 DARK MODE — RECIPE NUTRITION VISIBILITY
============================================================ */

/* Recipe-view nutrition panels/cards must use theme-aware foregrounds. */
[data-theme="dark"] #recipeViewContent .nutrition-grid,
[data-theme="dark"] #recipeViewContent .nutrition-card,
[data-theme="dark"] #recipeViewContent .nutrition-panel,
[data-theme="dark"] #recipeViewContent .summary-box,
[data-theme="dark"] #recipeViewContent .macro-grid,
[data-theme="dark"] #recipeViewContent .macro-card,
body.dark-mode #recipeViewContent .nutrition-grid,
body.dark-mode #recipeViewContent .nutrition-card,
body.dark-mode #recipeViewContent .nutrition-panel,
body.dark-mode #recipeViewContent .summary-box,
body.dark-mode #recipeViewContent .macro-grid,
body.dark-mode #recipeViewContent .macro-card {
  color: var(--text) !important;
}

/* Catch nutrition markup that uses inline/light-mode text colors. */
[data-theme="dark"] #recipeViewContent .nutrition-grid *,
[data-theme="dark"] #recipeViewContent .nutrition-card *,
[data-theme="dark"] #recipeViewContent .nutrition-panel *,
[data-theme="dark"] #recipeViewContent .macro-grid *,
[data-theme="dark"] #recipeViewContent .macro-card *,
body.dark-mode #recipeViewContent .nutrition-grid *,
body.dark-mode #recipeViewContent .nutrition-card *,
body.dark-mode #recipeViewContent .nutrition-panel *,
body.dark-mode #recipeViewContent .macro-grid *,
body.dark-mode #recipeViewContent .macro-card * {
  color: var(--text) !important;
}

/* Secondary nutrition labels stay readable but visually subordinate. */
[data-theme="dark"] #recipeViewContent .muted,
[data-theme="dark"] #recipeViewContent small,
body.dark-mode #recipeViewContent .muted,
body.dark-mode #recipeViewContent small {
  color: var(--muted) !important;
}

/* General recipe nutrition table fallback. */
[data-theme="dark"] #recipeViewContent table,
[data-theme="dark"] #recipeViewContent th,
[data-theme="dark"] #recipeViewContent td,
body.dark-mode #recipeViewContent table,
body.dark-mode #recipeViewContent th,
body.dark-mode #recipeViewContent td {
  color: var(--text) !important;
  border-color: var(--border) !important;
}


/* ============================================================
   V4.0.2 EXACT DARK-MODE NUTRITION FIX
   Actual recipe modal container is #viewRecipeContent.
============================================================ */

html[data-theme="dark"] #viewRecipeContent h3,
html[data-theme="dark"] #viewRecipeContent .nutrition-grid,
html[data-theme="dark"] #viewRecipeContent .nutrition-stat,
html[data-theme="dark"] #viewRecipeContent .nutrition-stat span,
html[data-theme="dark"] #viewRecipeContent .nutrition-stat strong,
html[data-theme="dark"] #nutritionContent .nutrition-grid,
html[data-theme="dark"] #nutritionContent .nutrition-stat,
html[data-theme="dark"] #nutritionContent .nutrition-stat span,
html[data-theme="dark"] #nutritionContent .nutrition-stat strong,
html[data-theme="dark"] #cookContent .nutrition-grid,
html[data-theme="dark"] #cookContent .nutrition-stat,
html[data-theme="dark"] #cookContent .nutrition-stat span,
html[data-theme="dark"] #cookContent .nutrition-stat strong {
  color:#f9fafb!important;
}

html[data-theme="dark"] #viewRecipeContent .nutrition-stat,
html[data-theme="dark"] #nutritionContent .nutrition-stat,
html[data-theme="dark"] #cookContent .nutrition-stat {
  background:#111827!important;
  border-color:#4b5563!important;
}

html[data-theme="dark"] #viewRecipeContent .muted,
html[data-theme="dark"] #nutritionContent .muted,
html[data-theme="dark"] #cookContent .muted {
  color:#d1d5db!important;
}

@media (prefers-color-scheme:dark){
  html[data-theme="system"] #viewRecipeContent h3,
  html[data-theme="system"] #viewRecipeContent .nutrition-grid,
  html[data-theme="system"] #viewRecipeContent .nutrition-stat,
  html[data-theme="system"] #viewRecipeContent .nutrition-stat span,
  html[data-theme="system"] #viewRecipeContent .nutrition-stat strong,
  html[data-theme="system"] #nutritionContent .nutrition-stat,
  html[data-theme="system"] #nutritionContent .nutrition-stat span,
  html[data-theme="system"] #nutritionContent .nutrition-stat strong,
  html[data-theme="system"] #cookContent .nutrition-stat,
  html[data-theme="system"] #cookContent .nutrition-stat span,
  html[data-theme="system"] #cookContent .nutrition-stat strong {
    color:#f9fafb!important;
  }
  html[data-theme="system"] #viewRecipeContent .nutrition-stat,
  html[data-theme="system"] #nutritionContent .nutrition-stat,
  html[data-theme="system"] #cookContent .nutrition-stat {
    background:#111827!important;
    border-color:#4b5563!important;
  }
}

.recipe-serving-adjuster{
  display:flex;
  align-items:end;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0;
}
.recipe-serving-adjuster .field{margin:0;min-width:140px}


/* ============================================================
   V4.0.3 FAVORITE RECIPES
============================================================ */

.favorite-star{
  position:absolute;
  top:12px;
  right:12px;
  z-index:6;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(17,24,39,.62);
  color:#f9fafb;
  font-size:27px;
  line-height:1;
  padding:0;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.favorite-star.active{
  color:#facc15;
  background:rgba(17,24,39,.78);
  border-color:#fde68a;
}

.favorite-star:hover,
.favorite-star:focus-visible{
  transform:scale(1.05);
}

.favorites-section{
  margin-bottom:20px;
}

.favorites-panel{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}

.favorites-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.favorites-header h3{
  margin:0;
}

.favorites-count{
  color:var(--muted);
  font-size:13px;
}

.favorites-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:10px;
}

.favorite-mini-card{
  position:relative;
  min-height:150px;
  border-radius:12px;
  overflow:hidden;
  background-color:#111827;
  background-size:cover;
  background-position:center;
  border:1px solid var(--border);
}

.favorite-mini-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.84),rgba(0,0,0,.10));
}

.favorite-mini-content{
  position:relative;
  z-index:1;
  min-height:150px;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:white;
}

.favorite-mini-content strong{
  font-size:16px;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

.favorite-mini-content .muted{
  color:#f3f4f6!important;
  font-size:12px;
}

.favorite-mini-actions{
  display:flex;
  gap:6px;
  margin-top:8px;
  flex-wrap:wrap;
}

.favorite-mini-actions .btn{
  padding:7px 9px;
  font-size:12px;
}

.favorites-empty{
  padding:8px 0;
  color:var(--muted);
}

@media(max-width:520px){
  .favorites-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .favorite-mini-card,
  .favorite-mini-content{
    min-height:135px;
  }
}


/* ============================================================
   V4.1 RECIPE INTELLIGENCE
============================================================ */

.health-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:5px 9px;
  font-size:12px;
  font-weight:900;
}
.health-healthy{background:#dcfce7;color:#166534}
.health-semi{background:#fef3c7;color:#92400e}
.health-not{background:#fee2e2;color:#991b1b}
html[data-theme="dark"] .health-healthy{background:#14532d;color:#dcfce7}
html[data-theme="dark"] .health-semi{background:#78350f;color:#fef3c7}
html[data-theme="dark"] .health-not{background:#7f1d1d;color:#fee2e2}

.ingredient-detail-row{
  border-bottom:1px solid var(--border);
  padding:8px 0;
}
.ingredient-detail-row:last-child{border-bottom:0}
.ingredient-summary{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
}
.ingredient-caret{
  width:28px;height:28px;border:0;background:transparent;color:var(--text);
  font-size:18px;padding:0;
}
.ingredient-expanded{
  margin:8px 0 0 36px;
  padding:10px;
  border-radius:9px;
  background:var(--soft-bg);
  color:var(--text);
}
.ingredient-expanded .muted{color:var(--muted)!important}

.recipe-lab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.recipe-lab-card{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--card)}
.recipe-lab-card h3{margin-top:0}
.compatibility-list{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.compatibility-chip{border-radius:999px;padding:4px 8px;background:var(--soft-bg);border:1px solid var(--border);font-size:12px}
.warning-chip{background:#fef2f2;border-color:#fecaca;color:#991b1b}
html[data-theme="dark"] .warning-chip{background:#451a1a;border-color:#7f1d1d;color:#fecaca}
.preference-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.preference-box{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--soft-bg)}
.preference-box h3{margin-top:0}
.preference-list{display:flex;flex-wrap:wrap;gap:7px}
.preference-tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid var(--border);padding:6px 9px;background:var(--card)}
.preference-tag button{border:0;background:transparent;color:var(--red);font-weight:900;padding:0}
.ocr-progress{margin-top:10px}
@media(max-width:760px){.preference-columns{grid-template-columns:1fr}}

/* V5.0 KITCHEN OS */
.kitchen-quick-actions{margin-bottom:12px}.kitchen-strip{border:1px solid var(--border);border-radius:14px;padding:13px;margin:10px 0;background:var(--card);box-shadow:var(--shadow)}.kitchen-strip h3{margin:0 0 8px}.request-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;margin:3px;border-radius:999px;background:var(--soft-bg);border:1px solid var(--border)}.rescue-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}.quality-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.quality-badge{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900}.quality-whole{background:#dcfce7;color:#166534}.quality-mixed{background:#fef3c7;color:#92400e}.quality-processed{background:#fee2e2;color:#991b1b}html[data-theme="dark"] .quality-whole{background:#14532d;color:#dcfce7}html[data-theme="dark"] .quality-mixed{background:#78350f;color:#fef3c7}html[data-theme="dark"] .quality-processed{background:#7f1d1d;color:#fee2e2}.reset-row{display:grid;grid-template-columns:1fr minmax(150px,220px);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.confidence-buttons{display:flex;gap:5px;flex-wrap:wrap}.confidence-buttons button{padding:6px 8px}.smart-choice-label{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.reason-line{font-size:13px;color:var(--muted);margin-top:4px}@media(max-width:600px){.reset-row{grid-template-columns:1fr}}


/* ============================================================
   RECIPE CARDS + MULTI-CATEGORY + HOUSEHOLDS
============================================================ */

.active-household-name{
  display:block;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:700;
  color:#d1d5db;
}

.meal-card-background.recipe-click-card{cursor:pointer}

.recipe-card-icon-button{
  position:absolute;
  top:12px;
  z-index:8;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(17,24,39,.68);
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  font-size:28px;
  line-height:1;
  padding:0;
}
.recipe-card-plus{left:12px}
.meal-card-background .favorite-star{
  top:12px;
  right:12px;
  z-index:8;
}

.recipe-card-add-options{display:grid;gap:9px}
.recipe-card-add-option{
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  border:1px solid var(--border);
  border-radius:11px;
  padding:10px 12px;
  background:var(--soft-bg);
  color:var(--text);
}
.recipe-card-add-option span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:2px;
}

.recipe-category-multi{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.recipe-category-option{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  padding:8px 11px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--soft-bg);
  color:var(--text);
  cursor:pointer;
}
.recipe-category-option input{width:auto!important;margin:0}
.recipe-category-option.selected{
  border-color:var(--primary);
}
.recipe-category-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:6px;
}
.recipe-category-chip{
  display:inline-flex;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(17,24,39,.62);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:11px;
  font-weight:800;
}

.tonight-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.tonight-card-grid .meal-card-background{min-height:245px}
.tonight-card-badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.planned-side-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.planned-side-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--soft-bg);
  font-size:12px;
}

.household-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:12px;
  margin-bottom:9px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--soft-bg);
}
.household-link{
  margin-top:5px;
  word-break:break-all;
  color:var(--muted);
  font-family:ui-monospace,monospace;
  font-size:12px;
}
.household-status{
  display:inline-flex;
  margin-top:5px;
  padding:3px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}
.feedback-entry{
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.feedback-meta{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
  margin-bottom:5px;
}
.feedback-tag{
  display:inline-flex;
  padding:3px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--soft-bg);
  font-weight:800;
}

@media(max-width:650px){
  .household-card{grid-template-columns:1fr}
  .active-household-name{display:none}
  .tonight-card-grid{grid-template-columns:1fr}
}


/* ============================================================
   V5.3 HALL HOUSE UX CLEANUP
   Presentation-only. No household/data behavior changed.
============================================================ */

:root{
  --ux-radius:16px;
}

/* Consistent visual rhythm */
.card{
  border-radius:var(--ux-radius);
}

.section-title{
  margin-top:18px;
  margin-bottom:10px;
}

.section-title h2,
.section-title h3{
  letter-spacing:-.02em;
}

/* ------------------------------------------------------------
   Universal kitchen search
------------------------------------------------------------ */
.global-search-shell{
  width:min(1180px,calc(100% - 24px));
  margin:10px auto 2px;
}

.global-search-launcher{
  width:100%;
  min-height:48px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:9px 13px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  color:var(--text);
  box-shadow:0 3px 14px rgba(0,0,0,.06);
  text-align:left;
}

.global-search-icon{
  font-size:23px;
  line-height:1;
}

.global-search-hint{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.global-search-input{
  width:100%;
  min-height:52px;
  margin-bottom:12px;
  border-radius:14px;
  font-size:17px;
}

.global-search-results{
  display:grid;
  gap:8px;
  max-height:62vh;
  overflow:auto;
}

.global-result{
  width:100%;
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:10px;
  align-items:center;
  padding:11px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--soft-bg);
  color:var(--text);
  text-align:left;
}

.global-result-type{
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}

.global-result-detail{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
}

/* ------------------------------------------------------------
   Stronger visual cards, less competing UI
------------------------------------------------------------ */
.meal-card-background{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.meal-card-overlay-content{
  background:
    linear-gradient(
      to top,
      rgba(8,12,20,.91),
      rgba(8,12,20,.46) 62%,
      transparent
    );
  padding-top:74px;
}

.recipe-title{
  font-size:20px;
  line-height:1.12;
  letter-spacing:-.02em;
}

.recipe-meta{
  opacity:.90;
}

.recipe-category-list{
  gap:4px;
}

/* Keep + and star visually secondary to the food itself */
.recipe-card-icon-button,
.meal-card-background .favorite-star{
  box-shadow:0 3px 12px rgba(0,0,0,.22);
}

/* ------------------------------------------------------------
   Status language consistency
------------------------------------------------------------ */
.badge{
  border-radius:999px;
  font-weight:800;
  letter-spacing:0;
}

/* ------------------------------------------------------------
   Hamburger / settings cleanup
------------------------------------------------------------ */
.app-menu-section{
  padding-top:8px;
  padding-bottom:8px;
}

.app-menu-title{
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
  opacity:.72;
}

.menu-action{
  margin:2px 0;
  border-radius:11px;
}

.menu-action small{
  line-height:1.25;
}

/* ------------------------------------------------------------
   Week: meal first, controls second
------------------------------------------------------------ */
.day-card{
  padding:14px;
}

.day-name{
  font-size:18px;
  letter-spacing:-.02em;
}

.day-card select{
  min-height:44px;
}

.plan-random-button{
  opacity:.88;
}

/* ------------------------------------------------------------
   Progressive disclosure for dense item detail
------------------------------------------------------------ */
.ux-collapsible{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid var(--border);
}

.ux-collapsible summary{
  cursor:pointer;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  list-style:none;
}

.ux-collapsible summary::-webkit-details-marker{
  display:none;
}

.ux-collapsible summary::after{
  content:"›";
  float:right;
  transform:rotate(90deg);
}

.ux-collapsible[open] summary::after{
  transform:rotate(-90deg);
}

/* ------------------------------------------------------------
   Mobile density
------------------------------------------------------------ */
@media(max-width:700px){
  .global-search-shell{
    width:calc(100% - 16px);
    margin-top:7px;
  }

  .global-search-launcher{
    grid-template-columns:auto 1fr;
    min-height:44px;
    padding:8px 11px;
  }

  .global-search-hint{
    display:none;
  }

  .meal-card-background,
  .tonight-card-grid .meal-card-background{
    min-height:220px;
  }

  .recipe-title{
    font-size:19px;
  }

  .card{
    padding:13px;
  }

  .section-title{
    margin-top:15px;
  }

  .global-result{
    grid-template-columns:64px 1fr auto;
  }
}


/* ============================================================
   V5.3.1 COLLAPSIBLE SEARCH
============================================================ */

.global-search-shell{
  width:min(1180px,calc(100% - 24px));
  margin:8px auto 2px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:42px;
}

.global-search-icon-button{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--card);
  color:var(--text);
  font-size:23px;
  line-height:1;
  box-shadow:0 3px 12px rgba(0,0,0,.06);
  padding:0;
}

.compact-search-panel{
  width:min(560px,100%);
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  animation:compactSearchIn .16s ease-out;
}

.compact-search-input{
  width:100%;
  min-height:42px;
  border-radius:13px;
  font-size:16px;
  margin:0;
}

.compact-search-close{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--card);
  color:var(--muted);
  font-size:22px;
  padding:0;
}

@keyframes compactSearchIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:700px){
  .global-search-shell{
    width:calc(100% - 16px);
    margin-top:6px;
    min-height:40px;
  }

  .global-search-icon-button{
    width:40px;
    height:40px;
  }

  .compact-search-panel{
    width:100%;
  }
}


/* ============================================================
   V5.3.2 UPDATE NOTIFIER
============================================================ */

.app-update-notice{
  width:min(700px,calc(100% - 24px));
  margin:8px auto 2px;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  color:var(--text);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}

.app-update-notice[hidden]{
  display:none!important;
}

.app-update-copy{
  min-width:0;
}

.app-update-copy strong,
.app-update-copy span{
  display:block;
}

.app-update-copy span{
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
}

.app-update-refresh{
  min-height:40px;
}

.app-update-dismiss{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  font-size:23px;
  padding:0;
}

@media(max-width:600px){
  .app-update-notice{
    width:calc(100% - 16px);
    grid-template-columns:1fr auto;
  }

  .app-update-refresh{
    grid-column:1 / -1;
    width:100%;
  }

  .app-update-dismiss{
    grid-row:1;
    grid-column:2;
  }
}


/* ============================================================
   V5.4.1 COMPACT INVENTORY
============================================================ */

.inventory-compact-list{
  display:grid;
  gap:7px;
}

.inventory-compact-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;
  min-height:52px;
  padding:9px 10px 9px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
}

.inventory-compact-main{
  min-width:0;
}

.inventory-compact-name{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:800;
}

.inventory-compact-sub{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
}

.inventory-status-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block;
  margin-right:5px;
}

.inventory-three-dot{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--soft-bg);
  color:var(--text);
  font-size:22px;
  line-height:1;
  padding:0;
}

.inventory-item-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.inventory-item-detail-section{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:var(--soft-bg);
}

.inventory-item-detail-section h3{
  margin-top:0;
}

@media(max-width:700px){
  .inventory-compact-row{
    grid-template-columns:1fr auto;
  }

  .inventory-compact-row .inventory-compact-badge{
    display:none;
  }

  .inventory-item-detail-grid{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   V5.5.1 GROCERY STORE SHOPPING SECTIONS
============================================================ */

.grocery-shopping-section{
  margin-bottom:18px;
}

.grocery-shopping-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  padding:7px 4px;
  border-bottom:1px solid var(--border);
}

.grocery-shopping-heading h3{
  margin:0;
  font-size:17px;
}

.grocery-shopping-heading span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.grocery-shopping-section .shopping-row{
  margin-bottom:6px;
}

.recipe-category-option{
  transition:border-color .12s ease,background .12s ease;
}

.recipe-category-option.selected{
  border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 12%,var(--soft-bg));
}


/* ============================================================
   V5.5.2 FULL INVENTORY ADD MODAL
============================================================ */

.inventory-add-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.inventory-add-section{
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--soft-bg);
}

.inventory-add-section h3{
  margin:0 0 10px;
}

.inventory-add-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
}

@media(max-width:700px){
  .inventory-add-grid{
    grid-template-columns:1fr;
  }

  .inventory-add-actions{
    flex-direction:column;
  }

  .inventory-add-actions .btn{
    width:100%;
  }
}