/* Korbklar v3: budget-first dashboard, direct entry and soft sage product colors. */
:root {
  --bg: #eef4eb;
  --mint: #e1f0df;
  --line: #d5e5d2;
  --green: #176747;
}
.stage {
  background:
    radial-gradient(circle at 72% 24%, #deefda 0, transparent 40%),
    radial-gradient(circle at 0% 100%, #dcebd5 0, transparent 42%),
    #f0f5ed;
}
.phone, .app-header { background: var(--bg); }
.bottom-nav {
  background: #e6f0e2;
  border-top-color: #d3e3d0;
}
.nav-item { color: #7a9783; }
.nav-item.active { color: var(--green); }
.tip-card {
  background: #e7f1e4;
  border-color: #d7e7d3;
}
.tip-card .product-emoji {
  background: #d7e7d2;
}
.tip-card.struck { opacity: .7; }
.item-tile {
  background: linear-gradient(150deg, #e4f0e0, #edf6ea);
  border-color: #cee2ca;
}
.tile-quantity {
  background: #cee5ca;
  color: #346b48;
}
.tile-check svg {
  background: #e1efdb;
  border-color: #c7dcc1;
}
.item-tile.is-checked {
  background: #d7e8d4;
  border-color: #bcd5b8;
}
.saving-card, .history-item {
  background: #f2f7ee;
  border-color: #dbe8d7;
}
.soft-card, .stat-card { background: #f3f8f0; }
.ghost-btn { background: #f5f8f0; }
.view-switch {
  background: #dbeada;
  border-color: #cfe2cd;
}
.view-switch-btn.active {
  background: #f8fbf5;
}
.home-heading {
  font-size: 29px;
  letter-spacing: -.055em;
  line-height: 1.1;
  margin: 6px 0 4px;
  font-weight: 780;
}
.home-subtitle {
  font-size: 12px;
  color: #728b76;
  margin: 0 0 16px;
  line-height: 1.5;
}
.home-period-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}
.period-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 13px;
  background: #dcebd8;
  border: 1px solid #cfe3cb;
}
.period-switch button {
  border: 0;
  background: transparent;
  padding: 7px 14px;
  border-radius: 10px;
  color: #718c78;
  font-size: 11px;
  font-weight: 770;
}
.period-switch button.active {
  color: var(--green);
  background: #fffef9;
  box-shadow: 0 1px 5px #204c2820;
}
.home-cost-card {
  border-radius: 23px;
  padding: 17px 19px 18px;
  background: linear-gradient(126deg, #155a41, #267e58);
  color: #fff;
  box-shadow: 0 8px 22px #175c3d24;
}
.home-cost-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #d0e7d6;
  font-size: 12px;
  font-weight: 680;
}
.home-cost-count {
  padding: 5px 8px;
  background: #ffffff20;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  font-size: 10px;
}
.home-cost-total {
  font-size: 39px;
  font-weight: 780;
  line-height: 1;
  letter-spacing: -.06em;
  margin-top: 17px;
  font-variant-numeric: tabular-nums;
}
.home-cost-hint {
  font-size: 11px;
  color: #d5e9dc;
  margin-top: 7px;
  line-height: 1.4;
}
.home-budget-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.home-budget-metric {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 101px;
  padding: 14px 15px;
  text-align: left;
  color: var(--ink);
  border: 1px solid #c9e2c8;
  border-radius: 18px;
  background: #dcefd9;
}
.home-budget-metric .metric-label {
  color: #487858;
  font-size: 11px;
  font-weight: 680;
  display: flex;
  align-items: center;
  gap: 4px;
}
.home-budget-metric strong {
  display: block;
  margin-top: 7px;
  font-size: 25px;
  letter-spacing: -.045em;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}
.home-budget-metric small {
  display: block;
  margin-top: 5px;
  color: #75947b;
  font-size: 9.5px;
}
.home-budget-left {
  background: #e8f2de;
  border-color: #d4e6c7;
}
.home-budget-left strong { color: var(--green); }
.home-budget-left.over {
  background: #f7eae1;
  border-color: #edccbb;
}
.home-budget-left.over strong, .home-budget-left.over .metric-label { color: #ac5948; }
.home-usage {
  margin: 12px 1px 0;
  padding: 0 2px;
}
.home-usage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #708875;
}
.home-usage-head strong {
  color: #365d41;
  font-size: 12px;
}
.home-usage-track {
  display: flex;
  height: 7px;
  border-radius: 99px;
  background: #d5e6d0;
  overflow: hidden;
  margin-top: 8px;
}
.home-usage-track .usage-spent { background: #155b40; }
.home-usage-track .usage-planned { background: #80b58a; }
.home-usage p {
  margin: 7px 0 0;
  font-size: 10px;
  line-height: 1.45;
  color: #829783;
}
.home-open-list { margin-top: 17px; }
.home-savings-row {
  width: 100%;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #cde4cb;
  background: #e0efdd;
  border-radius: 17px;
  padding: 13px;
  text-align: left;
  color: #266544;
}
.home-savings-icon {
  display: grid;
  place-items: center;
  background: #cae4c6;
  height: 37px;
  width: 37px;
  border-radius: 12px;
}
.home-savings-copy { flex: 1; }
.home-savings-copy strong { display: block; font-size: 13px; }
.home-savings-copy small { display: block; margin-top: 3px; font-size: 11px; color: #6b8b73; }
.home-idle-note {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 16px;
  padding: 13px;
  color: #6a8e73;
  background: #e2f0df;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 12px;
}
.list-compact-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 5px 0 13px;
}
.list-compact-stats > div, .list-compact-stats > button {
  display: block;
  border: 1px solid #cfe2cd;
  background: #dfeedd;
  border-radius: 17px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
}
.list-compact-stats > button { background: #ebf4e5; }
.list-compact-stats > button.over { background: #f5e6dd; border-color: #e7c8b9; }
.list-compact-stats span {
  display: block;
  color: #65826a;
  font-size: 10px;
  line-height: 1.25;
}
.list-compact-stats span svg { display: inline; vertical-align: middle; }
.list-compact-stats strong {
  display: block;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -.04em;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.list-compact-stats > button.over strong { color: #a95347; }
.list-entry {
  border: 1px solid #cbdcc5;
  background: #dcebd7;
  border-radius: 19px;
  padding: 13px;
}
.list-entry > label {
  display: block;
  color: #276347;
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 8px;
}
.list-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fbfcf7;
  border: 1px solid #bed9b9;
  border-radius: 13px;
  padding: 0 13px;
  min-height: 48px;
  color: var(--green);
}
.list-search-box:focus-within { border-color: #3a9a69; box-shadow: 0 0 0 3px #62b98730; }
.list-search-box input {
  min-width: 0;
  flex: 1;
  height: 47px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  outline: 0;
  box-shadow: none;
  font-size: 13px;
  caret-color: var(--green);
}
.list-search-box input:focus-visible { outline: none; }
.list-search-box input::placeholder { color: #8c9f8c; }
.quick-panel {
  margin-top: 10px;
  background: #f0f7ec;
  border: 1px solid #c9dfc3;
  border-radius: 14px;
  overflow: hidden;
}
.quick-panel-head {
  font-size: 10px;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6b946f;
  padding: 10px 11px 5px;
}
.quick-result {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #dbe8d7;
  background: transparent;
  text-align: left;
  padding: 9px 10px;
  color: #254333;
}
.quick-result:active { background: #dcebd6; }
.quick-result-emoji {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  height: 30px;
  width: 30px;
  border-radius: 9px;
  background: #dbead4;
  font-size: 18px;
}
.quick-result-name { display: block; min-width: 0; flex: 1; }
.quick-result-name strong { display: block; font-size: 12px; }
.quick-result-name small { display: block; color: #879f84; font-size: 10px; margin-top: 2px; }
.quick-result-price { color: var(--green); font-size: 12px; font-weight: 790; white-space: nowrap; }
.quick-result > svg { color: var(--green); }
.quick-empty { font-size: 11px; padding: 7px 12px; color: #7a947b; line-height: 1.5; }
.quick-create {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #e6f2e1;
  border: 0;
  width: 100%;
  padding: 11px;
  color: var(--green);
  font-size: 11px;
  font-weight: 750;
  text-align: left;
}
.list-items-heading { margin-top: 17px; }
.list-count { color: #789a7a; }
@media(max-width:360px){
  .home-budget-metric { padding: 12px; min-height: 94px; }
  .home-budget-metric strong { font-size: 21px; }
  .period-switch button { padding: 7px 11px; }
  .list-compact-stats strong { font-size: 18px; }
}

/* v4: unmistakably green list surfaces and a quiet, compact dashboard. */
button, input, select {
  accent-color: #176747;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: #aedbac; color: #143d2b; }
.app-header { padding-bottom: 5px; }
.screen { padding-top: 8px; }
.home-period-row {
  justify-content: flex-end;
  margin: 0 0 12px;
}
.home-cost-card { padding: 18px 19px; }
.home-cost-total { margin-top: 14px; }
.home-budget-metric {
  min-height: 85px;
  padding-top: 13px;
  padding-bottom: 13px;
}
.home-budget-metric strong { margin-top: 9px; }
.home-open-list { margin-top: 16px; }
.tip-card {
  background: #d2eacc;
  border: 1px solid #a6d0a5;
  box-shadow: 0 3px 12px #2872420b;
}
.tip-card .product-emoji {
  background: #b5dcb0;
  color: #164f34;
}
.tip-card .product-text,
.tip-card .product-name,
.tip-card .product-meta {
  color: #214c32;
}
.tip-card .product-meta { color: #558262; }
.tip-card .product-price { color: #176747; }
.tip-card .product-price-note { color: #54845e; }
.tip-card .check {
  background: #e9f7e5;
  border-color: #73b07d;
}
.tip-card .check.checked {
  background: #176747;
  border-color: #176747;
}
.item-tile {
  background: linear-gradient(155deg, #cae8c2, #def0d6);
  border-color: #a6d1a4;
}
.item-tile.is-checked {
  background: #bbdcb7;
  border-color: #91c094;
}
.tile-quantity { background: #a6d7a1; color: #164f33; }
.tile-check svg { background: #d7eed0; border-color: #97c698; }
.tile-name { color: #23452f; }
.tile-price { color: #176747; }
.view-switch {
  background: #cbe5c6;
  border-color: #add3a7;
}
.view-switch-btn.active { background: #e6f4e0; color: #105d3e; }
.list-compact-stats > div,
.list-compact-stats > button {
  background: #d6eace;
  border-color: #afcea8;
}
.list-compact-stats > button:not(.over) { background: #e2f0d9; }
.list-entry { background: #d2e8cb; border-color: #9dc69b; }
.quick-panel { background: #e3f1dc; border-color: #b6d5af; }
.quick-result { border-bottom-color: #c1dcbc; }
.quick-result-emoji { background: #c6e5bd; }
.quick-create { background: #d5eacd; }

/* v5: alternating sage surfaces and a third budget summary. */
.home-spent-tile {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 86px;
  margin-top: 11px;
  padding: 14px 16px;
  border: 1px solid #d4e6c7;
  border-radius: 18px;
  background: #e8f2de;
}
.home-spent-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 13px;
  background: #d1e6c8;
  color: #176747;
  flex-shrink: 0;
}
.home-spent-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.home-spent-details > span {
  font-size: 11px;
  font-weight: 690;
  color: #52775b;
}
.home-spent-details strong {
  font-size: 25px;
  line-height: 1;
  font-weight: 795;
  letter-spacing: -.045em;
  color: #176747;
  font-variant-numeric: tabular-nums;
}
.list-rows > .tip-card {
  border-color: #c4d9ba;
  box-shadow: 0 2px 8px #275c2b0a;
}
.list-rows > .tip-card:nth-child(odd) {
  background: #e8f2de;
}
.list-rows > .tip-card:nth-child(even) {
  background: #d7eacb;
}
.tile-grid > .item-tile {
  border-color: #c4d9ba;
}
.tile-grid > .item-tile:nth-child(odd) {
  background: #e8f2de;
}
.tile-grid > .item-tile:nth-child(even) {
  background: #d7eacb;
}
.tile-grid > .item-tile.is-checked {
  background: #c2dec0;
}

/* Startseite: sekundäre Aktionen ergänzen, Einkaufslisten-CTA als Abschluss. */
.screen-home {
  display: flex;
  flex-direction: column;
}
.home-dashboard {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 0;
  justify-content: space-between;
}
.home-actions {
  margin-top: 0;
  padding-top: 18px;
}
.home-utility-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 11px;
}
.home-utility {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 51px;
  padding: 10px 13px;
  border-radius: 16px;
  border: 1px solid var(--palette-border);
  background: var(--palette-surface);
  color: var(--palette-primary);
  font-size: 13px;
  font-weight: 750;
}
.home-utility:last-child {
  background: var(--palette-soft2);
}
.home-open-list {
  margin-top: 0;
  min-height: 53px;
}
.help-steps {
  list-style: none;
  padding: 0;
  margin: 12px 0 14px;
  counter-reset: help;
}
.help-steps li {
  counter-increment: help;
  position: relative;
  min-height: 48px;
  padding: 0 0 14px 40px;
}
.help-steps li::before {
  content: counter(help);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 10px;
  color: var(--palette-primary);
  background: var(--palette-soft);
  font-size: 12px;
  font-weight: 800;
}
.help-steps strong {
  display: block;
  margin-bottom: 3px;
  color: var(--palette-ink);
  font-size: 12px;
}
.help-steps span {
  display: block;
  font-size: 11px;
  line-height: 1.55;
  color: var(--palette-muted);
}
.help-note {
  padding: 12px 13px;
  border-radius: 13px;
  border: 1px solid var(--palette-border);
  background: var(--palette-soft);
  color: var(--palette-ink);
  font-size: 11px;
  line-height: 1.55;
}