/* Commissioner (SIL Open Font License) — self-hosted for offline use: Greek + Latin, variable 400–800 */
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/commissioner-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/commissioner-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/commissioner-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: light;
  --paper: #f5f6f0;
  --surface: #ffffff;
  --surface-soft: #f8f9f5;
  --ink: #1e3329;
  --muted: #5d6c64;
  --line: #e7ebe3;
  --green: #2d6b4c;
  --green-dark: #22543c;
  --green-soft: #e7f1e8;
  --lime: #d9edb5;
  --amber: #94530b;
  --amber-soft: #fff4df;
  --red: #a9413b;
  --red-soft: #fff0ed;
  --blue-soft: #eaf2f3;
  --shadow: 0 14px 40px rgba(32, 55, 42, .055);
  --radius: 18px;
  --text-scale: 1;
  --font: 'Commissioner', 'Noto Sans', 'Roboto', 'Segoe UI', sans-serif;
  --display: 'Commissioner', 'Noto Sans', 'Roboto', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: calc(15px * var(--text-scale)); line-height: 1.5; letter-spacing: .1px; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(45, 107, 76, .34); outline-offset: 2px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 28px 18px 20px; background: #fbfcf9; border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; margin: 0 4px 54px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 43px; border-radius: 15px; background: var(--green); color: white; }
.brand-mark svg { width: 29px; height: 29px; }
.brand strong { display: block; font: 800 calc(18px * var(--text-scale))/1.1 var(--display); letter-spacing: 0; }
.brand small { display: block; margin-top: 5px; color: var(--muted); font-size: calc(11px * var(--text-scale)); }
.nav-label, .eyebrow { margin: 0 0 12px 10px; color: var(--muted); font-size: calc(10px * var(--text-scale)); font-weight: 700; letter-spacing: .12em; }
.primary-nav { display: grid; gap: 6px; }
.nav-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 47px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: background .18s, color .18s, transform .18s; }
.nav-item:hover { background: #f1f5ef; color: var(--ink); }
.nav-item.is-active { background: var(--green-soft); color: var(--green-dark); font-weight: 700; }
.nav-icon { display: grid; place-items: center; width: 23px; font-size: calc(19px * var(--text-scale)); line-height: 1; }
.nav-count { margin-left: auto; min-width: 23px; padding: 2px 7px; border-radius: 20px; background: rgba(45,107,76,.08); color: var(--green); font-size: calc(11px * var(--text-scale)); text-align: center; }
.sidebar-bottom { margin-top: auto; }
.privacy-card { display: flex; gap: 10px; padding: 13px 11px; border: 1px solid #e6ede1; border-radius: 14px; background: #f6f9f3; }
.privacy-icon { font-size: calc(17px * var(--text-scale)); }
.privacy-card strong { display: block; font-size: calc(11px * var(--text-scale)); }
.privacy-card p { margin: 4px 0 0; color: var(--muted); font-size: calc(10px * var(--text-scale)); line-height: 1.4; }
.version-label { display: block; margin: 15px 8px 0; color: var(--muted); font-size: calc(9px * var(--text-scale)); font-weight: 700; letter-spacing: .12em; }

.main-content { min-width: 0; padding: 0 clamp(22px, 4.4vw, 66px) 20px; }
.topbar { min-height: 84px; display: flex; align-items: center; justify-content: flex-end; gap: 18px; border-bottom: 1px solid rgba(215, 223, 214, .72); }
.topbar-note { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--muted); font-size: calc(12px * var(--text-scale)); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #6aa87b; box-shadow: 0 0 0 4px rgba(106,168,123,.12); }
.mobile-brand { display: none; align-items: center; gap: 8px; margin-right: auto; font: 800 calc(16px * var(--text-scale)) var(--display); letter-spacing: 0; }
.mobile-brand .brand-mark { width: 32px; height: 32px; flex-basis: 32px; border-radius: 11px; font-size: calc(19px * var(--text-scale)); }
.view-content { width: min(100%, 1120px); margin: 0 auto; padding: 35px 0 26px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 27px; }
.page-heading h1 { margin: 0; font: 800 clamp(25px, 3vw, 34px)/1.15 var(--display); letter-spacing: 0; }
.page-heading p { margin: 9px 0 0; color: var(--muted); font-size: calc(14px * var(--text-scale)); }
.eyebrow { margin: 0 0 9px; color: var(--green); }
.page-actions { display: flex; align-items: center; gap: 10px; }
.button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px; font-size: calc(13px * var(--text-scale)); font-weight: 700; cursor: pointer; transition: transform .16s, background .16s, box-shadow .16s; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--green); color: white; box-shadow: 0 5px 12px rgba(45,107,76,.14); }
.button-primary:hover { background: var(--green-dark); }
.button-quiet { border-color: var(--line); background: white; color: var(--ink); }
.button-quiet:hover { background: var(--surface-soft); }
.button-danger { background: var(--red); color: white; }
.button-add { min-height: 40px; padding: 0 14px; font-size: calc(12px * var(--text-scale)); }
.button-add span { font-size: calc(18px * var(--text-scale)); }
.text-button { padding: 6px 0; border: 0; background: none; color: var(--green); font-size: calc(11px * var(--text-scale)); font-weight: 700; cursor: pointer; }
.app-footer { display: flex; align-items: center; justify-content: space-between; width: min(100%, 1120px); margin: 8px auto 0; padding: 14px 0 6px; color: var(--muted); font-size: calc(10px * var(--text-scale)); }

.hero-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 20px; min-height: 180px; margin-bottom: 22px; padding: 30px 34px; border-radius: 22px; background: #e9f1e4; }
.hero-panel::after { position: absolute; right: 11%; bottom: -80px; width: 220px; height: 220px; border: 1px solid rgba(45,107,76,.09); border-radius: 50%; content: ''; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy .eyebrow { color: #4a6b51; }
.hero-copy h1 { max-width: 560px; margin: 0; font: 800 clamp(26px, 3.6vw, 39px)/1.1 var(--display); letter-spacing: 0; }
.hero-copy p { max-width: 515px; margin: 11px 0 0; color: #53685b; font-size: calc(14px * var(--text-scale)); }
.hero-illustration { position: relative; z-index: 1; display: grid; place-items: center; width: 120px; height: 120px; margin-right: 14px; border-radius: 36px; background: rgba(255,255,255,.65); transform: rotate(5deg); }
.hero-illustration span { font-size: calc(57px * var(--text-scale)); transform: rotate(-5deg); }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; margin: 0 0 24px; }
.stat-card { min-height: 115px; display: flex; align-items: center; gap: 14px; padding: 19px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 4px 15px rgba(32,55,42,.025); }
.stat-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 43px; border-radius: 14px; background: var(--green-soft); font-size: calc(20px * var(--text-scale)); }
.stat-icon.amber { background: var(--amber-soft); }
.stat-icon.blue { background: var(--blue-soft); }
.stat-card strong { display: block; font: 800 calc(25px * var(--text-scale))/1.1 var(--display); letter-spacing: 0; }
.stat-card span:not(.stat-icon) { display: block; margin-top: 5px; color: var(--muted); font-size: calc(11px * var(--text-scale)); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(270px,.85fr); gap: 16px; align-items: start; }
.panel { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 4px 15px rgba(32,55,42,.025); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-heading h2 { margin: 0; font: 800 calc(16px * var(--text-scale)) var(--display); letter-spacing: 0; }
.panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: calc(11px * var(--text-scale)); }
.panel-link { border: 0; background: none; color: var(--green); font-size: calc(11px * var(--text-scale)); font-weight: 700; cursor: pointer; }
.product-list { display: grid; gap: 9px; }
.product-row { display: grid; grid-template-columns: 39px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 60px; padding: 9px 10px; border: 1px solid #eef0eb; border-radius: 13px; background: #fff; }
.product-emoji { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #f4f6f1; font-size: calc(19px * var(--text-scale)); }
.product-main { min-width: 0; }
.product-name { display: block; overflow: hidden; color: var(--ink); font-size: calc(13px * var(--text-scale)); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.product-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; color: var(--muted); font-size: calc(10px * var(--text-scale)); }
.expiry-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 20px; background: var(--amber-soft); color: var(--amber); font-size: calc(10px * var(--text-scale)); font-weight: 700; white-space: nowrap; }
.expiry-pill.expired { background: var(--red-soft); color: var(--red); }
.expiry-pill.fresh { background: #eef4ee; color: #567260; }
.quantity-chip { color: var(--green-dark); font-size: calc(11px * var(--text-scale)); font-weight: 800; white-space: nowrap; }
.empty-state { display: grid; place-items: center; min-height: 180px; padding: 24px; text-align: center; }
.empty-state .empty-art { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 12px; border-radius: 20px; background: #f0f5ec; font-size: calc(27px * var(--text-scale)); }
.empty-state h2, .empty-state h3 { margin: 0; font: 800 calc(17px * var(--text-scale)) var(--display); }
.empty-state p { max-width: 360px; margin: 6px auto 15px; color: var(--muted); font-size: calc(12px * var(--text-scale)); }
.quick-actions { display: grid; gap: 9px; }
.quick-action { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid #edf0ea; border-radius: 13px; background: white; text-align: left; cursor: pointer; }
.quick-action:hover { border-color: #bfd4c1; background: #fbfdf9; }
.quick-action-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #f1f5ef; font-size: calc(17px * var(--text-scale)); }
.quick-action strong { display: block; font-size: calc(12px * var(--text-scale)); }
.quick-action small { display: block; margin-top: 2px; color: var(--muted); font-size: calc(10px * var(--text-scale)); }
.quick-action .arrow { margin-left: auto; color: #8a9b8e; font-size: calc(18px * var(--text-scale)); }

.alert-banner { margin: -7px 0 19px; padding: 12px 15px; border: 1px solid #f1dfb9; border-radius: 12px; background: var(--amber-soft); color: #79501a; font-size: calc(12px * var(--text-scale)); }
.subtle-empty { margin: 0; padding: 12px 4px; color: var(--muted); font-size: calc(11px * var(--text-scale)); }
.full-width { width: 100%; margin-top: 13px; }
.low-stock-tag { background: var(--amber-soft); color: var(--amber); }
.small-action { min-height: 31px; padding: 0 10px; font-size: calc(10px * var(--text-scale)); white-space: nowrap; }
.shopping-state { color: var(--green); font-size: calc(10px * var(--text-scale)); white-space: nowrap; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.search-wrap { position: relative; flex: 1 1 270px; max-width: 420px; }
.search-wrap > span:first-child { position: absolute; top: 50%; left: 13px; color: #8a9890; transform: translateY(-50%); }
.inventory-count { color: var(--muted); font-size: calc(11px * var(--text-scale)); white-space: nowrap; }
.search-input, .field-input { width: 100%; min-height: 43px; padding: 0 13px; border: 1px solid #dfe6dc; border-radius: 11px; background: white; color: var(--ink); }
.search-input { padding-left: 38px; }
.search-input::placeholder, .field-input::placeholder { color: var(--muted); }
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.filter-chip { min-height: 32px; padding: 0 12px; border: 1px solid #e3e9df; border-radius: 30px; background: white; color: #56665c; font-size: calc(11px * var(--text-scale)); font-weight: 700; cursor: pointer; }
.filter-chip.is-active { border-color: var(--green); background: var(--green); color: white; }
.inventory-list { display: grid; gap: 9px; }
.inventory-card { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.inventory-card .product-emoji { width: 44px; height: 44px; font-size: calc(21px * var(--text-scale)); }
.inventory-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; }
.meta-tag { padding: 2px 7px; border-radius: 8px; background: #f3f5f1; color: #5d6c64; font-size: calc(10px * var(--text-scale)); }
.card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: white; color: #5d7164; font-size: calc(17px * var(--text-scale)); cursor: pointer; }
.icon-button:hover { border-color: #c6d8c7; color: var(--green); }
.icon-button.danger:hover { border-color: #edc5be; color: var(--red); }
.inventory-count { color: var(--muted); font-size: calc(11px * var(--text-scale)); }

.shopping-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(250px,.8fr); gap: 16px; align-items: start; }
.shopping-add-form { display: grid; grid-template-columns: minmax(0,1fr) 80px 105px auto; gap: 8px; margin-bottom: 14px; }
.shopping-add-form .field-input { min-width: 0; }
.shopping-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto 34px; align-items: center; gap: 10px; min-height: 57px; padding: 9px 8px; border-bottom: 1px solid #eef1ec; }
.shopping-row:last-child { border-bottom: 0; }
.shopping-check { width: 19px; height: 19px; accent-color: var(--green); cursor: pointer; }
.shopping-row-name { font-size: calc(13px * var(--text-scale)); font-weight: 700; }
.shopping-row.checked .shopping-row-name { color: #98a49b; text-decoration: line-through; }
.shopping-row-detail { color: var(--muted); font-size: calc(10px * var(--text-scale)); }
.shopping-summary { background: #edf4e9; }
.shopping-summary h2 { margin: 0; font: 800 calc(17px * var(--text-scale)) var(--display); }
.shopping-summary p { color: #53685b; font-size: calc(12px * var(--text-scale)); }
.shopping-summary-list { display: grid; gap: 9px; margin-top: 15px; }
.summary-line { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(45,107,76,.12); color: #51685a; font-size: calc(11px * var(--text-scale)); }
.summary-line strong { color: var(--green-dark); }

.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.settings-card h2 { margin: 0; font: 800 calc(16px * var(--text-scale)) var(--display); }
.settings-card p { color: var(--muted); font-size: calc(12px * var(--text-scale)); }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.privacy-note { padding: 15px; border-radius: 12px; background: #f1f6ed; color: #4d6b57; font-size: calc(12px * var(--text-scale)); }
.danger-zone { border-color: #f0d8d2; }
.danger-zone h2 { color: var(--red); }

.item-dialog, .confirm-dialog { width: min(100% - 28px, 560px); max-height: min(90vh, 760px); padding: 0; overflow: auto; border: 1px solid #e6ebe3; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 24px 80px rgba(24,44,32,.2); }
.item-dialog::backdrop, .confirm-dialog::backdrop { background: rgba(23,38,30,.42);  }
.item-dialog form, .confirm-dialog form { padding: 25px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.dialog-heading .eyebrow { margin-left: 0; }
.dialog-heading h2 { margin: 0; font: 800 calc(23px * var(--text-scale)) var(--display); letter-spacing: 0; }
.field-label { display: block; margin: 13px 0 6px; color: #53665a; font-size: calc(11px * var(--text-scale)); font-weight: 700; }
.field-label span { color: var(--red); }
.field-input { min-height: 44px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.field-row-three { grid-template-columns: 1fr 1fr 1.2fr; }
.field-hint { margin: 0 0 4px; color: var(--muted); font-size: calc(10px * var(--text-scale)); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }
.field-counter { margin: 4px 0 0; text-align: right; }
.nav-item span:not(.nav-icon):not(.nav-count) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-screen="pantry"] .topbar .button-add { display: none; }
.field-warning { margin: 10px 0 0; color: #9a6a12; font-size: calc(12px * var(--text-scale)); }
.panel-links { display: flex; flex-wrap: wrap; gap: 12px; }
.share-text { width: 100%; min-height: 140px; margin-top: 12px; resize: vertical; font: inherit; font-size: calc(13px * var(--text-scale)); }
.share-actions { flex-wrap: wrap; }
.share-actions a { text-decoration: none; }
.barcode-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; margin-top: 10px; }
.barcode-row .button { min-height: 43px; padding-inline: 12px; }
.scan-wrap { position: relative; }
.scan-box { position: absolute; left: 10%; right: 10%; top: calc(12px + 25% - 6px); height: 50%; border: 2px solid rgba(255,255,255,.85); border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,.25); pointer-events: none; }
.scan-wrap { overflow: hidden; border-radius: 14px; }
.scan-video { width: 100%; aspect-ratio: 4 / 3; margin-top: 12px; border-radius: 14px; background: #000; object-fit: cover; }
.sync-email-form, .sync-join-form { display: grid; gap: 8px; margin-top: 12px; }
.sync-join-form { grid-template-columns: minmax(0,1fr) auto; }
.sync-card code { font-size: calc(12px * var(--text-scale)); }
.notify-days { max-width: 120px; }
.theme-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.form-error { margin: 12px 0 0; color: var(--red); font-size: calc(12px * var(--text-scale)); }
.confirm-message { color: var(--muted); font-size: calc(13px * var(--text-scale)); }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 20; max-width: min(400px,calc(100vw - 32px)); padding: 12px 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; background: #203d2e; color: white; font-size: calc(12px * var(--text-scale)); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s,transform .2s; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-visible.has-undo { pointer-events: auto; }

@media (max-width: 1020px) {
  .app-shell { grid-template-columns: 210px minmax(0,1fr); }
  .sidebar { padding-inline: 14px; }
  .main-content { padding-inline: 28px; }
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav-item span:not(.nav-icon):not(.nav-count) { max-width: 100%; }
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: auto 0 0; z-index: 10; width: 100%; height: auto; padding: 7px max(10px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); border-top: 1px solid var(--line); border-right: 0; background: rgb(251,252,249); }
  .sidebar > .brand, .nav-label, .sidebar-bottom { display: none; }
  .primary-nav { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; }
  .nav-item { min-height: 55px; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 3px; border-radius: 10px; font-size: calc(9px * var(--text-scale)); }
  .nav-icon { width: auto; font-size: calc(18px * var(--text-scale)); }
  .nav-count { position: absolute; top: 4px; right: calc(50% - 25px); min-width: 17px; margin: 0; padding: 1px 4px; font-size: calc(9px * var(--text-scale)); }
  .main-content { padding: 0 16px calc(89px + env(safe-area-inset-bottom)); }
  .topbar { min-height: 65px; justify-content: flex-end; gap: 9px; }
  .mobile-brand { display: flex; }
  .topbar-note { display: none; }
  .button-add { min-height: 38px; padding-inline: 11px; font-size: calc(11px * var(--text-scale)); }
  .view-content { padding-top: 23px; }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 19px; }
  .page-heading .button { width: 100%; }
  .hero-panel { grid-template-columns: 1fr 60px; min-height: 151px; padding: 22px 19px; border-radius: 18px; }
  .hero-copy p { font-size: calc(12px * var(--text-scale)); }
  .hero-illustration { width: 62px; height: 62px; margin: 0; border-radius: 20px; }
  .hero-illustration span { font-size: calc(33px * var(--text-scale)); }
  .stats-grid { gap: 8px; margin-bottom: 14px; }
  .stat-card { min-height: 100px; flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px 10px; border-radius: 13px; }
  .stat-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 10px; font-size: calc(15px * var(--text-scale)); }
  .stat-card strong { font-size: calc(20px * var(--text-scale)); }
  .stat-card span:not(.stat-icon) { margin-top: 3px; font-size: calc(9px * var(--text-scale)); line-height: 1.2; }
  .panel { padding: 15px; border-radius: 15px; }
  .panel-heading h2 { font-size: calc(14px * var(--text-scale)); }
  .inventory-card { grid-template-columns: 38px minmax(0,1fr); gap: 9px; padding: 11px; }
  .inventory-card .product-emoji { width: 38px; height: 38px; }
  .inventory-card .card-actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: 8px; border-top: 1px solid #f0f2ed; }
  .shopping-layout { grid-template-columns: 1fr; }
  .shopping-add-form { grid-template-columns: minmax(0,1fr) 74px; }
  .shopping-add-form .unit-select { grid-column: 1; }
  .shopping-add-form button { grid-column: 2; grid-row: 2; }
  .settings-grid { grid-template-columns: 1fr; }
  .field-row, .field-row-three { grid-template-columns: 1fr 1fr; }
  .field-row-three > div:last-child { grid-column: 1 / -1; }
  .app-footer { font-size: calc(9px * var(--text-scale)); }
}
@media (max-width: 390px) {
  .nav-item { font-size: calc(8px * var(--text-scale)); }
  .main-content { padding-inline: 12px; }
  .button-add { width: 39px; padding: 0; overflow: hidden; color: transparent; gap: 0; }
  .button-add span { color: white; font-size: calc(22px * var(--text-scale)); }
  .page-heading h1 { font-size: calc(25px * var(--text-scale)); }
  .stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .stat-card { min-height: 94px; }
  .stat-card span:not(.stat-icon) { font-size: calc(8px * var(--text-scale)); }
  .field-row, .field-row-three { grid-template-columns: 1fr; }
  .field-row-three > div:last-child { grid-column: auto; }
  .dialog-actions .button { flex: 1; padding-inline: 9px; font-size: calc(11px * var(--text-scale)); }
}

/* Dark theme: follows the system unless the user picked light/dark in Settings. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121a16;
  --surface: #1a241f;
  --surface-soft: #1f2a24;
  --ink: #e4ece6;
  --muted: #9aaba1;
  --line: #2c3a33;
  --green: #5fae84;
  --green-dark: #8fd0ab;
  --green-soft: #21382c;
  --lime: #2d4a2a;
  --amber: #e0a252;
  --amber-soft: #3a2e1a;
  --red: #ec8a83;
  --red-soft: #3d2422;
  --blue-soft: #1f3034;
  --shadow: 0 14px 40px rgba(0, 0, 0, .35);
}
:root[data-theme="dark"] .sidebar { background: #151e19; }
:root[data-theme="dark"] .nav-label, :root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] .version-label, :root[data-theme="dark"] .app-footer, :root[data-theme="dark"] .quick-action .arrow, :root[data-theme="dark"] .search-wrap > span:first-child { color: #8b9b91; }
:root[data-theme="dark"] .nav-item, :root[data-theme="dark"] .filter-chip, :root[data-theme="dark"] .meta-tag, :root[data-theme="dark"] .icon-button, :root[data-theme="dark"] .field-label, :root[data-theme="dark"] .hero-copy p, :root[data-theme="dark"] .shopping-summary p, :root[data-theme="dark"] .summary-line, :root[data-theme="dark"] .privacy-note, :root[data-theme="dark"] .expiry-pill.fresh { color: #b3c2b8; }
:root[data-theme="dark"] .nav-item:hover, :root[data-theme="dark"] .quick-action-icon, :root[data-theme="dark"] .product-emoji, :root[data-theme="dark"] .empty-state .empty-art, :root[data-theme="dark"] .meta-tag, :root[data-theme="dark"] .expiry-pill.fresh { background: #24312a; }
:root[data-theme="dark"] .privacy-card, :root[data-theme="dark"] .privacy-note, :root[data-theme="dark"] .shopping-summary { background: #1c2b22; border-color: #2c3a33; }
:root[data-theme="dark"] .button-quiet, :root[data-theme="dark"] .quick-action, :root[data-theme="dark"] .search-input, :root[data-theme="dark"] .field-input, :root[data-theme="dark"] .filter-chip, :root[data-theme="dark"] .inventory-card, :root[data-theme="dark"] .icon-button, :root[data-theme="dark"] .product-row, :root[data-theme="dark"] .item-dialog, :root[data-theme="dark"] .confirm-dialog { background: var(--surface); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .quick-action:hover { background: #22302a; border-color: #3c5245; }
:root[data-theme="dark"] .search-input::placeholder, :root[data-theme="dark"] .field-input::placeholder, :root[data-theme="dark"] .shopping-row.checked .shopping-row-name { color: #7d8d83; }
:root[data-theme="dark"] .shopping-row, :root[data-theme="dark"] .inventory-card .card-actions { border-color: var(--line); }
:root[data-theme="dark"] .hero-panel { background: linear-gradient(135deg, #1d3326, #23402f); }
:root[data-theme="dark"] .hero-copy .eyebrow { color: #8fd0ab; }
:root[data-theme="dark"] .hero-illustration { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .alert-banner { border-color: #5a4524; color: #f0c88a; }
:root[data-theme="dark"] .field-warning { color: #e0b263; }
:root[data-theme="dark"] .danger-zone { border-color: #4a2a27; }
:root[data-theme="dark"] .topbar { border-color: var(--line); }
:root[data-theme="dark"] .button-primary { background: #2f7a54; }
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .settings-card { background: var(--surface); border-color: var(--line); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --paper: #121a16;
  --surface: #1a241f;
  --surface-soft: #1f2a24;
  --ink: #e4ece6;
  --muted: #9aaba1;
  --line: #2c3a33;
  --green: #5fae84;
  --green-dark: #8fd0ab;
  --green-soft: #21382c;
  --lime: #2d4a2a;
  --amber: #e0a252;
  --amber-soft: #3a2e1a;
  --red: #ec8a83;
  --red-soft: #3d2422;
  --blue-soft: #1f3034;
  --shadow: 0 14px 40px rgba(0, 0, 0, .35);
}
:root:not([data-theme="light"]) .sidebar { background: #151e19; }
:root:not([data-theme="light"]) .nav-label, :root:not([data-theme="light"]) .eyebrow, :root:not([data-theme="light"]) .version-label, :root:not([data-theme="light"]) .app-footer, :root:not([data-theme="light"]) .quick-action .arrow, :root:not([data-theme="light"]) .search-wrap > span:first-child { color: #8b9b91; }
:root:not([data-theme="light"]) .nav-item, :root:not([data-theme="light"]) .filter-chip, :root:not([data-theme="light"]) .meta-tag, :root:not([data-theme="light"]) .icon-button, :root:not([data-theme="light"]) .field-label, :root:not([data-theme="light"]) .hero-copy p, :root:not([data-theme="light"]) .shopping-summary p, :root:not([data-theme="light"]) .summary-line, :root:not([data-theme="light"]) .privacy-note, :root:not([data-theme="light"]) .expiry-pill.fresh { color: #b3c2b8; }
:root:not([data-theme="light"]) .nav-item:hover, :root:not([data-theme="light"]) .quick-action-icon, :root:not([data-theme="light"]) .product-emoji, :root:not([data-theme="light"]) .empty-state .empty-art, :root:not([data-theme="light"]) .meta-tag, :root:not([data-theme="light"]) .expiry-pill.fresh { background: #24312a; }
:root:not([data-theme="light"]) .privacy-card, :root:not([data-theme="light"]) .privacy-note, :root:not([data-theme="light"]) .shopping-summary { background: #1c2b22; border-color: #2c3a33; }
:root:not([data-theme="light"]) .button-quiet, :root:not([data-theme="light"]) .quick-action, :root:not([data-theme="light"]) .search-input, :root:not([data-theme="light"]) .field-input, :root:not([data-theme="light"]) .filter-chip, :root:not([data-theme="light"]) .inventory-card, :root:not([data-theme="light"]) .icon-button, :root:not([data-theme="light"]) .product-row, :root:not([data-theme="light"]) .item-dialog, :root:not([data-theme="light"]) .confirm-dialog { background: var(--surface); border-color: var(--line); color: var(--ink); }
:root:not([data-theme="light"]) .quick-action:hover { background: #22302a; border-color: #3c5245; }
:root:not([data-theme="light"]) .search-input::placeholder, :root:not([data-theme="light"]) .field-input::placeholder, :root:not([data-theme="light"]) .shopping-row.checked .shopping-row-name { color: #7d8d83; }
:root:not([data-theme="light"]) .shopping-row, :root:not([data-theme="light"]) .inventory-card .card-actions { border-color: var(--line); }
:root:not([data-theme="light"]) .hero-panel { background: linear-gradient(135deg, #1d3326, #23402f); }
:root:not([data-theme="light"]) .hero-copy .eyebrow { color: #8fd0ab; }
:root:not([data-theme="light"]) .hero-illustration { background: rgba(255,255,255,.08); }
:root:not([data-theme="light"]) .alert-banner { border-color: #5a4524; color: #f0c88a; }
:root:not([data-theme="light"]) .field-warning { color: #e0b263; }
:root:not([data-theme="light"]) .danger-zone { border-color: #4a2a27; }
:root:not([data-theme="light"]) .topbar { border-color: var(--line); }
:root:not([data-theme="light"]) .button-primary { background: #2f7a54; }
:root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .stat-card, :root:not([data-theme="light"]) .settings-card { background: var(--surface); border-color: var(--line); }
}
@media (max-width: 760px) { :root[data-theme="dark"] .sidebar { background: rgba(21,30,25,.96); } }
@media (max-width: 760px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidebar { background: rgba(21,30,25,.96); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Language toggle (ΕΛ/EN) */
.lang-toggle { min-height: 40px; min-width: 44px; padding: 0 10px; font-size: calc(12px * var(--text-scale)); font-weight: 700; letter-spacing: .04em; }

/* Recurring items & voice add */
.recurring-panel { margin-top: 18px; }
.recurring-form { grid-template-columns: minmax(0,1fr) 80px 110px 150px auto; }
.recurring-list { display: grid; gap: 8px; margin-top: 12px; }
.recurring-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.voice-button { min-width: 44px; padding: 0 10px; font-size: calc(18px * var(--text-scale)); }
.voice-button.is-listening { background: var(--red-soft); animation: pulse 1s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (max-width: 760px) { .recurring-form { grid-template-columns: 1fr 1fr; } .recurring-form input[name=name] { grid-column: 1 / -1; } }
@media (max-width: 760px) { .shopping-add-form .voice-button { grid-column: 1 / -1; grid-row: 3; } .recurring-form button, .recurring-form .unit-select { grid-column: auto; grid-row: auto; } }

/* Stores & aisles, prices, insights */
.store-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.store-bar .panel-link { margin-left: auto; }
.store-manager { padding: 12px; margin-bottom: 12px; border: 1px dashed var(--line); border-radius: 14px; }
.store-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-bottom: 8px; }
.aisle-list { display: grid; gap: 6px; padding: 0; margin: 8px 0; list-style: none; }
.aisle-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto auto; align-items: center; gap: 6px; }
.aisle-number { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green-soft); font-size: calc(12px * var(--text-scale)); font-weight: 700; }
.aisle-heading { margin: 12px 0 4px; font-size: calc(12px * var(--text-scale)); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.aisle-heading span { color: var(--green-dark); }
.shopping-row.has-price { grid-template-columns: 24px minmax(0,1fr) auto auto 34px; }
.price-field { display: inline-flex; align-items: center; gap: 4px; }
.price-input { width: 84px; min-height: 34px; padding: 4px 8px; }
.shopping-add-form.shopping-main-form { grid-template-columns: minmax(0,1fr) 80px 105px; }
.shopping-main-form .voice-button { grid-column: 3; }
.shopping-main-form:not(.no-voice) .category-select { grid-column: 1; }
.month-switch { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; text-transform: capitalize; }
.settings-card .big-number, .big-number { margin: 4px 0; font-size: calc(30px * var(--text-scale)); font-weight: 800; }
.bar-list { display: grid; gap: 8px; margin-top: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(0,140px) minmax(0,1fr) auto; align-items: center; gap: 8px; font-size: calc(13px * var(--text-scale)); }
.bar-label { overflow-wrap: anywhere; line-height: 1.3; }
.bar-track { height: 10px; border-radius: 6px; background: var(--green-soft); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 6px; background: var(--green, #2d6b4c); }
.insights-subtitle { margin: 16px 0 6px; font-size: calc(14px * var(--text-scale)); }
.waste-top { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.waste-top li { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 760px) {
  .primary-nav { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .shopping-add-form.shopping-main-form { grid-template-columns: minmax(0,1fr) 74px; }
  .shopping-add-form .category-select { grid-column: 1 / -1; grid-row: auto; }
  .shopping-row.has-price .shopping-state { display: none; }
  .shopping-add-form .category-select { grid-row: 3; }
  .shopping-add-form .voice-button { grid-row: 4; }
  .bar-row { grid-template-columns: minmax(0,110px) minmax(0,1fr) auto; }
}

/* What do I cook? */
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.recipe-card { display: flex; flex-direction: column; gap: 6px; }
.recipe-head { display: flex; gap: 12px; align-items: center; }
.recipe-thumb { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.recipe-name { margin: 0; font-size: calc(16px * var(--text-scale)); }
.recipe-urgent { color: #a35d00; }
.recipe-label { margin: 6px 0 2px; font-size: calc(12px * var(--text-scale)); font-weight: 700; color: var(--muted); }
.recipe-label.ok { color: var(--green-dark); }
.ingredient-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ingredient-chip { padding: 3px 9px; border-radius: 999px; font-size: calc(12px * var(--text-scale)); background: var(--green-soft); }
.ingredient-chip.urgent { background: #fdecc8; }
.ingredient-chip.need { background: transparent; border: 1px dashed var(--line); }
.recipe-steps summary { cursor: pointer; font-size: calc(13px * var(--text-scale)); font-weight: 600; }
.recipe-steps p { font-size: calc(13px * var(--text-scale)); }
.recipe-card .settings-actions { margin-top: auto; padding-top: 6px; }
.section-title { margin: 8px 0 10px; font-size: calc(16px * var(--text-scale)); }
@media (max-width: 760px) { .primary-nav { grid-template-columns: repeat(7,minmax(0,1fr)); } .recipe-grid { grid-template-columns: 1fr; } }

/* Scan receipt */
.receipt-dialog { width: min(820px, calc(100vw - 24px)); }
/* v1.6.10: pinned to the top, so the heading doesn't jump when the receipt arrives and the dialog grows (CLS). */
.receipt-dialog[open] { margin-top: max(12px, 5vh); margin-bottom: auto; height: fit-content; }
/* (no reserved height needed any more: the dialog is pinned to the top) */
.receipt-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 0 10px; }
.receipt-summary > div { display: grid; gap: 2px; }
.receipt-lines { display: grid; gap: 6px; max-height: 50vh; overflow: auto; padding-right: 4px; }
.receipt-line { display: grid; grid-template-columns: 22px minmax(0,1fr) 76px 92px 80px 150px; gap: 6px; align-items: center; }
.receipt-line .field-input { min-height: 36px; padding: 4px 8px; min-width: 0; }
.check-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: calc(14px * var(--text-scale)); }
.page-actions { margin: -6px 0 12px; }
@media (max-width: 760px) {
  .receipt-line { grid-template-columns: 22px minmax(0,1fr) minmax(0,1fr); padding: 8px 0; border-bottom: 1px solid var(--line); }
  .receipt-line .receipt-name { grid-column: 2 / -1; }
  .receipt-line .receipt-qty { grid-column: 2; } .receipt-line .receipt-unit { grid-column: 3; }
  .receipt-line .receipt-price { grid-column: 2; } .receipt-line .receipt-category { grid-column: 3; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.file-button { position: relative; cursor: pointer; }
.receipt-photo-actions { flex-wrap: wrap; }
.receipt-line.is-doubtful { background: #fff4d6; outline: 2px solid #e0a800; border-radius: 10px; }
.doubtful-hint { color: #8a5a00; }
.cook-tabs { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.filter-chip.is-active { background: var(--green-soft); color: var(--green-dark); border-color: transparent; }
.plan-actions { margin: 0 0 14px; flex-wrap: wrap; }
.plan-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.plan-day { display: grid; gap: 8px; align-content: start; background: var(--card, #fff); border: 1px solid #e3e9df; border-radius: 14px; padding: 10px; }
.plan-day.is-today { border-color: var(--green, #2f6b4f); box-shadow: 0 0 0 2px var(--green-soft, #e3f0e8); }
.plan-day-name { margin: 0; font-size: calc(12px * var(--text-scale)); text-transform: capitalize; }
.plan-cell { display: grid; gap: 2px; text-align: left; min-height: 58px; padding: 7px 8px; border: 1px dashed #d5ddd0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.plan-cell.has-meal { border-style: solid; background: var(--green-soft, #eef6f0); }
.plan-slot { font-size: calc(10px * var(--text-scale)); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.plan-meal { font-size: calc(12px * var(--text-scale)); font-weight: 700; overflow-wrap: anywhere; }
.plan-add { font-size: calc(16px * var(--text-scale)); color: var(--muted); }
.meal-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 12px; }
.meal-option { display: grid; gap: 2px; text-align: left; padding: 9px 11px; border: 1px solid #e3e9df; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.meal-option small { color: var(--muted); }
.meal-option:hover, .plan-cell:hover { border-color: var(--green, #2f6b4f); }
@media (max-width: 1020px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .plan-grid { grid-template-columns: 1fr; } .plan-day { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plan-day-name { grid-column: 1 / -1; } }
.bill-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.bill-main { min-width: 0; }
.bill-meta { margin: 2px 0 0; font-size: calc(12px * var(--text-scale)); color: var(--muted); overflow-wrap: anywhere; }
.bill-ref { font-size: calc(11px * var(--text-scale)); background: #f1f5ef; padding: 1px 5px; border-radius: 6px; }
.bill-amount { font-size: calc(16px * var(--text-scale)); }
.bill-actions { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.bill-row.is-overdue { border-color: #e5484d; box-shadow: inset 4px 0 0 #e5484d; }
.bill-row.is-overdue .bill-due { color: #c62a2f; font-weight: 700; }
.bill-row.is-soon { box-shadow: inset 4px 0 0 #e0a800; }
.bill-row.is-soon .bill-due { color: #8a5a00; font-weight: 700; }
.bill-row.is-paid { opacity: .75; }
.alert-banner.is-danger { background: #fdecec; color: #9b1c1f; }
.bill-scan-row { align-items: center; }
@media (min-width: 761px) { .bill-row { grid-template-columns: auto minmax(0, 1fr) auto auto; } .bill-actions { grid-column: auto; } }
.cart-entry { margin: -6px 0 14px; }
.cart-start-form { display: grid; gap: 8px; max-width: 420px; }
.cart-total-panel { text-align: center; }
.cart-total { font-size: clamp(40px, 9vw, 64px); font-weight: 800; margin: 0; letter-spacing: 0; }
.cart-total-panel.is-over .cart-total { color: #c62a2f; }
.cart-total-panel.is-near .cart-total { color: #8a5a00; }
.budget-track { height: 8px; border-radius: 8px; background: #e7ece4; overflow: hidden; margin: 8px auto; max-width: 420px; }
.budget-track span { display: block; height: 100%; background: var(--green, #2f6b4f); }
.cart-total-panel.is-over .budget-track span { background: #e5484d; }
.cart-total-panel.is-near .budget-track span { background: #e0a800; }
.cart-actions { justify-content: center; flex-wrap: wrap; }
.cart-lines { display: grid; gap: 8px; }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e3e9df; border-radius: 12px; }
.cart-line-main { display: grid; min-width: 0; }
.cart-line-main small { color: var(--muted); }
.cart-line-total { font-weight: 800; font-size: calc(15px * var(--text-scale)); }
.qty-stepper { display: flex; align-items: center; gap: 6px; }
.qty-stepper .field-input { text-align: center; min-width: 0; }
.qty-stepper.small .cart-qty { min-width: 22px; text-align: center; font-weight: 700; }
.cart-remaining { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.cart-finish { justify-content: space-between; margin: 6px 0 18px; }
.cart-price-display { font-size: calc(28px * var(--text-scale)); font-weight: 800; text-align: right; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
/* v1.6.16: theme colours (was a fixed light background with inherited text → white on white in dark mode). */
.keypad-key { min-height: 52px; font-size: calc(22px * var(--text-scale)); font-weight: 700; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); color: var(--ink); -webkit-text-fill-color: var(--ink); cursor: pointer; }
.keypad-key:active { background: var(--green-soft); }
.trip-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.trip-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; }
.trip-list small { width: 100%; color: var(--muted); }
.receipt-trip p { margin: 0 0 6px; }
@media (max-width: 760px) { .cart-line { grid-template-columns: minmax(0, 1fr) auto auto; } .cart-line .qty-stepper.small { grid-column: 1; grid-row: 2; } }
.vm-settings { margin: 10px 0; }
.vm-settings summary { cursor: pointer; font-weight: 700; }
.vm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 10px; }
.vm-row { display: flex; align-items: center; gap: 6px; }
.vm-row span { font-weight: 700; min-width: 32px; }
.code-info { background: #eef5f0; border-radius: 10px; padding: 6px 10px; }
.history-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 800; font-size: calc(17px * var(--text-scale)); color: inherit; cursor: pointer; text-align: left; }
.history-filter { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.history-filter select { max-width: 260px; }
.history-month h3 { display: flex; justify-content: space-between; font-size: calc(14px * var(--text-scale)); text-transform: capitalize; margin: 14px 0 6px; color: #4f5f55; }
.history-more { width: 100%; margin-top: 10px; }

/* Consolidated menu (☰): one list with every section; phones keep 4 bottom shortcuts. */
.menu-button { display: none; }
.nav-menu-item { display: none; }
.menu-sheet { width: min(100% - 24px, 420px); max-height: 88vh; margin: auto 0 auto auto; height: 100vh; max-height: 100vh; padding: 20px; border: 0; border-radius: 22px 0 0 22px; background: #fff; color: var(--ink); box-shadow: 0 24px 80px rgba(24,44,32,.25); overflow: auto; }
.menu-sheet::backdrop { background: rgba(23,38,30,.42);  }
.menu-list { display: grid; gap: 4px; }
.menu-group { margin: 12px 4px 2px; color: var(--muted, #6b7d70); font-size: calc(10px * var(--text-scale)); font-weight: 800; letter-spacing: .12em; }
.menu-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 8px 12px; border: 0; border-radius: 14px; background: transparent; color: inherit; font: 600 calc(15px * var(--text-scale)) var(--body, inherit); text-align: left; cursor: pointer; }
.menu-item:hover, .menu-item.is-active { background: #eef4ea; }
.menu-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #f0f5ec; font-size: calc(18px * var(--text-scale)); }
@media (max-width: 760px) {
  .menu-button { display: grid; margin-right: -2px; }
  .primary-nav { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .nav-secondary { display: none !important; }
  .nav-menu-item { display: flex; }
  .menu-sheet { margin: auto 0 0; width: 100%; max-width: 100%; height: auto; max-height: 86vh; border-radius: 22px 22px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
:root[data-theme="dark"] .menu-sheet { background: #18221c; color: #e8efe9; }
:root[data-theme="dark"] .menu-item:hover, :root[data-theme="dark"] .menu-item.is-active, :root[data-theme="dark"] .menu-icon { background: #22302a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu-sheet { background: #18221c; color: #e8efe9; } :root:not([data-theme="light"]) .menu-item.is-active, :root:not([data-theme="light"]) .menu-icon { background: #22302a; } }
.transport-fuel[hidden] { display: none; }
.history-dialog { padding: 20px 18px 22px; overscroll-behavior: contain; }
.history-dialog .dialog-heading { position: sticky; top: -20px; z-index: 1; margin: -20px -18px 12px; padding: 20px 18px 12px; background: inherit; }
.history-dialog .month-switch { margin: 0 0 12px; }
.history-open { width: 100%; margin-top: 14px; justify-content: center; }
@media (max-width: 480px) { .history-dialog { width: calc(100% - 16px); max-height: 92vh; padding: 16px 12px 18px; } .history-dialog .dialog-heading { top: -16px; margin: -16px -12px 10px; padding: 16px 12px 10px; } }

/* Small expenses (Μικροέξοδα) */
.extras-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.extras-quick-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 104px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: inherit; font: inherit; text-align: center; cursor: pointer; touch-action: manipulation; transition: transform .08s, background .15s; }
.extras-quick-button:hover { background: var(--green-soft); }
.extras-quick-button:active { transform: scale(.96); }
.extras-emoji { font-size: calc(30px * var(--text-scale)); line-height: 1; }
.extras-name { font-weight: 700; font-size: calc(13px * var(--text-scale)); line-height: 1.2; }
.extras-price { color: var(--muted); font-size: calc(12px * var(--text-scale)); }
.extras-badge { position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 10px; background: var(--green, #2d6b4c); color: #fff; font-size: calc(10px * var(--text-scale)); font-weight: 700; }
.extras-ask { margin: 0 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--green-soft); }
.extras-ask-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }
.extras-last { margin: 0 0 14px; display: grid; gap: 8px; }
.extras-last p { margin: 0; font-weight: 700; }
.extras-last-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.extras-last .qty-stepper { display: inline-flex; align-items: center; gap: 6px; }
.extras-stats { margin-top: 18px; }
.extras-cats summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; cursor: pointer; list-style: none; }
.extras-cats summary::-webkit-details-marker { display: none; }
.extras-cats summary::before { content: '▸'; }
.extras-cats[open] summary::before { content: '▾'; }
.extras-cats summary h2 { display: inline; margin: 0; }
.extras-cats[open] summary { margin-bottom: 12px; }
.extras-cats li { align-items: center; }
.extras-cat-actions { display: inline-flex; gap: 4px; }
.extras-cat-form { display: grid; grid-template-columns: 64px minmax(0,1fr) auto auto; gap: 8px; width: 100%; margin-top: 8px; }
#extras-cat-form { grid-template-columns: 64px minmax(0,1fr) auto; }
.extras-emoji-input { text-align: center; }
@media (max-width: 480px) {
  .extras-quick { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .extras-quick-button { min-height: 92px; padding: 10px 4px; }
  .extras-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .extras-stats .stat-card { min-height: 0; padding: 10px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .extras-stats .stat-card .stat-icon { display: none; }
  .extras-stats .stat-card strong { font-size: calc(17px * var(--text-scale)); }
  .extras-ask-row { grid-template-columns: minmax(0,1fr) auto; }
  .extras-ask-row [data-action="extras-ask-cancel"] { grid-column: 1 / -1; }
  .extras-cat-form { grid-template-columns: 52px minmax(0,1fr); }
  .extras-cat-form button { grid-column: span 1; }
}

/* ---------- Navigation tidy-up: one menu (☰ / sidebar), a quick-actions bar on phones ---------- */
.view-content:focus, .view-content:focus-visible { outline: none; }
.primary-nav .nav-label { margin: 14px 12px 4px; }
.primary-nav .nav-label:first-child { margin-top: 0; }
.quick-bar { display: none; }
.home-button { display: grid; place-items: center; border: 0; color: white; cursor: pointer; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; text-transform: uppercase; }
.crumb-home { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
button.stat-card { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.stat-card:hover { border-color: #bfd4c1; }
.quick-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
#home-expiry { grid-column: 1 / -1; }
.home-bills-due { display: block; width: 100%; margin: 14px 0 0; text-align: left; font: inherit; font-weight: 700; cursor: pointer; }
.collapsible summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; cursor: pointer; list-style: none; }
.collapsible summary::-webkit-details-marker { display: none; }
.collapsible summary::before { content: '▸'; color: var(--muted); }
.collapsible[open] summary::before { content: '▾'; }
.collapsible summary h2 { display: inline; margin: 0; font: 800 calc(17px * var(--text-scale)) var(--display); }
.collapsible[open] summary { margin-bottom: 12px; }
.settings-more { margin-top: 16px; }
.settings-more .settings-grid { margin-top: 4px; }
#transport-recurring, #transport-vehicles { margin-top: 16px; }
@media (max-width: 760px) {
  .primary-nav { display: none; }
  .quick-bar { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 3px; }
  .quick-bar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 55px; padding: 4px 2px; border: 0; border-radius: 10px; background: transparent; color: #4f6357; font-family: inherit; font-size: calc(10px * var(--text-scale)); font-weight: 700; line-height: 1.15; cursor: pointer; min-width: 0; }
  .quick-bar-item span:not(.nav-icon) { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .quick-bar-item .nav-icon { font-size: calc(19px * var(--text-scale)); line-height: 1; }
  .quick-bar-item:active { background: var(--green-soft); }
  .quick-bar-more { color: var(--green-dark, #1f4d36); }
  .menu-button { display: inline-flex; min-height: 38px; padding: 0 12px; gap: 6px; font-size: calc(13px * var(--text-scale)); }
  .topbar .button-add { display: none; }
  .home-hero { min-height: 0; padding: 18px 20px; margin-bottom: 14px; }
  .home-hero .hero-illustration { display: none; }
  .home-hero h1 { font-size: calc(22px * var(--text-scale)); }
  .home-hero .eyebrow, .home-hero p { display: none; }
  .home-stats { gap: 8px; margin-bottom: 14px; }
  .home-stats .stat-card { min-height: 0; padding: 10px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .home-stats .stat-card .stat-icon { display: none; }
  .home-stats .stat-card strong { font-size: calc(20px * var(--text-scale)); }
  .quick-grid { gap: 8px; }
  .quick-grid .quick-action { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
  .quick-grid .quick-action small, .quick-grid .quick-action .arrow { display: none; }
  .quick-grid .quick-action strong { font-size: calc(12px * var(--text-scale)); }
  .shopping-summary { display: none; }
  .page-heading { margin-bottom: 18px; }
}
:root[data-theme="dark"] .quick-bar-item { color: #b3c2b8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .quick-bar-item { color: #b3c2b8; } }
/* Small expenses: suggestion chips (faint until used) and the "type once" form */
.extras-suggest-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 14px; }
.extras-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px dashed var(--line); border-radius: 20px; background: transparent; color: var(--muted); font: inherit; font-size: calc(13px * var(--text-scale)); opacity: 1; cursor: pointer; }
.extras-chip:hover, .extras-chip:focus-visible { opacity: 1; border-style: solid; color: inherit; }
.extras-chip-off { width: 32px; height: 32px; font-size: calc(15px * var(--text-scale)); opacity: .7; }
.extras-new { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.extras-new-row { display: grid; grid-template-columns: 56px minmax(0,1fr) 90px auto; gap: 8px; }
@media (max-width: 480px) { .extras-new-row { grid-template-columns: 52px minmax(0,1fr) 80px; } .extras-new-row button { grid-column: 1 / -1; } }
#extras-add { margin-top: 16px; }
.active-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--amber-soft); color: #79501a; font-size: calc(12px * var(--text-scale)); }
.active-filter .filter-chip { font-weight: 700; }
/* Home: sign-in nudge (signed out only) */
.signin-card { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px 12px; margin: 0 0 14px; padding: 12px 44px 12px 14px; border: 1px solid #cfe0f3; border-radius: 14px; background: #eef5fc; }
.signin-icon { font-size: calc(24px * var(--text-scale)); line-height: 1; }
.signin-text h2 { margin: 0; font: 800 calc(14px * var(--text-scale))/1.25 var(--display); }
.signin-text p { margin: 3px 0 0; color: var(--muted); font-size: calc(12px * var(--text-scale)); }
.signin-card .button { min-height: 38px; }
.signin-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; font-size: calc(15px * var(--text-scale)); }
.sync-card.is-highlight { box-shadow: 0 0 0 3px #7fb2e5; transition: box-shadow .3s; }
@media (max-width: 480px) { .signin-card { grid-template-columns: auto minmax(0,1fr); } .signin-card .button { grid-column: 1 / -1; width: 100%; } }
:root[data-theme="dark"] .signin-card { background: #1b2a36; border-color: #2d4356; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .signin-card { background: #1b2a36; border-color: #2d4356; } }

/* Text size (Settings → Εμφάνιση) */
:root[data-text="large"] { --text-scale: 1.15; }
:root[data-text="xlarge"] { --text-scale: 1.3; }
/* High contrast (Settings → Εμφάνιση) */
:root[data-contrast="high"] { --ink: #000; --muted: #26332c; --line: #6f7d75; --green: #18432e; --green-dark: #0f3020; --amber: #6b3a00; --red: #8a1f1a; --paper: #fff; --surface-soft: #fff; }
:root[data-contrast="high"][data-dark="1"] { --ink: #fff; --muted: #e3ebe6; --line: #9fb0a6; --green: #8fe0b2; --green-dark: #b6f0cf; --amber: #ffc56b; --red: #ffaaa3; --paper: #000; --surface: #0d1410; --surface-soft: #0d1410; }
:root[data-contrast="high"] .panel, :root[data-contrast="high"] .button, :root[data-contrast="high"] .field-input, :root[data-contrast="high"] .filter-chip, :root[data-contrast="high"] .icon-button, :root[data-contrast="high"] .search-input, :root[data-contrast="high"] .quick-action { border-color: var(--line) !important; }
:root[data-contrast="high"] .nav-item, :root[data-contrast="high"] .field-hint, :root[data-contrast="high"] .field-label, :root[data-contrast="high"] .privacy-card p, :root[data-contrast="high"] .eyebrow, :root[data-contrast="high"] .nav-label { color: var(--muted) !important; }
:root[data-contrast="high"] *:focus-visible { outline: 3px solid var(--ink) !important; outline-offset: 2px; }
.size-options .filter-chip:nth-child(2) { font-size: calc(16px * var(--text-scale)); }
.size-options .filter-chip:nth-child(3) { font-size: calc(18px * var(--text-scale)); }
.settings-sub { margin: 16px 0 8px; font-size: calc(14px * var(--text-scale)); }
.check-row input[type=checkbox] { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--green); }
.check-row { min-height: 44px; }
.choice-actions { display: grid; gap: 10px; margin-top: 14px; }
.choice-actions .button { min-height: 48px; width: 100%; }
.choice-raw { max-height: 140px; overflow: auto; white-space: pre-wrap; word-break: break-all; padding: 10px; border-radius: 10px; background: var(--surface-soft); border: 1px solid var(--line); font-size: calc(13px * var(--text-scale)); }
.bill-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 20px; background: var(--blue-soft); color: var(--ink); font-size: calc(11px * var(--text-scale)); font-weight: 700; vertical-align: middle; }
.onboard-dialog { width: min(560px, calc(100vw - 24px)); }
.onboard-bills { flex-wrap: wrap; }
.bill-presets .theme-options { flex-wrap: wrap; }
#onboard-dialog, #choice-dialog, #scan-dialog { padding: 22px 20px 20px; }
/* v1.6.10: the receipt dialogs get the same inner space as the others (heading no longer cut off, content off the left edge). */
#receipt-dialog { padding: 22px 20px 20px; }
#receipt-dialog form { padding: 0; } /* the dialog itself has the padding now (no double indent) */
#receipt-detail-dialog > .dialog-heading { padding: 22px 22px 0; }
.toast-undo { margin-left: 10px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 10px; background: #fff; color: #17301f; font-weight: 800; cursor: pointer; }
.relative-help { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.relative-help summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.relative-help ol { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; }
.sync-join-form .field-label { flex-basis: 100%; }

/* Diet plan («Πρόγραμμα διατροφής») */
.diet-section { margin-top: 18px; }
.diet-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.diet-cell { min-height: 0; text-align: left; }
.diet-cell .plan-meal { white-space: normal; font-size: calc(13px * var(--text-scale, 1)); line-height: 1.3; }
.diet-cell.is-over { border-color: #d9a441; }
.diet-warn { color: #9a6200; }
.diet-people { margin: 8px 0; flex-wrap: wrap; }
.diet-more { margin-top: 12px; }
.diet-more summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.diet-slot { border: 1px solid #e3e9df; border-radius: 12px; padding: 10px; margin: 0 0 12px; }
.diet-slot .field-row { display: grid; grid-template-columns: 1fr 96px; gap: 8px; }
.diet-options { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; }
.diet-option textarea { width: 100%; font: inherit; resize: vertical; min-height: 54px; }
.diet-option-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.diet-freq { width: auto; min-width: 150px; padding-top: 6px; padding-bottom: 6px; }
.diet-sticky { position: sticky; bottom: -20px; background: inherit; padding: 10px 0; margin-bottom: -10px; }
.diet-checklist { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.diet-checklist .check-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e3e9df; border-radius: 10px; }
.diet-checklist input { width: 22px; height: 22px; }
.diet-checklist small { color: var(--muted, #667); }
.meal-option.is-active { border-color: var(--green, #2f6b3a); }
.diet-day { display: grid; grid-template-columns: 1fr; gap: 6px; }
.diet-day .diet-cell { width: 100%; min-height: 0; display: grid; gap: 2px; }
.diet-day .diet-cell .plan-meal { font-weight: 600; }
/* Accessibility: every tap target on touch screens is at least 44px tall (WCAG 2.5.5). Inline text links
   grow their hit area with padding + equal negative margin so the layout does not move. */
@media (max-width: 760px), (pointer: coarse) {
  .button, .filter-chip, .extras-chip, .lang-toggle, .menu-button, .toast-undo, .skip-link, .signin-card .button, .button-add, .small-action,
  .search-input, .field-input, .price-input, .receipt-line .field-input, select { min-height: 44px; }
  .icon-button, .extras-chip-off { width: 44px; height: 44px; }
  .home-button { min-width: 44px; min-height: 44px; }
  .crumb-home, .panel-link, .text-button { display: inline-flex; align-items: center; min-height: 44px; margin-top: -12px; margin-bottom: -12px; }
  summary { min-height: 44px; display: flex; align-items: center; }
}

.plan-classic { margin-top: 18px; }
.plan-classic > summary { cursor: pointer; font-weight: 700; color: var(--muted); padding: 8px 0; }
.plan-classic[open] > summary { margin-bottom: 10px; }

/* Performance (INP/CLS): instant tap feedback, footer space reserved until the first render, off-screen days skipped. */
.is-pressed { opacity: .7; transform: scale(.98); }
.view-content:empty { min-height: 100vh; }
.app-footer { content-visibility: auto; contain-intrinsic-size: auto 40px; }
.plan-day { content-visibility: auto; contain-intrinsic-size: auto 220px; }
.privacy-details { margin: 6px 0 10px; } .privacy-details summary { cursor: pointer; font-weight: 600; } .privacy-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: calc(13px * var(--text-scale)); }

.receipts-months { flex-wrap: wrap; margin-bottom: 10px; }
.receipts-list, .receipt-items { list-style: none; margin: 0; padding: 0; }
.receipt-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.receipt-main { flex: 1; display: grid; gap: 2px; min-width: 0; } .receipt-main small { color: var(--muted); }
.receipt-total { font-weight: 700; white-space: nowrap; }
.receipt-items li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }

/* Cart: last receipt price + shelf-label price */
.price-tools { display: grid; gap: 8px; margin: 4px 0 10px; }
.price-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.price-chips:empty, #cart-shelf-status:empty { display: none; }
.price-chip { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--accent, #2f7d4f); background: transparent; color: inherit; font-weight: 700; font-size: calc(15px * var(--text-scale)); cursor: pointer; }
.shelf-button { min-height: 48px; justify-content: center; }
.price-tools[hidden] { display: none; }
.month-trend.up { color: var(--danger, #b3261e); } .month-trend.down { color: var(--accent, #2f7d4f); }

.auto-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: calc(12px * var(--text-scale)); font-weight: 700; background: color-mix(in srgb, var(--accent, #2f7d4f) 15%, transparent); color: var(--accent, #2f7d4f); vertical-align: middle; }
.big-check { min-height: 48px; font-size: calc(17px * var(--text-scale)); }
.big-check input { width: 24px; height: 24px; }

/* Price comparison */
.compare-dialog { width: min(640px, calc(100vw - 24px)); }
.compare-best { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent, #2f7d4f) 14%, transparent); font-weight: 700; margin: 8px 0 12px; }
.compare-product { border-top: 1px solid var(--line, #e3e7e3); padding: 10px 0; }
.compare-product h3 { margin: 0 0 6px; font-size: calc(17px * var(--text-scale)); }
.compare-stores { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.compare-stores li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 10px; }
.compare-stores li.is-cheapest { background: color-mix(in srgb, var(--accent, #2f7d4f) 12%, transparent); font-weight: 700; }
.compare-poso { min-height: 44px; }
.recipe-filter { margin: 4px 0 12px; }
.recipe-filter .filter-chip { min-height: 44px; font-size: calc(16px * var(--text-scale)); }
.all-recipes { margin-top: 16px; }
.all-recipes > summary { min-height: 48px; display: flex; align-items: center; font-weight: 700; cursor: pointer; font-size: calc(17px * var(--text-scale)); }
/* v1.3.2 «Στην αρχή» */
.back-to-top { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: var(--green, #2d6b4c); color: #fff; font-size: calc(22px * var(--text-scale)); line-height: 1; box-shadow: 0 6px 18px rgba(24,44,32,.25); cursor: pointer; opacity: .92; }
.back-to-top[hidden] { display: none; }
.back-to-top:hover, .back-to-top:focus-visible { opacity: 1; }
.back-to-top:focus-visible { outline: 3px solid #f3c64a; outline-offset: 2px; }
.back-to-top-page { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 15; }
.back-to-top-dialog { position: sticky; bottom: 12px; margin: 0 12px 12px auto; z-index: 2; }
@media (max-width: 760px) { .back-to-top-page { bottom: calc(92px + env(safe-area-inset-bottom)); } }

/* v1.4 */
.offline-bar{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 68px);z-index:60;background:#3b3b3b;color:#fff;font-size:.85rem;padding:4px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.25);max-width:calc(100% - 24px);text-align:center}
.offline-bar[hidden]{display:none}
.receipt-line.receipt-edit-line{grid-template-columns:22px minmax(0,1fr) 70px 90px}
@media (max-width:760px){.receipt-line.receipt-edit-line{grid-template-columns:22px minmax(0,1fr) minmax(0,1fr)}.receipt-edit-line .receipt-name{grid-column:2/-1}.receipt-line.receipt-edit-line .receipt-qty{grid-column:2}.receipt-line.receipt-edit-line .receipt-price{grid-column:3}}
#receipt-edit-form .field-input{margin-bottom:8px}
#backup-pass2-row[hidden],#backup-plain[hidden]{display:none}
/* v1.5 Google Drive backup */
.drive-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, rgba(127,127,127,.25)); }
.toggle-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: .95rem; }
.drive-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.drive-list .button { width: 100%; justify-content: flex-start; }

/* v1.5.1: protect-your-data card, sheet and Settings badge */
.protect-card .protect-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px) { .protect-card .protect-actions { grid-column: 1 / -1; } .protect-card .protect-actions .button { flex: 1 1 140px; } }
.storage-badge { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .95rem; }
.storage-badge.is-synced { background: #e6f4ea; color: #1e6b34; }
.storage-badge.is-local { background: #fff4e0; color: #8a5300; }
.storage-badge .text-button { font-weight: 700; }
:root[data-theme="dark"] .storage-badge.is-synced { background: #173524; color: #9fe0b4; }
:root[data-theme="dark"] .storage-badge.is-local { background: #3a2a10; color: #f3c77a; }
.protect-sheet-actions { flex-wrap: wrap; }
#protect-dialog { width: min(520px, calc(100vw - 24px)); padding: 22px 20px 20px; }
#protect-dialog h2 { font-size: 1.35rem; line-height: 1.25; margin: 4px 0 10px; }
#protect-dialog .protect-sheet-actions { display: grid; gap: 10px; margin-top: 16px; }

/* v1.5.7: misfiled toll/fuel receipts box — stays inside narrow screens */
#transport-misfiled { overflow: hidden; }
.misfiled-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.misfiled-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.misfiled-name { flex: 1 1 10rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.misfiled-list li .button { flex: 0 0 auto; margin-left: auto; }

/* v1.6.0: «Δουλειές σπιτιού» — bright status colours */
.chore-card { --c: #2e7d4f; display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; align-items: center; padding: 14px; margin-bottom: 10px; border-radius: 18px; background: var(--surface, #fff); border: 1px solid rgba(0,0,0,.08); border-left: 6px solid var(--c); min-width: 0; }
.chore-late { --c: #d63a2f; } .chore-today { --c: #ef7d1a; } .chore-ok { --c: #2e8b57; }
.chore-emoji { font-size: 1.7rem; } .chore-main { min-width: 0; }
.chore-main h3 { margin: 0; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chore-title { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.chore-pill, .chore-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; background: var(--c); }
.chore-badge { font-size: .95rem; padding: 6px 12px; }
.chores-sum-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.chore-meta { margin: .3rem 0 0; font-size: .88rem; line-height: 1.45; opacity: .85; overflow-wrap: anywhere; }
.chore-done { grid-column: 1 / -1; width: 100%; min-height: 48px; font-size: 1.05rem; }
.chores-add { width: 100%; min-height: 48px; margin-top: 6px; }
.chore-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.chore-stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .chore-stepper .field-input { max-width: 90px; text-align: center; font-size: 1.2rem; }
.chore-remind { margin-top: 6px; font-weight: 700; }
.chore-hist { list-style: none; padding: 0; margin: 0; } .chore-hist li { display: flex; justify-content: space-between; gap: 8px; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
/* v1.6.2: bottom bar picker */
.bar-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.bar-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; min-width: 0; }
.bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.bar-btns { display: flex; gap: 4px; flex: 0 0 auto; }
/* v1.6.3: clear feedback on onboarding choices — the picked option is filled and ticked. */
#onboard-dialog .filter-chip { display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; transition: background .15s, color .15s, border-color .15s; }
#onboard-dialog .filter-chip[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: #fff; box-shadow: 0 3px 8px rgba(45,107,76,.22); }
#onboard-dialog .filter-chip[aria-pressed="true"]::before { content: "✓"; font-weight: 800; }
#onboard-dialog .filter-chip:focus-visible { outline: 3px solid rgba(45,107,76,.35); outline-offset: 2px; }
/* v1.6.4: onboarding header follows the home header; room above the buttons; clearer hover/press/focus. */
#onboard-dialog .dialog-heading { align-items: flex-start; margin-bottom: 22px; }
#onboard-dialog .dialog-heading .eyebrow { margin: 0; } /* home hero: eyebrow sits right on the title */
#onboard-dialog .dialog-heading h2 { line-height: 1.1; }
#onboard-dialog .onboard-sub { max-width: 515px; margin: 11px 0 0; color: var(--muted); font-size: calc(14px * var(--text-scale)); }
#onboard-dialog .onboard-actions { margin-top: 28px; }
#onboard-dialog .filter-chip, #onboard-dialog .button, #onboard-dialog .icon-button { transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .08s; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  #onboard-dialog .filter-chip[aria-pressed="false"]:hover { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
  #onboard-dialog .filter-chip[aria-pressed="true"]:hover { background: var(--green-dark); border-color: var(--green-dark); }
  #onboard-dialog .button-quiet:hover, #onboard-dialog .icon-button:hover { border-color: var(--green); color: var(--green-dark); background: var(--green-soft); }
}
#onboard-dialog .filter-chip:active, #onboard-dialog .button:active, #onboard-dialog .icon-button:active { transform: scale(.96); }
#onboard-dialog .filter-chip:focus-visible, #onboard-dialog .button:focus-visible, #onboard-dialog .icon-button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
/* a11y (WCAG AA contrast) */
.skip-link { background: #17231d; color: #fff; }
:root[data-dark="1"] .brand-mark { color: #0f1712; }
:root[data-dark="1"] #onboard-dialog .filter-chip[aria-pressed="true"] { color: #0f1712; }
:root[data-dark="1"] #onboard-dialog .filter-chip[aria-pressed="false"]:hover, :root[data-dark="1"] #onboard-dialog .button-quiet:hover, :root[data-dark="1"] #onboard-dialog .icon-button:hover { background: #22302a; color: var(--ink); }
:root[data-dark="1"] #onboard-dialog .filter-chip[aria-pressed="true"]:hover { background: #7cc39d; border-color: #7cc39d; }
@media (max-width: 760px) { #onboard-dialog .onboard-sub { font-size: calc(12px * var(--text-scale)); } }
/* v1.6.5: the ✓ slot is always reserved, so picking/unpicking never moves the other pills. */
#onboard-dialog .filter-chip::before { content: "✓"; display: inline-block; width: 1ch; text-align: center; font-weight: 800; visibility: hidden; }
#onboard-dialog .filter-chip[aria-pressed="true"]::before { visibility: visible; }
/* v1.6.5: one shared add form (shopping list + recurring) */
.item-add-form { display: grid; grid-template-columns: minmax(0,1fr) 80px 110px 170px; gap: 8px; margin-bottom: 14px; }
.item-add-form.has-extra { grid-template-columns: minmax(0,1fr) 80px 110px 170px 150px; }
.item-add-form .field-input { min-width: 0; }
.item-add-form .item-add-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.item-add-form .item-add-actions .button-primary { flex: 1 1 auto; }
@media (max-width: 760px) {
  .item-add-form, .item-add-form.has-extra { grid-template-columns: 1fr 1fr; }
  .item-add-form .item-add-name { grid-column: 1 / -1; }
  .item-add-form .category-select { grid-column: 1 / -1; }
  .item-add-form select[name="everyDays"] { grid-column: 1 / -1; }
}
/* v1.6.5: Μενού pinned at the right of the bottom bar */
.quick-bar-menu { color: var(--green-dark) !important; }
:root[data-dark="1"] .quick-bar-menu { color: #8fd0ab !important; }
.bar-pinned { margin-top: 10px; }
/* v1.6.5: meal plan day cards in dark theme (WCAG AA: text ≥4.5:1, card edges ≥3:1) */
:root[data-dark="1"] .plan-day { background: var(--surface); border-color: #6f8a7b; color: var(--ink); }
:root[data-dark="1"] .plan-day.is-today { border-color: #8fd0ab; box-shadow: 0 0 0 2px rgba(143,208,171,.35); }
:root[data-dark="1"] .plan-cell { border-color: #6f8a7b; color: var(--ink); }
:root[data-dark="1"] .plan-cell.has-meal { background: #22362b; }
:root[data-dark="1"] .plan-slot, :root[data-dark="1"] .plan-day-name { color: #c4d3ca; }
:root[data-dark="1"] .meal-option { border-color: #6f8a7b; }
.bill-chips { margin: 6px 0 10px; }
.bill-chips [aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
:root[data-dark="1"] .bill-chips [aria-pressed="true"] { background: #22362b; color: #e4ece6; }
/* v1.6.8: own expense categories */
.receipt-line.receipt-edit-line .receipt-expcat{grid-column:2/-1}
.expcat-new{margin:8px 0;padding:10px;border:1px dashed var(--line);border-radius:12px}
.expcat-new-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:8px}
@media (max-width:480px){.expcat-new-row{grid-template-columns:52px minmax(0,1fr)}.expcat-new-row button{grid-column:span 1}}
#expcat-form{grid-template-columns:64px minmax(0,1fr) auto}
#expcat-form .form-error,#expcat-edit-form .form-error{grid-column:1/-1}
@media (max-width:480px){#expcat-form{grid-template-columns:52px minmax(0,1fr)}#expcat-form button{grid-column:1/-1}}
#expense-cats .extras-cat-actions{display:flex;align-items:center;gap:6px}
/* v1.6.9: dialog buttons never stick out sideways. They wrap; on phones they form a 2-column grid
   (an odd last button takes the full row). The round ⬆ stays out of the way (see back-to-top.js). */
.dialog-actions { flex-wrap: wrap; }
.dialog-actions > .button { min-width: 0; white-space: normal; text-align: center; line-height: 1.2; }
@media (max-width: 560px) {
  .dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dialog-actions > .button { width: 100%; padding-inline: 8px; }
  .dialog-actions > :only-child, .dialog-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.item-dialog, .confirm-dialog { overflow-x: hidden; }
body:has(dialog[open]) .back-to-top-page { display: none; }
/* v1.6.11: unpaid bills shown apart from the totals («δεν μετράνε ακόμη»). */
.pending-bills { display: block; margin-top: 10px; text-align: left; color: var(--muted, #6b6b6b); font-size: .9rem; }
/* v1.6.12: which bills make up the month's figure (closed by default). */
.bills-month-list { margin-top: 10px; font-size: .92rem; }
.bills-month-list summary { cursor: pointer; color: var(--muted); }
.bills-month-list ul { list-style: none; margin: 8px 0 0; padding: 0; }
.bills-month-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(0,0,0,.06); }
.bills-month-list small { display: block; color: var(--muted); }
/* v1.6.14: «+N ακόμα →» under the month's spending on the main screen. */
.home-month-more { display: block; margin-top: 8px; }
/* v1.6.15: the desktop sidebar has the same sections as the phone menu; on short screens it scrolls. */
@media (min-width: 761px) { .sidebar { overflow-y: auto; overscroll-behavior: contain; } }
@media (min-width: 761px) and (max-height: 900px) { .sidebar { padding-top: 20px; } .sidebar > .brand { margin-bottom: 20px; } .primary-nav { gap: 2px; } .nav-item { min-height: 38px; } .primary-nav .nav-label { margin-top: 10px; } }
/* v1.6.16: number / price fields in dark theme: dark background, light digits, also while typing, on Android autofill
   and when the browser applies its own colours (text-fill, caret). Light theme unchanged. */
:root[data-dark="1"] :is(.field-input, .search-input, .price-input, input[type="number"], input[inputmode="decimal"], input[inputmode="numeric"], select, textarea),
:root[data-dark="1"] :is(.field-input, .search-input, .price-input, input[type="number"], input[inputmode="decimal"]):focus {
  background-color: var(--surface); color: var(--ink); -webkit-text-fill-color: var(--ink); caret-color: var(--ink); color-scheme: dark; }
:root[data-dark="1"] :is(.field-input, input):-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--surface) inset; -webkit-text-fill-color: var(--ink); }
:root[data-dark="1"] .cart-price-display { background-color: var(--surface-soft); }
/* v1.6.17: dark theme (chosen OR automatic, html[data-dark="1"] is set by theme.js for both): no light backgrounds under light text.
   Bug: phone menu, tapped / active item («🚗 Μετακινήσεις») kept the light hover colour #eef4ea with near-white text. */
:root[data-dark="1"] .menu-item:hover, :root[data-dark="1"] .menu-item:focus-visible, :root[data-dark="1"] .menu-item.is-active { background: #2a3b32; color: #f1f6f2; }
:root[data-dark="1"] .menu-item.is-active { box-shadow: inset 3px 0 0 #8fd0ab; }
:root[data-dark="1"] .menu-item:hover .menu-icon, :root[data-dark="1"] .menu-item.is-active .menu-icon, :root[data-dark="1"] .menu-icon { background: #22302a; }
:root[data-dark="1"] .nav-item:hover, :root[data-dark="1"] .nav-item:focus-visible { background: #22302a; color: var(--ink); }
:root[data-dark="1"] .nav-item.is-active { background: var(--green-soft); color: var(--green-dark); }
:root[data-dark="1"] .button-danger, :root[data-dark="1"] .button-danger:hover { color: #1f0b09; }
:root[data-dark="1"] .extras-badge { color: #0f1712; }
:root[data-dark="1"] .storage-badge.is-local { background: #3a2e1a; color: #f0c88a; }
:root[data-dark="1"] .storage-badge.is-local .text-button { color: #f0c88a; }
:root[data-dark="1"] .ingredient-chip.urgent { background: #4a3a1c; color: #f6deb0; }
:root[data-dark="1"] .receipt-line.is-doubtful { background: #3d3216; color: var(--ink); }
:root[data-dark="1"] .bill-ref, :root[data-dark="1"] .code-info { background: #22302a; color: var(--ink); }
:root[data-dark="1"] .alert-banner.is-danger { background: #3d2422; color: #ffb4ad; }
:root[data-dark="1"] .budget-track { background: #2c3a33; }
:root[data-dark="1"] .chore-card { background: var(--surface); }
/* v1.7.0: «Ποιος πλήρωσε τι» (only for households with 2+ members). */
.whopaid-owe { margin: 10px 0 4px; font-weight: 800; font-size: calc(16px * var(--text-scale)); }
.whopaid-owe.is-even { color: var(--green); }
.whopaid-done { list-style: none; margin: 8px 0 0; padding: 0; font-size: .9rem; color: var(--muted); }
.whopaid-done li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.whopaid-list { margin-top: 12px; font-size: .92rem; }
.whopaid-list summary { cursor: pointer; color: var(--muted); }
.whopaid-list ul { list-style: none; margin: 8px 0 0; padding: 0; }
.whopaid-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.whopaid-list small { display: block; color: var(--muted); }
.whopaid-select select { min-width: 130px; max-width: 46vw; }
.whopaid-share { display: grid; grid-template-columns: 1fr 90px; align-items: center; gap: 8px; margin-bottom: 6px; }

/* v1.8.0: scan failure → «＋ Έξοδο με το χέρι»; receipt QR hint; torch on */
.receipt-fail { margin: 10px 0; padding: 12px 14px; border-radius: 14px; background: var(--amber-soft, #fff6e5); }
:root[data-dark="1"] .receipt-fail { background: #3a3020; }
.receipt-fail .form-error { margin: 0 0 6px; }
.receipt-qr-hint { font-weight: 600; }
#scan-torch[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
:root[data-dark="1"] #scan-torch[aria-pressed="true"] { background: #22362b; color: #e4ece6; }
#receipt-manual-form .dialog-actions { flex-wrap: wrap; }

/* v1.8.1: «📢 Νέα & tips στο Telegram» link in the sidebar and the phone menu (looks like the other items) */
a.nav-item, a.menu-item { text-decoration: none; box-sizing: border-box; }
a.menu-item { color: inherit; }