:root {
    --bg: #fff7f2;
    --card: #ffffff;
    --card-alt: #fff1ea;
    --text: #2c2620;
    --muted: #8a7f74;
    --accent: #e65a46;
    --accent2: #3caba5;
    --accent-soft: #ffe3da;
    --border: #f0e2d8;
    --danger: #d64545;
    --shadow: 0 2px 10px rgba(60, 40, 20, 0.08);
    --nav-bg: #ffffff;
    --chip-bg: #fdece5;
    --overlay: rgba(255,255,255,0.88);
    /* Ήταν 52px· μεγάλωσε λίγο ώστε να χωράει άνετα κάθε ετικέτα του
       bottom-nav χωρίς να κόβεται ποτέ κάθετα (βλ. σχόλιο πάνω από
       .bottom-nav), χωρίς να αλλάξει τίποτα άλλο στο ίδιο layout. */
    --nav-h: 62px;
  }
  html[data-theme="dark"] {
    --bg: #171512;
    --card: #221f1b;
    --card-alt: #2a2621;
    --text: #f2ece4;
    --muted: #a89c8e;
    --accent: #ff7a63;
    --accent2: #59c9c1;
    --accent-soft: #3a2620;
    --border: #35302a;
    --danger: #ff6b6b;
    --shadow: 0 2px 12px rgba(0,0,0,0.4);
    --nav-bg: #1d1a17;
    --chip-bg: #33261f;
    --overlay: rgba(23,21,18,0.9);
  }
  html[data-theme="rose"] {
    --bg: #fff5f7;
    --card: #ffffff;
    --card-alt: #ffe4ea;
    --text: #3a222a;
    --muted: #9c7a83;
    --accent: #e0527a;
    --accent2: #f28fab;
    --accent-soft: #ffd9e3;
    --border: #f7dbe1;
    --danger: #d64545;
    --nav-bg: #ffffff;
    --chip-bg: #ffe4ea;
  }
  html[data-theme="sage"] {
    --bg: #f4f7f0;
    --card: #ffffff;
    --card-alt: #e7efe0;
    --text: #2f3a2a;
    --muted: #7f8f74;
    --accent: #729b64;
    --accent2: #a3c398;
    --accent-soft: #e3ecdc;
    --border: #dfe8d6;
    --danger: #c8534a;
    --nav-bg: #ffffff;
    --chip-bg: #e7efe0;
  }
  html[data-theme="sky"] {
    --bg: #eef8fb;
    --card: #ffffff;
    --card-alt: #dcf1f7;
    --text: #1f333a;
    --muted: #6f8d97;
    --accent: #2ea3c9;
    --accent2: #7cc9e0;
    --accent-soft: #d6f0f7;
    --border: #d3ecf3;
    --danger: #d6544a;
    --nav-bg: #ffffff;
    --chip-bg: #dcf1f7;
  }
  html[data-theme="lavender"] {
    --bg: #f6f3fb;
    --card: #ffffff;
    --card-alt: #eae1f7;
    --text: #322b40;
    --muted: #8b7fa0;
    --accent: #8a63c4;
    --accent2: #b79ee0;
    --accent-soft: #e8dcf7;
    --border: #e5daf2;
    --danger: #d6544a;
    --nav-bg: #ffffff;
    --chip-bg: #eae1f7;
  }
  html[data-theme="mocha"] {
    --bg: #f8f2ec;
    --card: #ffffff;
    --card-alt: #ecdfd0;
    --text: #3a2c22;
    --muted: #96806c;
    --accent: #8a5a3c;
    --accent2: #bb8a63;
    --accent-soft: #ecd9c4;
    --border: #e6d5c2;
    --danger: #c1443a;
    --nav-bg: #ffffff;
    --chip-bg: #ecdfd0;
  }
  html[data-theme="clean"] {
    --bg: #fbfbfb;
    --card: #ffffff;
    --card-alt: #f0f0f0;
    --text: #26262a;
    --muted: #8a8a90;
    --accent: #3d3d42;
    --accent2: #74747a;
    --accent-soft: #ececec;
    --border: #e6e6e6;
    --danger: #d6544a;
    --nav-bg: #ffffff;
    --chip-bg: #f0f0f0;
  }
  html[data-theme="blue"] {
    --bg: #eef5ff;
    --card: #ffffff;
    --card-alt: #e3edfb;
    --text: #1c2b3a;
    --muted: #6b7c8f;
    --accent: #2f6fed;
    --accent2: #5aa9e6;
    --accent-soft: #dbe9ff;
    --border: #d6e4f7;
    --danger: #e0524a;
    --nav-bg: #ffffff;
    --chip-bg: #e3edfb;
  }
  html[data-theme="green"] {
    --bg: #f1faf3;
    --card: #ffffff;
    --card-alt: #e2f5e6;
    --text: #1e3324;
    --muted: #6f8a76;
    --accent: #2f9e57;
    --accent2: #6bc78a;
    --accent-soft: #dff5e4;
    --border: #d7ecdb;
    --danger: #d64545;
    --nav-bg: #ffffff;
    --chip-bg: #e2f5e6;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html {
    font-size: 108%;
    background: var(--nav-bg);
  }
  html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    overscroll-behavior-y: none;
  }
  /* On an installed home-screen app (standalone mode) on iOS, 100lvh is
     occasionally reported shorter than the true screen height right after a
     fresh launch, leaving a visible gap of the body background below the
     fixed bottom nav. app.js measures the real visualViewport height once it
     is safe to do so (never while the user is typing) and sets --app-vh so
     #app can match the true device height exactly, falling back to 100lvh
     before that measurement runs or if it is ever unavailable. */
  #app {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    height: 100lvh;
    height: var(--app-vh, 100lvh);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .topbar {
    padding: calc(env(safe-area-inset-top) + 14px) 18px 12px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
    flex: 0 0 auto;
  }
  .topbar h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 0;
  }
  .topbar h1 img {
    display: block;
    height: 21px;
    width: auto;
  }
  main#views {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  #views[hidden], .bottom-nav[hidden] { display: none !important; }
  /* Το splash δεν κλείνει πια μόνο του με σταθερό χρόνο (CSS animation) —
     κλείνει με JS (δες dismissBootSplash στο app.js) μόλις η εφαρμογή είναι
     όντως έτοιμη να δείξει κάτι, ώστε να μη μεσολαβεί ποτέ ξεχωριστή οθόνη
     "Φόρτωση..." ανάμεσα στο splash και στις οδηγίες/στην εφαρμογή. Η κλάση
     "hide" προστίθεται τότε από το app.js. */
  #bootSplash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 260ms ease;
  }
  #bootSplash.hide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms ease, visibility 0s linear 260ms;
  }
  #bootSplash img {
    width: min(46vw, 200px);
    height: auto;
    animation: quickSplashLogo 550ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
  }
  @keyframes quickSplashLogo {
    0% { opacity: 0; transform: scale(0.55); }
    55% { opacity: 1; transform: scale(1.08); }
    78% { transform: scale(0.97); }
    100% { opacity: 1; transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    #bootSplash { animation-duration: 220ms; }
    #bootSplash img { animation: none; }
  }
  .bootstrap-loading-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 32px 22px calc(86px + env(safe-area-inset-bottom));
    color: var(--muted);
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.5;
  }
  .view {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding-bottom: calc(16px + var(--nav-h) + env(safe-area-inset-bottom));
  }
  .view.active { display: flex; }

  /* ---- Πρόγραμμα (calendar) view ---- */
  #view-plan {
    overflow: hidden;
    padding-bottom: 0;
  }
  .plan-scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    min-height: 0;
  }
  .plan-calendar { padding: 12px 14px 0; }
  .calendar-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 4px;
  }
  .month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px 4px;
  }
  .month-header button.nav-arrow {
    border: none;
    background: var(--card-alt);
    color: var(--accent);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .month-label { font-weight: 700; font-size: 1rem; text-align: center; flex: 1; }
  .toolbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 8px;
  }
  .link-btn {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--accent);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
  }
  select#monthJump {
    flex: 1;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 0.82rem;
  }
  .weekday-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding: 2px 10px 4px;
  }
  .weekday-header span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
  }
  .month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    padding: 0 10px 10px;
  }
  .cal-cell {
    aspect-ratio: 1 / 1;
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 2px 3px;
    transition: background 0.15s, outline 0.1s;
  }
  .cal-cell.other-month { opacity: 0.32; }
  .cal-cell .daynum {
    font-size: 0.8rem;
    font-weight: 600;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
  }
  .cal-cell.today .daynum { background: var(--accent); color: #fff; }
  .cal-cell.selected {
    outline: 2px solid var(--accent);
    background: var(--accent-soft);
  }
  .cal-cell .dots {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
    margin-top: 3px;
  }
  .cal-cell .dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent2);
  }
  .cal-cell .dots .more {
    font-size: 0.55rem;
    color: var(--muted);
    line-height: 6px;
  }
  .day-agenda {
    margin: 4px 14px 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--shadow);
  }
  .day-agenda .agenda-title {
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 10px;
    text-transform: capitalize;
  }
  .meal-slot { margin-bottom: 12px; }
  .meal-slot:last-child { margin-bottom: 0; }
  .meal-slot .slot-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
  }
  .meal-slot.slot-lunch .slot-title { background: var(--accent-soft); color: var(--accent); }
  .meal-slot.slot-dinner .slot-title { background: var(--card-alt); color: var(--text); }
  .slot-drop {
    min-height: 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
    border: 1.5px dashed var(--border);
    border-radius: 12px;
    padding: 8px;
    transition: background 0.15s, border-color 0.15s;
  }
  .slot-drop.drag-over {
    background: var(--accent-soft);
    border-color: var(--accent);
  }
  .slot-drop .empty-hint {
    color: var(--muted);
    font-size: 0.78rem;
    align-self: center;
  }
  .meal-chip {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    gap: 5px;
    background: var(--chip-bg);
    color: var(--text);
    padding: 5px 8px;
    border-radius: 16px;
    font-size: 0.82rem;
    white-space: normal;
    animation: chipPop 180ms ease;
  }
  .meal-chip > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  @keyframes chipPop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .meal-chip .x {
    color: var(--muted);
    font-weight: 700;
    padding: 0 2px;
  }
  .auth-tab {
    border: 1px solid var(--border);
    background: var(--card-alt);
    color: var(--text);
    padding: 9px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
  }
  .auth-tab.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .servings-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 4px 0 14px;
  }
  .servings-stepper button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card-alt);
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 700;
  }
  .servings-stepper .servings-count {
    font-size: 1rem;
    font-weight: 700;
    min-width: 70px;
    text-align: center;
  }

  /* ---- Food tray ----
     Follows the calendar in the same vertical flow. The Plan view owns the
     only scrollbar, so the calendar appears first and foods continue below. */
  .tray {
    background: var(--card);
    border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 14px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    max-height: none;
    position: relative;
  }
  .tray-handle {
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 3px;
    margin: 8px auto 4px;
  }
  .tray-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 14px 8px;
  }
  .tray-search input {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    padding: 9px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
  }
  .tray-search button {
    border: none;
    background: var(--accent);
    color: #fff;
    padding: 0 14px;
    min-height: 34px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cat-menu-btn {
    border: 1px solid var(--border);
    background: var(--card-alt);
    color: var(--text);
    padding: 0 12px;
    min-height: 34px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cat-menu-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .food-list {
    overflow-y: visible;
    overscroll-behavior: auto;
    padding: 4px 14px calc(18px + var(--nav-h) + env(safe-area-inset-bottom));
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
  }
  .food-chip {
    display: flex;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    gap: 6px;
    background: var(--card-alt);
    border: 1px solid var(--border);
    padding: 8px 12px;
    border-radius: 18px;
    font-size: 0.94rem;
    touch-action: none;
    user-select: none;
    cursor: grab;
    position: relative;
  }
  .food-chip > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .food-chip .fav-star, .food-chip .edit-food { flex-shrink: 0; }
  .food-chip .del-custom,
  .food-chip .edit-food,
  .food-chip .fav-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    border-radius: 8px;
    font-size: 1rem;
  }
  .food-chip .del-custom:active,
  .food-chip .edit-food:active,
  .food-chip .fav-star:active {
    background: rgba(0, 0, 0, 0.1);
  }
  .food-chip .del-custom { color: var(--danger); font-weight: 700; }
  .food-chip .edit-food { color: var(--muted); }
  .food-chip .fav-star {
    filter: grayscale(1);
    opacity: 0.45;
  }
  .food-chip .fav-star.active {
    filter: none;
    opacity: 1;
  }
  .meal-chip .cook-toggle {
    font-size: 0.8rem;
    margin-right: 1px;
  }
  .meal-chip.cooked {
    background: var(--accent-soft);
  }
  .food-chip.dragging-source { opacity: 0.35; }
  .drag-ghost {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    background: var(--accent);
    color: #fff;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 0.85rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    transform: translate(-50%, -120%);
  }

  /* ---- Home dashboard view ---- */
  #view-home { padding: 16px 16px calc(16px + var(--nav-h) + env(safe-area-inset-bottom)); overflow-y: auto; }
  .home-greeting { font-size: 1.1rem; font-weight: 700; margin-bottom: 2px; }
  .home-date { color: var(--muted); font-size: 0.82rem; margin-bottom: 14px; text-transform: capitalize; }
  .home-subtitle { color: var(--muted); font-size: 0.8rem; margin-bottom: 14px; }
  .home-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
  }
  .home-card h3 { margin: 0 0 10px; font-size: 0.9rem; }
  .home-card-tap { cursor: pointer; transition: background 0.15s, transform 0.1s; }
  .home-card-tap:active { transform: scale(0.985); background: var(--card-alt); }
  .home-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
  .home-actions-row { display: flex; gap: 10px; }
  .home-action-hero, .home-action-card {
    border: none;
    cursor: pointer;
    border-radius: 16px;
    background: var(--accent-soft);
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 10px;
    font-weight: 700;
    font-size: 0.83rem;
    text-align: center;
    line-height: 1.25;
    font-family: inherit;
  }
  .home-action-hero { flex: 1; }
  .home-action-card { flex: 1; }
  /* Δύο ελαφρώς διαφορετικές αποχρώσεις (πάνω στο ίδιο χρώμα θέματος) στα
     δύο κουμπιά της αρχικής, ώστε να μην είναι πανομοιότυπα — μικρή,
     παιχνιδιάρικη διαφοροποίηση χωρίς να φορτώνει την οθόνη. */
  #shareWeekBtn { filter: hue-rotate(-40deg) saturate(1.15); }
  .home-action-hero svg, .home-action-card svg { width: 26px; height: 26px; }
  .home-action-hero:active, .home-action-card:active { transform: scale(0.97); }
  .home-week-script {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text);
    margin: 0 0 8px;
    line-height: 1.15;
  }
  .home-week-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -2px 0 8px;
  }
  .home-week-switch button {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--card-alt);
    color: var(--accent);
    font-size: 1rem;
    line-height: 1;
  }
  .home-week-switch button:disabled { opacity: 0.3; }
  .home-week-switch span {
    min-width: 126px;
    text-align: center;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
  }
  .home-slot-row { padding: 6px 0; }
  .home-slot-row:first-child { padding-top: 0; }
  .home-slot-lbl { font-size: 0.76rem; color: var(--muted); font-weight: 700; display: block; margin-bottom: 5px; }
  .home-slot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .mini-chip {
    display: inline-flex;
    align-items: center;
    background: var(--chip-bg);
    color: var(--text);
    padding: 5px 9px;
    border-radius: 14px;
    font-size: 0.88rem;
    white-space: nowrap;
  }
  .home-empty-hint { color: var(--muted); font-size: 0.8rem; }
  .mini-chip .pantry-del { margin-left: 5px; color: var(--danger); font-weight: 700; cursor: pointer; }
  #pantryChipsWrap .mini-chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .pantry-results { overflow-wrap: anywhere; }
  .pantry-results { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; margin-bottom: 6px; }
  .pantry-result-row {
    border: 1px solid var(--border);
    background: var(--card-alt);
    border-radius: 12px;
    padding: 8px 10px;
    cursor: pointer;
  }
  .pantry-result-row .pr-name { font-weight: 700; font-size: 0.95rem; }
  .pantry-result-row .pr-ratio { color: var(--accent); font-weight: 700; font-size: 0.78rem; }
  .pantry-result-row .pr-missing { color: var(--muted); font-size: 0.76rem; margin-top: 2px; }
  .home-day-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.12s;
    border-radius: 8px;
  }
  .home-day-row:last-child { border-bottom: none; }
  .home-day-row:active { background: var(--card-alt); }
  .home-day-row .d-label { width: 92px; flex-shrink: 0; color: var(--text); font-weight: 600; text-transform: capitalize; }
  .home-day-row .d-preview { flex: 1; color: var(--muted); font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home-day-row .chevron { color: var(--muted); font-size: 1.1rem; }

  .home-week-row {
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s;
    border-radius: 8px;
  }
  .home-week-row:last-child { border-bottom: none; }
  .home-week-row:active { background: var(--card-alt); }
  .home-week-row.is-today { background: var(--accent-soft); }
  .home-week-row .wk-day-label { font-weight: 700; font-size: 0.82rem; margin-bottom: 4px; text-transform: capitalize; }
  .home-week-meal { display: flex; gap: 6px; font-size: 0.9rem; color: var(--muted); padding: 1px 0; }
  .home-week-meal .wk-lbl { flex-shrink: 0; }
  .home-week-meal .wk-txt { flex: 1; color: var(--text); }
  .home-week-meal .wk-empty { color: var(--muted); font-style: italic; }

  /* ---- Κάρτα μοιράσματος (offscreen, γίνεται εικόνα) ---- */
  .share-card-wrap {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 380px;
    background: var(--bg);
    padding: 18px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  .share-card-inner {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
  }
  .share-card-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 12px; color: var(--accent); }
  .share-card-footer { margin-top: 14px; font-size: 0.7rem; color: var(--muted); text-align: right; }

  /* ---- Κατηγορίες μέσα στη λίστα φαγητών ---- */
  .food-cat-header {
    width: 100%;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 10px 0 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .food-cat-header:first-child { margin-top: 0; padding-top: 0; border-top: none; }
  /* Μικρές έγχρωμες κουκκίδες ανά κατηγορία φαγητού — παίρνουν το χρώμα
     του τρέχοντος θέματος (var(--accent)) και το περιστρέφουν λίγο σε
     απόχρωση (hue-rotate), ώστε να είναι πάντα εναρμονισμένα με το θέμα
     που έχει επιλέξει ο χρήστης, σε όλα τα 13 θέματα, χωρίς ποτέ να
     ταιριάζουν άσχημα μεταξύ τους — απλώς μια ζωντανή, παιχνιδιάρικη
     ποικιλία πάνω στο ίδιο βασικό χρώμα.
  */
  .cat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
  .cat-dot-0 { filter: hue-rotate(0deg); }
  .cat-dot-1 { filter: hue-rotate(45deg) saturate(1.15); }
  .cat-dot-2 { filter: hue-rotate(-45deg) saturate(1.15); }
  .cat-dot-3 { filter: hue-rotate(90deg) saturate(1.1); }
  .cat-dot-4 { filter: hue-rotate(-90deg) saturate(1.1); }
  .cat-dot-5 { filter: hue-rotate(150deg) saturate(1.05); }

  /* ---- Suggestion card (Surprise me) ---- */
  .suggest-card {
    text-align: center;
    padding: 10px 0 4px;
  }
  .suggest-card .emoji { font-size: 2.6rem; }
  .suggest-card .name { font-size: 1.1rem; font-weight: 700; margin: 6px 0 2px; }
  .suggest-card .ing { color: var(--muted); font-size: 0.8rem; margin-bottom: 14px; }

  /* ---- Statistics view ---- */
  #view-stats { padding: 16px 16px calc(16px + var(--nav-h) + env(safe-area-inset-bottom)); overflow-y: auto; }
  .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .stat-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
  }
  .stat-box .num { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
  .stat-box .lbl { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
  .stat-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    font-size: 0.92rem;
  }
  .stat-list-row .bar {
    height: 8px;
    border-radius: 4px;
    background: var(--accent2);
  }
  .stat-list-row .cnt { color: var(--muted); font-size: 0.76rem; white-space: nowrap; }

  /* ---- Shopping list view ---- */
  #view-shopping { padding: 14px 16px calc(16px + var(--nav-h) + env(safe-area-inset-bottom)); overflow-y: auto; }
  .shop-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }
  .btn {
    border: none;
    background: var(--accent);
    color: #fff;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    flex: 1;
  }
  .btn.secondary {
    background: var(--card-alt);
    color: var(--text);
    border: 1px solid var(--border);
  }
  .add-item-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
  }
  .add-item-row input {
    flex: 1;
    min-width: 0;
    width: 0;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
  }
  .shop-actions .btn { min-width: 0; overflow-wrap: anywhere; }
  @media (max-width: 360px) {
    .shop-actions .btn { flex-basis: 100%; }
  }
  ul#shoppingList { list-style: none; margin: 0; padding: 0; }
  ul#shoppingList li {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: background 0.2s, opacity 0.2s;
  }
  ul#shoppingList li .txt { flex: 1; font-size: 1.02rem; }
  ul#shoppingList li.checked .txt { text-decoration: line-through; color: var(--muted); }
  ul#shoppingList li input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
  ul#shoppingList li .tag {
    font-size: 0.68rem;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: 8px;
  }
  ul#shoppingList li .del { color: var(--danger); font-size: 1.1rem; font-weight: 700; padding: 0 2px; }
  ul#shoppingList li.shop-cat-header {
    background: transparent;
    border: none;
    padding: 10px 2px 4px;
    margin-bottom: 2px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  ul#shoppingList li.shop-cat-header:first-child { padding-top: 0; }
  .empty-state { color: var(--muted); text-align: center; padding: 30px 10px; font-size: 0.9rem; }

  /* ---- Settings view ---- */
  #view-settings { padding: 16px 16px calc(16px + var(--nav-h) + env(safe-area-inset-bottom)); overflow-y: auto; }
  h2.section-title { font-size: 1rem; margin: 18px 0 10px; }
  h2.section-title:first-child { margin-top: 0; }
  .theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .theme-opt {
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    text-align: center;
    background: var(--card);
  }
  .theme-opt.selected { border-color: var(--accent); }
  .theme-swatch {
    height: 46px;
    border-radius: 8px;
    margin-bottom: 6px;
    border: 1px solid var(--border);
  }
  .theme-opt .label { font-size: 0.76rem; }
  .swatch-light { background: linear-gradient(135deg,#fff7f2,#ffe3da); }
  .swatch-dark { background: linear-gradient(135deg,#171512,#2a2621); }
  .swatch-rose { background: linear-gradient(135deg,#fff5f7,#ffd9e3); }
  .swatch-sage { background: linear-gradient(135deg,#f4f7f0,#e3ecdc); }
  .swatch-sky { background: linear-gradient(135deg,#eef8fb,#d6f0f7); }
  .swatch-lavender { background: linear-gradient(135deg,#f6f3fb,#e8dcf7); }
  .swatch-mocha { background: linear-gradient(135deg,#f8f2ec,#ecd9c4); }
  .swatch-clean { background: linear-gradient(135deg,#fbfbfb,#ececec); }
  .swatch-blue { background: linear-gradient(135deg,#eef5ff,#dbe9ff); }
  .swatch-green { background: linear-gradient(135deg,#f1faf3,#dff5e4); }

  /* ---- Bottom nav ----
     Καρφωμένη ("position: fixed") κάτω-κάτω στην πραγματική οθόνη, όπως
     κάνουν το Instagram και σχεδόν όλες οι εφαρμογές με κάτω μπάρα — δεν
     εξαρτάται καθόλου από το πόσο ακριβές είναι το υπολογισμένο ύψος του
     #app (που σε κάποια iOS/webview συνδυασμό μπορεί ακόμα να μην είναι
     100% σωστό)· κάθεται πάντα στην πραγματική κάτω άκρη επειδή έτσι
     δουλεύει το ίδιο το "fixed". Το main#views παίρνει αντίστοιχο padding
     από κάτω ώστε το περιεχόμενο να μην κρύβεται πίσω από τη μπάρα.
     Πιο ελαφριά/σύγχρονη εμφάνιση: λεπτά γραμμικά SVG εικονίδια αντί για
     emoji, λεπτή διαχωριστική γραμμή + απαλή σκιά αντί για βαριά μπάρα, και
     στρογγυλεμένο ορθογώνιο (όχι ολόκληρο "χάπι") μόνο γύρω από την ενεργή
     επιλογή. Η ίδια η μπάρα παραμένει κολλημένη στην κάτω άκρη — δεν
     επιπλέει ποτέ.
     ΣΗΜΑΝΤΙΚΟ (bottom safe area / Home Indicator): σε iPhone με Home
     Indicator, η ίδια η μπάρα πρέπει να επεκτείνεται ΜΕΣΑ στο κάτω safe
     area, όχι μόνο να ακουμπάει "bottom: 0". Γι' αυτό το padding-bottom
     εδώ προσθέτει env(safe-area-inset-bottom) πάνω από το κανονικό 4px:
     το φόντο/η σκιά καλύπτουν έτσι ολόκληρο το κενό μέχρι την πραγματική
     κάτω άκρη (καμία λευκή/άβαφη λωρίδα κάτω από τη μπάρα), ενώ τα ίδια
     τα εικονίδια/κείμενα (μέσα στο κανονικό ύψος των κουμπιών) κάθονται
     πάνω από αυτό το padding — δηλαδή πιο κάτω απ' ό,τι όταν δεν υπήρχε
     καθόλου χώρος για το safe area, αλλά πάντα καθαρά πάνω από τη ζώνη
     χειρονομίας του Home Indicator. Το --nav-h (χρησιμοποιείται για το
     padding-bottom των views) υπολογίζει το ύψος ΜΟΝΟ του γραμμικού
     περιεχομένου· γι' αυτό παντού προστίθεται ξεχωριστά το
     env(safe-area-inset-bottom), ώστε να ταιριάζει ακριβώς με το
     πραγματικό συνολικό ύψος της μπάρας μετά από αυτή την αλλαγή.
     ΕΝΗΜΕΡΩΣΗ: το κάτω padding-base μεγάλωσε από 4px σε 8px (πάντα ΠΑΝΩ
     από το env(safe-area-inset-bottom), όχι αντί γι' αυτό) ώστε να μένει
     ένα γενναιόδωρο περιθώριο ασφαλείας — έτσι το φόντο της μπάρας
     καλύπτει σίγουρα ολόκληρο το κάτω άκρο ακόμα κι αν κάποια παλιότερη
     iOS συσκευή αναφέρει λίγο μικρότερο safe-area-inset-bottom από το
     πραγματικό. Το min-height του κουμπιού μεγάλωσε από 42px σε 48px
     (χωρίς να αλλάξει το padding/gap μέσα στο κουμπί) ώστε να υπάρχει
     πάντα άνετος κάθετος χώρος για κάθε ετικέτα, όσο μεγάλη κι αν
     φαίνεται λόγω ρυθμίσεων μεγέθους γραμματοσειράς της συσκευής. */
  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--nav-bg);
    background: color-mix(in srgb, var(--nav-bg) 78%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    backdrop-filter: blur(18px) saturate(1.35);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(30, 20, 10, 0.08);
    display: flex;
    gap: 1px;
    padding: 4px 4px calc(8px + env(safe-area-inset-bottom));
  }
  @media (display-mode: standalone) {
    .bottom-nav {
      bottom: -32px;
    }
  }
  .bottom-nav button {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    border: none;
    background: transparent;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 1px;
    border-radius: 12px;
    transition: background-color 160ms ease, color 160ms ease;
  }
  .bottom-nav button .ico {
    display: flex;
    line-height: 0;
  }
  .bottom-nav button .ico svg {
    width: 19px;
    height: 19px;
    stroke-width: 1.8;
    transition: stroke-width 160ms ease;
  }
  .bottom-nav button .label {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 0.56rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
  .bottom-nav button[data-view="plan"] .label {
    font-size: 0.45rem;
    letter-spacing: -0.035em;
  }
  .bottom-nav button.active {
    color: var(--accent);
    background: var(--accent-soft);
  }
  .bottom-nav button.active .label { font-weight: 700; }
  .bottom-nav button.active .ico svg { stroke-width: 2.2; }

  /* ---- Modal ---- */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 100;
    animation: modalFadeIn 180ms ease;
  }
  @keyframes modalFadeIn { from { background: rgba(0,0,0,0); } to { background: rgba(0,0,0,0.45); } }
  @keyframes modalSlideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .modal-sheet {
    background: var(--card);
    color: var(--text);
    width: 100%;
    max-width: 560px;
    border-radius: 18px 18px 0 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    max-height: 85vh;
    overflow-y: auto;
    animation: modalSlideUp 220ms ease;
  }
  .modal-sheet h3 { margin: 0 0 12px; font-size: 1.05rem; }

  /* ---- Κοινόχρηστη λίστα σουπερμάρκετ: ολόκληρη σελίδα, όχι μικρό παράθυρο ---- */
  .shared-shop-page {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .shared-shop-page .ssp-header {
    position: sticky;
    top: 0;
    background: var(--bg);
    padding: calc(14px + env(safe-area-inset-top)) 18px 12px;
    border-bottom: 1px solid var(--border);
    z-index: 1;
  }
  .shared-shop-page .ssp-header h3 { margin: 0 0 4px; font-size: 1.15rem; }
  .shared-shop-page .ssp-body { padding: 4px 18px calc(24px + env(safe-area-inset-bottom)); flex: 1; }
  .field { margin-bottom: 12px; }
  .field label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; }
  .field input, .field textarea, .field select {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
  }
  .field textarea { min-height: 60px; resize: vertical; }
  .ing-rows { display: flex; flex-direction: column; gap: 6px; }
  .ing-row { display: flex; gap: 6px; align-items: center; }
  .ing-row .ing-name { flex: 1; min-width: 0; }
  .ing-row input {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-family: inherit;
  }
  .ing-row .ing-del {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--danger);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 4px 6px;
  }
  .ing-add-btn {
    margin-top: 8px;
    width: 100%;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--accent);
    padding: 8px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
  }
  .modal-actions { display: flex; gap: 10px; margin-top: 6px; }
  /* Ο οδηγός πρώτης εκκίνησης παίρνει ΟΛΗ την οθόνη (συμπαγές φόντο, όχι
     ημι-διάφανο μαύρο πάνω από την εφαρμογή) ώστε να μη φαίνεται καθόλου η
     αρχική οθόνη από πίσω και το ύψος να είναι ίδιο και στα 3 βήματα —
     πριν μπερδεύονταν επειδή φαινόταν "κομμάτι" από την εφαρμογή πίσω. */
  .onb-screen {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg);
    display: flex;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
  }
  /* margin:auto (όχι align-items:center στο .onb-screen πιο πάνω) για το
     κάθετο κεντράρισμα: το align-items:center "κόβει" και κάνει μη
     προσβάσιμο με scroll το πάνω μέρος του περιεχομένου σε WebKit όταν
     αυτό δεν χωράει στην οθόνη (ακριβώς το πρόβλημα σε μικρά τηλέφωνα).
     Το margin:auto δεν έχει αυτό το πρόβλημα — απλά μηδενίζεται όταν δεν
     υπάρχει χώρος, και το περιεχόμενο μπορεί να το δεις όλο κάνοντας scroll. */
  .onb-card {
    margin: auto 0;
    width: 100%;
    max-width: 420px;
    background: var(--card);
    color: var(--text);
    border-radius: 20px;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  }
  .onb-card h3 { margin: 0 0 12px; font-size: 1.05rem; }
  /* Ωραιότερο φόντο + περιστρεφόμενος δακτύλιος με το όνομα γύρω από το
     λογότυπο, μόνο στην τελευταία οθόνη του οδηγού ("Έτοιμοι!"). */
  .onb-screen.onb-welcome {
    background: radial-gradient(circle at 50% 15%, var(--accent-soft) 0%, var(--bg) 60%);
  }
  .onb-hero { position: relative; width: 168px; height: 168px; margin: 2px auto 16px; display: flex; align-items: center; justify-content: center; }
  .onb-hero-glow {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-soft) 0%, transparent 72%);
    animation: onbPulse 2.6s ease-in-out infinite;
  }
  @keyframes onbPulse { 0%, 100% { transform: scale(0.92); opacity: 0.7; } 50% { transform: scale(1.08); opacity: 1; } }
  .onb-ring { position: absolute; inset: 0; animation: onbSpin 18s linear infinite; }
  @keyframes onbSpin { to { transform: rotate(360deg); } }
  .onb-hero-logo { position: relative; width: 62px; height: 62px; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.14); }
  .onb-bullets { list-style: none; margin: 0 0 4px; padding: 0; }
  .onb-bullets li { position: relative; padding-left: 20px; margin: 11px 0; font-size: 0.88rem; line-height: 1.42; color: var(--text); }
  .onb-bullets li::before { content: "●"; position: absolute; left: 1px; top: 6px; color: var(--accent); font-size: 0.55rem; }
  .onb-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
  .onb-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
  .onb-dots span.on { background: var(--accent); }
  .onb-option {
    display: block;
    width: 100%;
    text-align: left;
    border: 1.5px solid var(--border);
    background: var(--card-alt);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .onb-option.selected { border-color: var(--accent); background: var(--accent-soft); }
  .onb-option .onb-opt-title { font-weight: 700; font-size: 0.92rem; margin-bottom: 3px; }
  .onb-option .onb-opt-desc { font-size: 0.78rem; color: var(--muted); }
  .day-pick-list { display: flex; flex-direction: column; gap: 8px; }
  .day-pick-list button {
    text-align: left;
    border: 1px solid var(--border);
    background: var(--card-alt);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
  }
  .toast {
    position: fixed;
    bottom: calc(90px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg);
    padding: 9px 16px;
    border-radius: 20px;
    font-size: 0.82rem;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
    white-space: nowrap;
  }
  .toast.show { opacity: 0.95; }
  .pull-refresh-indicator {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 8px);
    left: 50%;
    transform: translate(-50%, -58px);
    z-index: 270;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 28px);
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    box-shadow: 0 8px 24px rgba(0,0,0,0.16);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: transform 150ms ease, opacity 150ms ease, color 150ms ease;
  }
  .pull-refresh-indicator[hidden] { display: none; }
  .pull-refresh-indicator.visible {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  .pull-refresh-indicator.ready { color: var(--accent); }
  .pull-refresh-icon { display: inline-block; font-size: 1rem; }
  .pull-refresh-indicator.refreshing .pull-refresh-icon {
    animation: pullRefreshSpin 700ms linear infinite;
  }
  @keyframes pullRefreshSpin { to { transform: rotate(360deg); } }
  .app-update-banner {
    position: fixed;
    left: 50%;
    bottom: calc(70px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(calc(100% - 24px), 536px);
    z-index: 260;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
    border-radius: 15px;
    background: var(--card);
    color: var(--text);
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    animation: appUpdateArrive 180ms ease-out;
  }
  .app-update-banner[hidden] { display: none; }
  .app-update-icon { font-size: 1.25rem; }
  .app-update-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .app-update-copy strong { font-size: 0.84rem; }
  .app-update-copy span { color: var(--muted); font-size: 0.72rem; line-height: 1.3; }
  .app-update-action { padding: 8px 10px; font-size: 0.75rem; white-space: nowrap; }
  @keyframes appUpdateArrive {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }
  @media (max-width: 390px) {
    .app-update-banner { grid-template-columns: auto minmax(0, 1fr); }
    .app-update-action { grid-column: 2; justify-self: start; }
  }
  /* Το ημερολόγιο (μηνιαία προβολή) και ο χαιρετισμός στην Αρχική κρατούν το παλιό, μικρότερο μέγεθος γραμμάτων */
  .month-header button.nav-arrow { font-size: 1.111rem; }
  .month-label { font-size: 0.926rem; }
  .link-btn { font-size: 0.759rem; }
  select#monthJump { font-size: 0.759rem; }
  .weekday-header span { font-size: 0.648rem; }
  .cal-cell .daynum { font-size: 0.741rem; }
  .cal-cell .dots .more { font-size: 0.509rem; }
  .home-greeting { font-size: 1.019rem; }
  .home-date { font-size: 0.759rem; }
  .home-subtitle { font-size: 0.741rem; }

  /* ---- App-wide polish pass ----
     Shared refinements only: no layout, content or feature behavior changes. */
  button, input, select, textarea { font-family: inherit; }
  button { cursor: pointer; }
  button:disabled { cursor: default; }
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [role="button"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 72%, white);
    outline-offset: 2px;
  }

  .topbar {
    box-shadow: 0 1px 12px rgba(45, 28, 18, 0.035);
  }
  .topbar h1 img { height: 22px; }

  .home-card,
  .calendar-card,
  .day-agenda,
  .stat-box,
  ul#shoppingList li {
    border-color: color-mix(in srgb, var(--border) 88%, var(--text));
    box-shadow: 0 7px 22px rgba(58, 38, 24, 0.065);
  }
  .home-card,
  .calendar-card,
  .day-agenda { border-radius: 18px; }

  .home-action-hero,
  .home-action-card {
    min-height: 88px;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
    box-shadow: 0 7px 18px rgba(72, 42, 28, 0.055);
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
  }
  .home-action-hero:active,
  .home-action-card:active {
    transform: scale(0.975);
    box-shadow: 0 3px 10px rgba(72, 42, 28, 0.05);
  }

  .home-week-switch {
    width: fit-content;
    min-width: 208px;
    margin: 0 auto 10px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-alt);
  }
  .home-week-switch button {
    width: 32px;
    height: 32px;
    background: var(--card);
    box-shadow: 0 2px 7px rgba(55, 35, 22, 0.08);
    transition: transform 130ms ease, opacity 130ms ease;
  }
  .home-week-switch button:not(:disabled):active { transform: scale(0.9); }
  .home-week-switch span { font-size: 0.74rem; }

  .month-header button.nav-arrow,
  .link-btn,
  .cal-cell,
  .theme-opt,
  .food-chip,
  .pantry-result-row {
    transition: transform 140ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  }
  .month-header button.nav-arrow:active,
  .link-btn:active,
  .cal-cell:active,
  .theme-opt:active,
  .pantry-result-row:active { transform: scale(0.96); }
  .cal-cell.selected { box-shadow: inset 0 0 0 1px var(--accent); }
  .slot-drop { background: color-mix(in srgb, var(--card) 86%, var(--bg)); }

  .food-chip {
    box-shadow: 0 2px 7px rgba(55, 35, 22, 0.045);
  }
  .food-chip:active { transform: scale(0.98); }

  .btn {
    min-height: 44px;
    border-radius: 14px;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 20%, transparent);
    transition: transform 130ms ease, filter 160ms ease, box-shadow 160ms ease;
  }
  .btn.secondary { box-shadow: 0 3px 10px rgba(55, 35, 22, 0.045); }
  .btn:not(:disabled):active { transform: scale(0.975); filter: brightness(0.97); }

  .field input,
  .field textarea,
  .field select,
  .add-item-row input,
  .tray-search input,
  select#monthJump {
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
  }
  .field input:focus,
  .field textarea:focus,
  .field select:focus,
  .add-item-row input:focus,
  .tray-search input:focus,
  select#monthJump:focus {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
  }

  h2.section-title {
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: -0.01em;
  }
  .stat-box { border-radius: 16px; padding: 15px 12px; }
  .stat-box .num { line-height: 1.05; }
  ul#shoppingList li { border-radius: 15px; }
  ul#shoppingList li .del {
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
  }
  ul#shoppingList li .del:active { background: color-mix(in srgb, var(--danger) 10%, transparent); }

  .theme-opt { border-radius: 16px; }
  .theme-opt.selected {
    background: color-mix(in srgb, var(--accent-soft) 45%, var(--card));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
  }

  .bottom-nav button { transition: transform 140ms ease, background-color 160ms ease, color 160ms ease; }
  .bottom-nav button:active { transform: scale(0.96); }
  .bottom-nav button:focus { outline: none; }
  .bottom-nav button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: -2px;
  }
  .bottom-nav button.active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .bottom-nav button .label { font-size: 0.59rem; }
  .bottom-nav button[data-view="plan"] .label { font-size: 0.48rem; }

  .modal-backdrop {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  .modal-sheet {
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 45px rgba(25, 18, 14, 0.2);
    padding-top: 14px;
  }
  .modal-sheet::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 35%, transparent);
  }
  .modal-sheet h3 { font-size: 1.1rem; letter-spacing: -0.01em; }
  .day-pick-list { gap: 10px; }
  .day-pick-list button {
    position: relative;
    min-height: 50px;
    padding: 12px 42px 12px 14px;
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 4px 13px rgba(55, 35, 22, 0.055);
    font-weight: 650;
    transition: transform 130ms ease, border-color 160ms ease, background-color 160ms ease;
  }
  .day-pick-list button::after {
    content: "›";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-52%);
    color: var(--accent);
    font-size: 1.25rem;
  }
  .day-pick-list button:active {
    transform: scale(0.985);
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  }

  .toast {
    max-width: calc(100% - 28px);
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  }

  @media (hover: hover) and (pointer: fine) {
    .home-action-hero:hover,
    .home-action-card:hover,
    .btn:hover,
    .day-pick-list button:hover,
    .theme-opt:hover { filter: brightness(0.985); }
    .day-pick-list button:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
  }

  @media (prefers-reduced-motion: reduce) {
    button,
    .home-card-tap,
    .food-chip,
    .cal-cell,
    .theme-opt,
    .modal-backdrop,
    .modal-sheet { transition: none !important; animation: none !important; }
  }
/* Group meal reactions: native buttons, no dynamic HTML. */
.food-reactions { display: flex; flex: 1 1 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding-top: 7px; border-top: 1px solid var(--border); }
.food-reactions[hidden] { display: none; }
.food-reaction { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: .95rem; min-height: 40px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); color: var(--text); cursor: pointer; }
.food-reaction[data-has-reactions="true"] { font-weight: 700; }
.food-reaction[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.food-reaction:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.food-reaction:disabled { opacity: .55; cursor: wait; }
.reaction-caption { order: -1; flex-basis: 100%; color: var(--muted); font-size: .68rem; font-weight: 600; }
.reaction-hint { flex-basis: 100%; color: var(--muted); font-size: .66rem; white-space: normal; overflow-wrap: anywhere; }
.reaction-summary { border: 0; padding: 0; margin-top: 5px; align-items: center; gap: 4px; }
.reaction-summary .reaction-caption { flex-basis: auto; margin-right: 3px; }
.reaction-summary .food-reaction { min-height: 26px; padding: 2px 7px; font-size: .76rem; cursor: inherit; }