/* Loaded after the component styles. Literal white is reserved for food imagery. */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --green: #205c44;
  --green-dark: #163f32;
  --lime: #d9edb7;
  --mint: #edf4e9;
  --bg: #f7f8f4;
  --white: #ffffff;
  --ink: #21382c;
  --muted: #637065;
  --line: #dfe6dc;
  --orange: #b7773c;
  --red: #a63f36;
  --surface-soft: #f0f4eb;
  --surface-note: #f1f4ed;
  --surface-hover: #e9f1e2;
  --surface-highlight: #eaf1df;
  --surface-bar: #ffffffed;
  --action-bg: #205c44;
  --action-hover: #163f32;
  --on-action: #ffffff;
  --hero-bg: #205c44;
  --hero-ink: #ffffff;
  --hero-muted: #d4e6d0;
  --track: #dce5d5;
  --progress: #719449;
  --focus: #769a45;
  --warning-bg: #fff0dc;
  --warning-ink: #87511e;
  --error-bg: #fff0ed;
  --error-ink: #a34237;
  --overlay: #11261fa6;
  --shadow: 0 12px 35px #203d2810;
  --planner-card-min: 242px;
  --planner-image-height: 84px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --green: #a7d7ae;
  --green-dark: #163f32;
  --lime: #d4e8b3;
  --mint: #233c2e;
  --bg: #101a15;
  --white: #19271f;
  --ink: #edf4ea;
  --muted: #b0bfb1;
  --line: #3b4e40;
  --orange: #edb582;
  --red: #f0aaa2;
  --surface-soft: #203127;
  --surface-note: #24342a;
  --surface-hover: #2b4132;
  --surface-highlight: #233b2b;
  --surface-bar: #19271ff2;
  --action-bg: #b4d9a3;
  --action-hover: #c9e7b9;
  --on-action: #153321;
  --hero-bg: #1c4634;
  --hero-ink: #f0f6eb;
  --hero-muted: #c3d8c3;
  --track: #3a4e3b;
  --progress: #acd08d;
  --focus: #c0e294;
  --warning-bg: #493522;
  --warning-ink: #ffce9b;
  --error-bg: #472c2b;
  --error-ink: #ffc0b6;
  --overlay: #030906c9;
  --shadow: 0 14px 38px #00000038;
}

html { scrollbar-gutter: stable; }
body { min-width: 0; background: var(--bg); color: var(--ink); }
img { max-width: 100%; }
button, input, select, textarea { color: inherit; }
input, select, textarea { color-scheme: inherit; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--action-bg); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Shared surfaces, including components that previously used literal white. */
.sidebar, .card, .stat-card, .recipe-card, .auth-layout, .feature-step,
.modal, .modal-head, .choice, .brand-choice, .extra-choice, .pill,
.iconbtn, .appliance-resources a, .recipe-view-buttons button {
  background-color: var(--white);
  border-color: var(--line);
  color: var(--ink);
}
.topbar { background: var(--surface-bar); }
.note, .budget-card .note, .side-tip, .macro, .range-field,
.empty, .week-mini, .appliance-resources {
  background: var(--surface-note);
  border-color: var(--line);
  color: var(--muted);
}
.catalogue-overview, .budget-live, .pricing-progress,
.price-comparison .selected-store {
  background: var(--surface-highlight);
  border-color: var(--line);
}
.float-note { background: var(--white); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow); }
.nav-item:hover, .iconbtn:hover { background: var(--surface-hover); color: var(--green); }
.nav-item.active, .choice.selected, .brand-choice:has(input:checked),
.extra-choice:has(input:checked) { background: var(--mint); border-color: var(--green); color: var(--green); }
.extra-switch, .onboarding .steps span { background: var(--track); }
.onboarding .steps span.done { background: var(--green); }
.extra-choice input:checked ~ .extra-switch { background: var(--action-bg); }
.extra-choice input:checked ~ .extra-switch::before { background: var(--on-action); }
.brand-selected { background: var(--action-bg); color: var(--on-action); border-color: var(--white); }
.shop-item { border-color: var(--line); }
.shop-item.checked .item-label { color: var(--muted); }
.recipe-label { background: var(--mint); color: var(--green); }
.badge.orange { background: var(--warning-bg); color: var(--warning-ink); }
.errorbox, .btn.danger { background: var(--error-bg); color: var(--error-ink); }
.modal-backdrop { background: var(--overlay); }

/* Use a contrasting foreground for active buttons even when the accent becomes light. */
.btn { min-height: 44px; background: var(--action-bg); color: var(--on-action); }
.btn:hover { background: var(--action-hover); }
.btn.secondary { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { background: var(--surface-hover); }
.btn.soft { background: var(--mint); color: var(--green); }
.btn.danger:hover { background: var(--error-bg); }
.pill.active, .recipe-view-buttons button.active {
  background: var(--action-bg); border-color: var(--action-bg); color: var(--on-action);
}
.recipe-view-buttons button { min-height: 44px; }
.iconbtn { min-width: 40px; min-height: 40px; }
.welcome-card, .banner, .auth-art { background: var(--hero-bg); color: var(--hero-ink); }
.welcome-copy .upper, .welcome-copy p, .banner p, .auth-art p { color: var(--hero-muted); }
.welcome-copy .btn, .banner .btn { background: var(--lime); color: #173b29; }
.avatar { background: var(--lime); color: #173b29; }
.mini-day.today { background: var(--action-bg); color: var(--on-action); }
.mini-day.today b { color: var(--on-action); }
#toast { background: var(--hero-bg); color: var(--hero-ink); border: 1px solid var(--line); }

/* Keep secondary text readable in either theme instead of retaining hardcoded pale greys. */
.stat-label, .recipe-meta, .recipe-body .kind, .slot-label, .app-footer,
.budget-info, .range-limits, .compatible-toggle, .uncalculated,
.recipe-credit, .nutrition-method, .nutrition-line small, .instructions,
.legal p, .legal li, .catalogue-overview p, .catalogue-overview .upper,
.side-tip p, .side-tip .icon, .nav-section .upper, .nav-item,
.crumb, .greeting-note, .budget-live span, .mini-day, .mini-day b {
  color: var(--muted);
}
.crumb strong, .chart-col b { color: var(--ink); }
.nav-item.active, .recipe-meta strong, .nutrition-method summary,
.catalogue-overview strong, .budget-live > .icon { color: var(--green); }
.catalogue-overview .badge { background: var(--white); }
.stat-icon, .stat-card:nth-child(2) .stat-icon, .stat-card:nth-child(3) .stat-icon {
  background: var(--mint); color: var(--green);
}
.progress-track { background: var(--track); }
.progress-track span, .chart-col .bar { background: var(--progress); }
.water-drops .icon { color: var(--track); }
.water-drops .filled, .water-drops .filled .icon { color: #79b4bc; fill: #79b4bc; }

.field input, .field select, .field textarea, .input, .range-number input {
  min-width: 0; background: var(--white); color: var(--ink); border-color: var(--line);
}
.field input:not([type="checkbox"]):not([type="radio"]),
.field select, .input { min-height: 44px; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
.range-number input { min-height: 40px; }
.preference-range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--green) var(--range-percent), var(--track) var(--range-percent));
}
.preference-range::-moz-range-track { background: var(--track); }
.preference-range::-moz-range-progress { background: var(--green); }
.preference-range::-webkit-slider-thumb { background: var(--white); border-color: var(--green); }
.preference-range::-moz-range-thumb { background: var(--white); border-color: var(--green); }

/* Food images stay on their actual white studio background in both modes. */
.recipe-visual.generated, .recipe-image:has(.recipe-visual.generated) { background: #fff; }
.recipe-visual.generated img { background: #fff; filter: none; mix-blend-mode: normal; }
.generated-image-label { background: #fffffff2; color: #46563d; }
.visual-ingredients span { color: #46563d; background: #fffdf5f2; }
.recipe-image .time { background: #fffffff2; color: #31452d; }
.recipe-image .fav { background: #fffffff2; color: #445b36; }
.recipe-image .fav.is-favorite { color: #a45743; }
.brand-logo { color-scheme: light; }

/* Theme controls work in both the public navigation and the private top bar. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 0 0 auto; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--white); color: var(--ink); font-size: 12px; font-weight: 600;
  line-height: 1.35; white-space: nowrap; cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-hover); border-color: var(--focus); }
.theme-toggle .icon { width: 18px; height: 18px; }
.theme-toggle-label { display: inline; }

/* Constrain grid/flex children rather than hiding page overflow. */
.main, .content, .dashboard-grid > *, .settings-layout > *, .shop-layout > *,
.grid2 > *, .grid3 > *, .stats-grid > *, .macro-grid > *, .field-grid > *,
.catalogue-grid > *, .extra-grid > *, .choice-grid > *, .welcome-card > *,
.planner-scroll, .planner-grid > section, .page-head > *, .modal-body,
.topbar > .row { min-width: 0; }
.content { width: 100%; }
.page-head, .section-head, .app-footer, .public-footer { flex-wrap: wrap; }
.page-head .btn { max-width: 100%; white-space: normal; }
.page-head h1, .recipe-body h3, .ingredient-line, .shop-item .item-label,
.note, .legal, .recipe-credit, .recipe-references a { overflow-wrap: anywhere; }
.topbar-right { flex-shrink: 0; gap: 12px; }
.crumb { min-width: 0; }
.crumb strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalogue-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-layout { grid-template-columns: minmax(0, 1fr) 290px; }
.settings-layout { grid-template-columns: minmax(0, 1fr) 280px; }
.shop-item .item-label { min-width: 0; }
.shop-item .qty { flex: 0 0 auto; white-space: nowrap; }
.shop-item { min-height: 48px; }
.ingredient-line { gap: 12px; }
.recipe-detail .ingredient-line > span { max-width: none; min-width: 0; }
.recipe-detail .ingredient-line > strong { flex-shrink: 0; margin-left: 0; }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--muted) var(--surface-soft); }
.history-table td { overflow-wrap: anywhere; }
.history-table th { line-height: 1.45; }
.history-table .btn { white-space: normal; }
.chart { max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; height: 240px; }
.chart-col { flex: 1 0 35px; min-width: 35px; }
.chart-col span { white-space: nowrap; }
.chart-col b { font-size: 11px; }
.modal { max-height: min(92vh, 92dvh); }
.modal-head h2 { min-width: 0; overflow-wrap: anywhere; }
.modal-head .iconbtn { flex-shrink: 0; }

/* One shared row per meal across seven columns. The app supplies the exact slot count. */
.planner-grid {
  --planner-row-count: calc(var(--planner-slot-count, 2) + 2);
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px 10px; align-items: stretch; width: 100%;
}
.planner-grid > section {
  display: grid; grid-template-rows: 46px repeat(var(--planner-slot-count, 2), calc(var(--planner-card-min) + 28px)) 36px;
  gap: 12px; align-content: start;
}
.plan-day-head { margin: 0; min-height: 46px; padding: 9px 8px; }
.plan-day-head.today { background: var(--mint); color: var(--green); }
.plan-slot {
  display: flex; flex-direction: column; margin: 0; min-width: 0;
  min-height: var(--planner-card-min); height: 100%; background: var(--white);
  border-color: var(--line); align-self: stretch;
}
.plan-slot:has(.slot-label):has(a[href*="dessert"]) { background: var(--white); }
.plan-slot .slot-label {
  min-height: 44px; flex: 0 0 44px; padding: 5px 7px; gap: 3px;
  color: var(--muted); font-size: 9px; line-height: 1.35; letter-spacing: .025em;
}
.plan-slot .slot-label button {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-width: 32px; min-height: 32px; padding: 4px;
  border-radius: 7px; color: var(--green);
}
.plan-slot .slot-label button:hover { background: var(--mint); }
.plan-slot > a { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.plan-slot .recipe-visual.compact,
.plan-slot .recipe-visual.generated.compact img {
  height: var(--planner-image-height); min-height: var(--planner-image-height);
}
.plan-slot .recipe-visual.compact { flex: 0 0 var(--planner-image-height); }
.slot-body { display: flex; flex-direction: column; flex: 1; padding: 10px 8px; }
.slot-body h3 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; height: 4.35em; min-height: 4.35em;
  font-size: 12px; line-height: 1.45; overflow-wrap: anywhere;
}
.slot-body small { font-size: 10px; line-height: 1.4; margin-top: 6px; }
.slot-body > small:last-child { margin-top: auto; padding-top: 6px; }
.slot-empty { display: grid; place-content: center; justify-items: center; flex: 1; padding: 20px 8px; color: var(--muted); }
.slot-empty .textbtn { min-width: 44px; min-height: 44px; justify-content: center; }
.plan-day-foot { margin: 0; min-height: 36px; padding: 8px 3px; line-height: 1.4; }
.planner-scroll { padding-bottom: 12px; overscroll-behavior-x: contain; scrollbar-color: var(--muted) var(--surface-soft); }
@supports (grid-template-rows: subgrid) {
  .planner-grid { grid-template-rows: 46px repeat(var(--planner-slot-count, 2), minmax(var(--planner-card-min), auto)) 36px; }
  .planner-grid > section { grid-template-rows: subgrid; grid-row: span var(--planner-row-count); row-gap: 12px; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .sidebar { width: 210px; padding-right: 14px; padding-left: 14px; }
  .main { margin-left: 210px; }
  .content { padding: 28px 20px 40px; }
  .topbar { padding-right: 20px; padding-left: 20px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .planner-grid { --planner-image-height: 76px; --planner-card-min: 232px; column-gap: 7px; }
  .slot-body { padding-right: 6px; padding-left: 6px; }
  .slot-body h3 { font-size: 11px; }
  .slot-body small { font-size: 9px; }
  .plan-slot .slot-label { padding-right: 4px; padding-left: 4px; font-size: 8px; }
  .settings-layout, .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .shop-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .sidebar {
    width: min(280px, 86vw); transform: translateX(-100%); visibility: hidden;
    padding: 28px 20px; box-shadow: var(--shadow); overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); visibility: visible; }
  .mobile-menu { display: inline-flex; }
  .main { margin-left: 0; }
  .topbar { height: auto; min-height: 68px; padding: 10px 20px; gap: 12px; }
  .topbar-right > span { display: none; }
  .content { padding: 28px 20px 40px; }
  .dashboard-grid, .settings-layout, .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .dashboard-aside, .shop-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .planner-grid { width: 1100px; min-width: 1100px; }
  .planner-scroll { position: relative; padding-bottom: 16px; }
  .planner-scroll::before {
    content: "Faites défiler la semaine horizontalement →";
    display: block; position: sticky; left: 0; width: fit-content; max-width: 100%;
    padding: 0 2px 10px; color: var(--muted); font-size: 11px;
  }
  .planner-summary { gap: 14px 22px; }
  .hero { gap: 36px; }
  .hero h1 { font-size: clamp(42px, 6vw, 58px); }
  .public-links { gap: 14px; }
  .auth-layout { margin-right: 20px; margin-left: 20px; }
}

@media (max-width: 767px) {
  .grid2, .grid3, .shop-side { grid-template-columns: minmax(0, 1fr); }
  .recipe-grid, .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-nav { padding: 18px 20px; gap: 12px; }
  .public-links > a:not(.btn) { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 24px 24px 38px; }
  .hero-art { width: min(90%, 500px); margin: auto; }
  .hero-proof { flex-wrap: wrap; gap: 10px 15px; }
  .public-section { padding: 35px 24px; }
  .public-section .grid3 { grid-template-columns: minmax(0, 1fr); }
  .banner { flex-direction: column; align-items: flex-start; }
  .auth-layout { grid-template-columns: minmax(0, 1fr); }
  .auth-art { display: none; }
  .filter-bar { flex-wrap: wrap; gap: 14px; }
  .filter-bar .search-wrap { min-width: 0; flex-basis: 100%; }
  .catalogue-selectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogue-selectors .field { min-width: 0; }
  .catalogue-selectors .field:last-child { grid-column: 1 / -1; }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: calc(100dvh - 20px); }
  .modal-body { padding: 20px; }
  .modal-head { padding: 15px 20px; gap: 12px; }
  .modal-actions > .btn { flex: 1 1 140px; }
}

@media (max-width: 600px) {
  .theme-toggle { min-width: 44px; width: 44px; padding: 9px; }
  .theme-toggle-label { display: none; }
  .topbar { padding: 10px 16px; gap: 8px; }
  .topbar-right { gap: 8px; }
  .crumb { font-size: 10px; gap: 5px; }
  .crumb .icon { width: 14px; }
  .topbar > .row { gap: 8px; }
  .content { padding: 24px 16px 36px; }
  .page-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .page-head h1 { font-size: clamp(23px, 6vw, 28px); }
  .page-head p { max-width: none; }
  .page-head > .btn { justify-self: start; font-size: 12px; }
  .stats-grid { gap: 8px; }
  .stat-card { padding: 14px 10px; }
  .stat-card strong { font-size: 21px; overflow-wrap: anywhere; }
  .stat-card strong small { display: block; margin: 4px 0 0; }
  .stat-label { font-size: 10px; line-height: 1.5; }
  .card { padding: 18px; }
  .dashboard-aside, .extra-grid { grid-template-columns: minmax(0, 1fr); }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-card { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .welcome-copy { padding: 22px 18px; }
  .welcome-copy h2 { font-size: 25px; }
  .welcome-copy .btn { font-size: 11px; }
  .planner-grid { width: 1050px; min-width: 1050px; }
  .planner-summary { padding: 15px; gap: 14px 20px; }
  .planner-actions > .btn { flex: 1 1 150px; }
  .week-controls { min-width: 0; gap: 6px; }
  .week-controls span { min-width: 100px; }
  .table-scroll { padding-bottom: 8px; }
  .price-comparison .history-table { min-width: 0; }
  .price-comparison .history-table td, .price-comparison .history-table th { padding: 12px 5px; }
  .price-comparison .history-table td:last-child { width: 78px; }
  .price-comparison .history-table .btn { min-height: 44px; padding: 8px; }
  .shop-item .qty { max-width: 90px; white-space: normal; text-align: right; }
  .shop-item .iconbtn { min-width: 32px; min-height: 40px; }
  .shop-add .btn { flex-shrink: 0; }
  .meal-log { flex-wrap: wrap; gap: 10px; }
  .meal-log .log-name { flex: 1 1 140px; min-width: 0; }
  .meal-log > strong { margin-left: auto; }
  .macro-grid { gap: 8px; }
  .macro { padding: 13px 10px; }
  .macro strong { font-size: 20px; }
  .nutrition-line { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .nutrition-line small { font-size: 11px; }
  .nutrition-line strong { font-size: 19px; }
  .recipe-view-buttons { gap: 6px; }
  .recipe-view-buttons button { flex: 1 1 88px; padding: 8px 6px; font-size: 11px; }
  .app-footer > .row { flex-wrap: wrap; gap: 10px 14px; }
  .recipe-detail .ingredient-line > strong { max-width: 40%; text-align: right; white-space: normal; }
}

@media (max-width: 420px) {
  .public-nav { padding: 16px; gap: 10px; }
  .public-nav .brand { font-size: 15px; gap: 8px; }
  .public-nav .brand img { width: 32px; height: 32px; }
  .public-nav .brand span small { font-size: 8px; }
  .public-links { gap: 7px; }
  .public-links .btn { min-height: 44px; padding: 8px 10px; font-size: 10px; }
  .hero h1 { font-size: 44px; }
  .float-note { padding: 10px 12px; gap: 8px; font-size: 10px; }
  .float-note strong { font-size: 11px; }
  .float-note .dot { width: 28px; height: 28px; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-form { padding: 26px 20px; }
  .catalogue-grid, .recipe-grid { gap: 10px; }
  .catalogue-grid .recipe-body { padding: 12px 10px; }
  .recipe-meta { flex-wrap: wrap; gap: 6px; }
  .recipe-meta strong { font-size: 11px; }
  .catalogue-overview { padding: 20px; }
  .catalogue-overview .badge { max-width: 100%; white-space: normal; }
  .brand-grid { gap: 7px; }
  .brand-choice { padding: 10px 6px; }
  .brand-choice:has(input:checked) { padding: 9px 5px; }
  .modal-body { padding: 18px; }
  .modal-head { padding: 14px 18px; }
}

@media (pointer: coarse) {
  .topbar .iconbtn, .sidebar-close, .plan-slot .slot-label button { min-width: 44px; min-height: 44px; }
  .plan-slot .slot-label { flex-basis: 54px; min-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .recipe-card, .brand-choice, .theme-toggle, .sidebar { transition: none; }
  .btn:hover, .recipe-card:hover, .brand-choice:hover { transform: none; }
}

@media print {
  html, html[data-theme] {
    color-scheme: light !important;
    --bg: #fff !important; --white: #fff !important; --ink: #17271e !important;
    --muted: #47564a !important; --line: #bfc9bd !important;
    --green: #205c44 !important; --mint: #edf4e9 !important;
    --surface-note: #f3f5ef !important; --surface-soft: #f3f5ef !important;
    --surface-highlight: #edf4e9 !important; --track: #dce5d5 !important;
    --surface-hover: #e9f1e2 !important; --action-bg: #205c44 !important;
    --action-hover: #163f32 !important; --on-action: #fff !important;
    --warning-bg: #fff0dc !important; --warning-ink: #87511e !important;
    --error-bg: #fff0ed !important; --error-ink: #a34237 !important;
    --hero-bg: #205c44 !important; --hero-ink: #fff !important;
    --hero-muted: #d4e6d0 !important; --progress: #719449 !important;
  }
  body { background: #fff; color: #17271e; }
  .theme-toggle, .recipe-view-buttons, .planner-scroll::before { display: none !important; }
  .main { margin-left: 0; }
  .content { padding: 0; }
  .planner-grid { width: 100%; min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .planner-scroll, .table-scroll, .chart { overflow: visible; }
  .history-table { min-width: 0 !important; }
  .modal { max-height: none; }
  .modal-backdrop { background: #fff; }
  .card, .plan-slot { box-shadow: none; }
}