/* Screen-only palette: paper retains the light colors. Photos and codes are untouched. */
:root{color-scheme:light}
@media screen{
 :root[data-theme="dark"]{
  color-scheme:dark;
  --dark:#e5eee8;--muted:#b0bfb6;--bg:#101915;--surface:#19251f;--surface-muted:#223129;
  --line:#3b5044;--field-line:#698071;--green:#83deb0;--green-soft:#203c2d;--green-tint:#2b4837;
  --green-line:#52795f;--placeholder:#8faaa0;--yellow-soft:#3d331c;--yellow-ink:#f9d97a;
  --orange-soft:#422b23;--danger:#ffad95;--lime-soft:#2e3b22;--lime-ink:#cee793;--focus:#7de3b0;
  --shadow-card:0 2px 12px #0003;--shadow-popover:0 12px 40px #0008;
 }
 :root[data-theme="dark"] .chip.active{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
 :root[data-theme="dark"] .add:hover{background:var(--green-tint)}
 :root[data-theme="dark"] #header-cart:hover{color:var(--green)}
 :root[data-theme="dark"] .add,:root[data-theme="dark"] .checked-section{border-color:var(--green-line)}
 :root[data-theme="dark"] .card:has(.placeholder) .edit-btn{background:var(--surface);color:var(--dark)}
 :root[data-theme="dark"] .picker-row:hover,:root[data-theme="dark"] .history-card:hover,
 :root[data-theme="dark"] .meal-day.is-today{background:var(--surface-muted)}
 :root[data-theme="dark"] dialog::backdrop{background:#0009}
}
.theme-setting{max-width:320px;margin-block:16px}
input,select,textarea{color:inherit}