/* Diario Alimentare — stili dell'applicazione (sopra Bootstrap 5).
   Grafica "Nocturne" (Claude Design), in due versioni: scura e chiara.
   La versione la sceglie l'utente (js/theme.js), che imposta
   data-bs-theme="dark" o "light" su <html>. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/vendor/inter/inter-latin-ext-wght-normal.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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/vendor/inter/inter-latin-wght-normal.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;
}

/* — Colori — */

/* Versione chiara: stessa tinta viola del design, su un fondo chiaro. */
:root, [data-bs-theme="light"] {
  --da-bg: #f4f4f9;
  --da-bg-glow: #e3e1f4;
  --da-surface: #ffffff;
  --da-field: #f7f7fb;
  --da-text: #1d1f2b;
  --da-label: #3f424d;        /* etichette dei campi */
  --da-muted: #595d6c;        /* testi secondari */
  --da-subtle: #75798c;       /* note, "facoltativo" */
  --da-border: #dcdde6;
  --da-border-strong: #b2b6ca;
  --da-accent: #6a5cc0;
  --da-accent-strong: #5d5294;
  --da-accent-text: #5d5294;  /* numeri delle sezioni, link */
  --da-chip-on-bg: #efedfd;
  --da-chip-on-text: #423a6a;
  --da-chip-off-bg: #f7f7fb;
  --da-chip-off-border: #e4e7f5;
  --da-chip-icon: #75798c;
  --da-ok-bg: #efedfd;
  --da-ok-text: #423a6a;
  --da-ok-border: #b5abfc;
  --da-shadow: 0 0 0 1px #e4e7f5, 0 1px 3px rgba(29, 31, 43, .06);
  --da-glow: 0 0 20px -10px var(--da-accent);
  --da-picker-filter: none;
}

/* Versione scura: i colori originali di Nocturne. */
[data-bs-theme="dark"] {
  --da-bg: #161826;
  --da-bg-glow: #3f424d;
  --da-surface: #232532;
  --da-field: #161826;
  --da-text: #e9e9ed;
  --da-label: #cfd3e5;
  --da-muted: #b2b6ca;
  --da-subtle: #9397ab;
  --da-border: color-mix(in srgb, #e9e9ed 16%, transparent);
  --da-border-strong: #75798c;
  --da-accent: #9184d9;
  --da-accent-strong: #b5abfc;
  --da-accent-text: #d2cefd;
  --da-chip-on-bg: #2b2741;
  --da-chip-on-text: #f5f4ff;
  --da-chip-off-bg: #161826;
  --da-chip-off-border: #3f424d;
  --da-chip-icon: #b2b6ca;
  --da-ok-bg: #2b2741;
  --da-ok-text: #f5f4ff;
  --da-ok-border: #5d5294;
  --da-shadow: 0 0 0 1px #3f424d;
  --da-glow: 0 0 20px -8px var(--da-accent);
  --da-picker-filter: invert(.85);
}

/* Bootstrap prende i colori da qui, così tutte le pagine seguono il tema. */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-bg: var(--da-bg);
  --bs-body-color: var(--da-text);
  --bs-emphasis-color: var(--da-text);
  --bs-secondary-color: var(--da-muted);
  --bs-tertiary-bg: var(--da-surface);
  --bs-border-color: var(--da-border);
  --bs-link-color: var(--da-accent-text);
  --bs-link-hover-color: var(--da-accent);
  --bs-link-color-rgb: 93, 82, 148;
  --bs-link-hover-color-rgb: 106, 92, 192;
  --bs-focus-ring-color: color-mix(in srgb, var(--da-accent) 35%, transparent);
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 14px;
}
[data-bs-theme="dark"] {
  --bs-link-color-rgb: 210, 206, 253;
  --bs-link-hover-color-rgb: 145, 132, 217;
}

body {
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: 'cv11';
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 500; letter-spacing: -.01em; }
.bg-body { background-color: var(--da-bg) !important; }
.card, .bg-body-tertiary { background-color: var(--da-surface) !important; }
.card { border: 0; box-shadow: var(--da-shadow); border-radius: 14px; }
.form-control, .form-select {
  background-color: var(--da-field);
  border-color: var(--da-border);
  color: var(--da-text);
  caret-color: var(--da-accent);
}
.form-control:hover, .form-select:hover { border-color: var(--da-border-strong); }
.form-control:focus, .form-select:focus {
  background-color: var(--da-field);
  border-color: var(--da-accent);
  color: var(--da-text);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--da-accent) 25%, transparent);
}
.form-control::placeholder { color: var(--da-subtle); }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator { filter: var(--da-picker-filter); opacity: .6; cursor: pointer; }
::selection { background: color-mix(in srgb, var(--da-accent) 30%, transparent); }

.text-brand { color: var(--da-accent-text) !important; }

/* Pulsante principale: contorno e testo viola, con un leggero alone. */
.btn-brand {
  --bs-btn-color: var(--da-accent-text);
  --bs-btn-bg: color-mix(in srgb, var(--da-accent) 10%, transparent);
  --bs-btn-border-color: var(--da-accent);
  --bs-btn-hover-color: var(--da-accent-text);
  --bs-btn-hover-bg: color-mix(in srgb, var(--da-accent) 18%, transparent);
  --bs-btn-hover-border-color: var(--da-accent);
  --bs-btn-active-color: var(--da-accent-text);
  --bs-btn-active-bg: color-mix(in srgb, var(--da-accent) 26%, transparent);
  --bs-btn-active-border-color: var(--da-accent);
  --bs-btn-disabled-color: var(--da-accent-text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--da-accent);
  --bs-btn-focus-shadow-rgb: 145, 132, 217;
  box-shadow: 0 0 28px -10px var(--da-accent);
  font-weight: 500;
}

.btn-outline-brand {
  --bs-btn-color: var(--da-accent-text);
  --bs-btn-border-color: var(--da-accent);
  --bs-btn-hover-color: var(--da-accent-text);
  --bs-btn-hover-bg: color-mix(in srgb, var(--da-accent) 12%, transparent);
  --bs-btn-hover-border-color: var(--da-accent);
  --bs-btn-active-color: var(--da-accent-text);
  --bs-btn-active-bg: color-mix(in srgb, var(--da-accent) 22%, transparent);
  --bs-btn-focus-shadow-rgb: 145, 132, 217;
}

.btn-outline-secondary {
  --bs-btn-color: var(--da-text);
  --bs-btn-border-color: var(--da-border);
  --bs-btn-hover-color: var(--da-text);
  --bs-btn-hover-bg: color-mix(in srgb, var(--da-text) 7%, transparent);
  --bs-btn-hover-border-color: var(--da-border-strong);
  --bs-btn-active-color: var(--da-text);
  --bs-btn-active-bg: color-mix(in srgb, var(--da-text) 14%, transparent);
  --bs-btn-active-border-color: var(--da-border-strong);
}

/* Focus sempre visibile (accessibilità). */
a:focus-visible, .btn:focus-visible, .chip:has(input:focus-visible), summary:focus-visible {
  outline: 2px solid var(--da-accent);
  outline-offset: 2px;
}

/* — Intestazione — */
.site-header { background: transparent; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 500; color: var(--da-text); text-decoration: none;
}
.brand:hover { color: var(--da-text); }
.brand-logo { width: 28px; height: 28px; flex: none; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--da-muted);
}
.icon-btn:hover { background: color-mix(in srgb, var(--da-accent) 10%, transparent); color: var(--da-accent-text); }
.icon-btn svg { display: block; }
/* Il pulsante del tema mostra la luna in modalità chiara e il sole in quella scura. */
.icon-btn .theme-sun { display: none; }
[data-bs-theme="dark"] .icon-btn .theme-sun { display: block; }
[data-bs-theme="dark"] .icon-btn .theme-moon { display: none; }

/* Fondo con un leggero bagliore in alto a sinistra, come nel design. */
.app-body, .public-body {
  background: radial-gradient(90% 50% at 0% 0%, var(--da-bg-glow) 0%, var(--da-bg) 70%) no-repeat, var(--da-bg);
  background-attachment: fixed;
}

.hero { background: linear-gradient(180deg, color-mix(in srgb, var(--da-accent) 10%, transparent), transparent); }
.hero-card .meal-sample { padding: .6rem 0; border-bottom: 1px solid var(--bs-border-color); }
.hero-card .meal-sample:last-child { border-bottom: 0; }

.legal { max-width: 46rem; }

/* Area /app: barra delle sezioni sempre in basso, con icone. */
.app-body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.app-bottom-nav {
  position: fixed; inset: auto 0 0 0; z-index: 1030;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0 max(0px, calc(50% - 280px)) env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--da-bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--da-border);
}
.app-bottom-nav a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 64px; font-size: 11px; text-decoration: none; color: var(--da-subtle);
}
.app-bottom-nav a:hover { color: var(--da-text); }
.app-bottom-nav a::before {
  content: ''; position: absolute; top: -1px; width: 24px; height: 2px; border-radius: 2px; background: transparent;
}
.app-bottom-nav a[aria-current="page"] { color: var(--da-accent-text); }
.app-bottom-nav a[aria-current="page"]::before { background: var(--da-accent); box-shadow: 0 0 10px var(--da-accent); }
.app-bottom-nav a[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Chiave di recupero: grande, monospazio, facile da ricopiare. */
.recovery-key {
  font-family: var(--bs-font-monospace);
  font-size: 1.15rem;
  letter-spacing: .05em;
  word-spacing: .3em;
  line-height: 1.8;
  user-select: all;
}

/* Diario: elenco dei pasti del giorno. */
.diary-date { max-width: 11rem; }
.meal-context > div { display: flex; gap: .5rem; }
.meal-context dt { font-weight: 600; min-width: 7.5rem; color: var(--bs-secondary-color); }
.meal-context dd { margin: 0; }
.meal-notes { white-space: pre-line; }

/* — Modulo "Registra un pasto" — */
.page-narrow { max-width: 820px; margin: 0 auto; }
.page-title { font-size: 28px; font-weight: 500; letter-spacing: -.01em; margin: 0; }
.page-lead { font-size: 14px; color: var(--da-muted); margin: 6px 0 0; }

.panel {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px; border-radius: 14px;
  background: var(--da-surface); box-shadow: var(--da-shadow);
}
.panel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.panel-num { font-size: 12px; color: var(--da-accent-text); font-variant-numeric: tabular-nums; }
.panel-title { margin: 0; font-size: 17px; font-weight: 500; }
.panel-hint { margin-left: auto; font-size: 12px; color: var(--da-subtle); }
.panel-note { margin: 0; font-size: 12px; color: var(--da-subtle); }

.field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.field-label { font-size: 13px; color: var(--da-label); }
.field-label small { font-size: inherit; color: var(--da-subtle); }
.field .form-control, .field .form-select { min-height: 44px; font-size: 15px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

/* Scelte a pulsante (tipo di pasto, umore): sono radio nascosti. */
.chips { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.chips-meal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chips-mood { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (min-width: 640px) { .chips-meal { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.chip {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 2px; border-radius: 8px; cursor: pointer;
  font-size: 13px; text-align: center; line-height: 1.2;
  border: 1px solid var(--da-chip-off-border);
  background: var(--da-chip-off-bg); color: var(--da-label);
  transition: background .15s, border-color .15s;
}
.chips-mood .chip { font-size: 12px; padding: 8px 2px; }
.chip:hover { border-color: var(--da-accent-strong); }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.chip svg { color: var(--da-chip-icon); }
.chip:has(input:checked) {
  background: var(--da-chip-on-bg); color: var(--da-chip-on-text);
  border-color: var(--da-accent); box-shadow: var(--da-glow);
}
.chip:has(input:checked) svg { color: var(--da-accent); }

/* Righe degli alimenti. */
.food-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.food-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.food-name { flex: 1 1 260px; min-width: 0; }
.food-amount { display: flex; gap: 8px; align-items: flex-end; flex: 1 1 240px; }
.food-qty { flex: 1 1 90px; min-width: 0; }
.food-unit { flex: 1.3 1 120px; min-width: 0; }
.food-remove { width: 44px; height: 44px; flex: none; }
.add-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; border-radius: 8px;
  border: 1px dashed var(--da-border-strong); background: transparent;
  color: var(--da-accent-text); font-size: 14px;
}
.add-row:hover { border-color: var(--da-accent); background: color-mix(in srgb, var(--da-accent) 8%, transparent); }

.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.form-actions .btn { min-height: 48px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.form-actions .btn-brand { flex: 1 1 240px; }
.form-actions .btn-outline-secondary { flex: 0 1 140px; }
.secure-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--da-subtle); }

/* Avvisi informativi e di conferma nei colori del tema. */
.alert-info, .alert-success {
  --bs-alert-bg: var(--da-ok-bg);
  --bs-alert-color: var(--da-ok-text);
  --bs-alert-border-color: var(--da-ok-border);
  --bs-alert-link-color: var(--da-ok-text);
}

/* — Diario e home — */
.btn-big { min-height: 52px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.day-nav { flex-direction: row; align-items: center; gap: 8px; padding: 10px; }
.day-title { font-size: 20px; }
.meal-card { list-style: none; }
.meal-time { font-size: 14px; color: var(--da-subtle); font-variant-numeric: tabular-nums; }
.meal-card ul { color: var(--da-text); }
.btn-outline-danger { --bs-btn-color: #e5484d; --bs-btn-border-color: color-mix(in srgb, #e5484d 60%, transparent); }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #ff8589; }
.link-danger { color: #d93f45 !important; }
[data-bs-theme="dark"] .link-danger { color: #ff8589 !important; }

/* Pagine pubbliche e di accesso: schede come i pannelli dell'app. */
.public-body .card, .app-body .card { background: var(--da-surface) !important; }
.public-body .btn-lg { min-height: 48px; }
main .row > [class*="col"] > form:not([data-forget-key]) {
  padding: 20px; border-radius: 14px;
  background: var(--da-surface); box-shadow: var(--da-shadow);
}

/* — Diario del giorno — */
.min-w-0 { min-width: 0; }
.day-head { display: flex; align-items: flex-end; gap: 8px; }
.day-kicker { display: block; font-size: 13px; color: var(--da-accent-text); margin-bottom: 4px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week-day {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0;
  border-radius: 8px; border: 1px solid transparent; text-decoration: none;
  background: var(--da-surface); color: var(--da-label); box-shadow: var(--da-shadow);
}
.week-day:hover { border-color: var(--da-accent-strong); color: var(--da-text); }
.week-day.is-today { color: var(--da-accent-text); }
.week-day[aria-current="date"] { background: var(--da-chip-on-bg); color: var(--da-chip-on-text); border-color: var(--da-accent); box-shadow: var(--da-glow); }
.week-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.week-num { font-size: 17px; font-variant-numeric: tabular-nums; }
.week-dot { width: 4px; height: 4px; border-radius: 50%; }
.week-day.has-meals .week-dot { background: var(--da-subtle); }
.week-day.has-meals[aria-current="date"] .week-dot { background: var(--da-accent); }

.empty-day { display: flex; flex-direction: column; gap: 6px; padding: 22px 16px; border-radius: 8px; border: 1px dashed var(--da-border-strong); }
.timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tl-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 12px; }
.tl-time { font-size: 13px; color: var(--da-label); font-variant-numeric: tabular-nums; min-height: 1em; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--da-accent); box-shadow: 0 0 10px -2px var(--da-accent); flex: none; }
.tl-line { flex: 1; width: 1px; background: linear-gradient(var(--da-border-strong), transparent); }
.tl-card {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
  padding: 10px 10px 12px 16px; border-radius: 14px; background: var(--da-surface); box-shadow: var(--da-shadow);
}
.icon-btn-sm { width: 36px; height: 36px; }
.tl-foods { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tl-foods li { display: flex; align-items: baseline; gap: 8px; font-size: 15px; }
.tl-foods li > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tl-qty { font-size: 13px; color: var(--da-muted); white-space: nowrap; }
.tl-notes { margin: 0; font-size: 13px; color: var(--da-muted); white-space: pre-line; overflow-wrap: anywhere; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 6px; max-width: 100%; }
.tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag svg { flex: none; }
.tag-accent { background: var(--da-chip-on-bg); color: var(--da-chip-on-text); border: 1px solid color-mix(in srgb, var(--da-accent) 35%, transparent); }
.tag-neutral { background: color-mix(in srgb, var(--da-text) 8%, transparent); color: var(--da-label); }

/* Pulsante "Aggiungi pasto" sempre a portata di pollice. */
.fab-bar {
  position: fixed; z-index: 1031;
  right: max(16px, calc(50% - 410px + 16px)); bottom: calc(84px + env(safe-area-inset-bottom));
  display: flex; gap: 8px;
}
.fab {
  min-height: 52px; padding: 0 18px; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--da-bg) !important;
  box-shadow: 0 0 28px -6px var(--da-accent), 0 6px 18px rgba(0,0,0,.25);
}

/* — Oggi (home) — */
.today-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.today-item {
  display: flex; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--da-field); border: 1px solid var(--da-chip-off-border); color: var(--da-text); text-decoration: none;
}
.today-item:hover { border-color: var(--da-accent-strong); color: var(--da-text); }
.today-time { flex: none; width: 3.2em; font-size: 13px; color: var(--da-accent-text); font-variant-numeric: tabular-nums; }
.today-body { display: flex; flex-direction: column; min-width: 0; }
.today-type { font-weight: 500; }
.today-foods { font-size: 13px; color: var(--da-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* — La mia dieta: elenco dei piani — */
.plan-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.plan-card .panel-note { margin-top: 4px; }
.plan-today { margin: 0; font-size: 14px; color: var(--da-label); }
.planned-item { align-items: center; }
.planned-item .btn, .planned-item .tag { flex: none; }
.planned-item .tag { text-decoration: none; }

/* — Piano: modulo — */
.chips-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips-2 .chip { padding: 10px 6px; }
.chips-2 .chip small { font-size: 11px; color: var(--da-subtle); }
.chips-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.chips-days .chip { padding: 8px 0 6px; gap: 4px; }
.chips-days .week-dot { display: block; }
.chips-days .chip.has-meals .week-dot { background: var(--da-subtle); }
.chips-days .chip.has-meals:has(input:checked) .week-dot { background: var(--da-accent); }
.plan-meals { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.plan-meal {
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border-radius: 10px; border: 1px solid var(--da-chip-off-border); background: var(--da-chip-off-bg);
}
.plan-meal-head { display: flex; align-items: flex-end; gap: 8px; }
.plan-meal-type { flex: 1 1 160px; min-width: 0; }
.plan-meal-time { flex: 0 1 140px; min-width: 120px; }
.plan-dishes { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.plan-dish { display: flex; flex-direction: column; gap: 8px; }
.plan-dish + .plan-dish { padding-top: 12px; border-top: 1px dashed var(--da-chip-off-border); }
.plan-ingr { display: flex; flex-direction: column; gap: 6px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--da-accent) 35%, transparent); }
.plan-ingr-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ingr-row { align-items: center; gap: 6px; }
.ingr-row .form-control, .ingr-row .form-select { min-height: 38px; font-size: 14px; }
.ingr-row .food-name { flex: 1 1 200px; }
.ingr-row .food-amount { align-items: center; gap: 6px; flex: 1 1 220px; }

/* — Lista della spesa — */
.shop-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.shop-item { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--da-chip-off-border); }
.shop-item:last-child { border-bottom: 0; }
.shop-check { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; min-height: 36px; padding: 6px 0; cursor: pointer; }
.shop-check .form-check-input { flex: none; width: 1.25em; height: 1.25em; margin: 0; align-self: center; }
.shop-name { min-width: 0; overflow-wrap: anywhere; }
#presi .shop-name { text-decoration: line-through; color: var(--da-muted); }
.shop-edit form { gap: 6px; }
.shop-edit .form-control, .shop-edit .form-select { min-height: 38px; font-size: 14px; }
.shop-check .form-check-input:checked { background-color: var(--da-accent); border-color: var(--da-accent); }
.day-kicker a { color: inherit; text-decoration: none; }
.day-kicker a:hover { text-decoration: underline; }
.today-note { font-size: 12px; color: var(--da-subtle); white-space: pre-line; overflow-wrap: anywhere; }
.planned-dishes { display: flex; flex-direction: column; gap: 2px; }
.planned-dish { font-size: 13px; color: var(--da-muted); overflow-wrap: anywhere; }
.planned-ingr { font-size: 12px; color: var(--da-subtle); padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--da-accent) 35%, transparent); overflow-wrap: anywhere; }

/* — Peso — */
.chips-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chip small { display: block; font-size: 11px; color: var(--da-subtle); }
.chips-4 .chip { padding: 9px 2px; }
.chart-box { position: relative; height: 260px; }
@media (min-width: 640px) { .chart-box { height: 320px; } }
.weight-date { flex: none; width: 6.5em; font-size: 13px; color: var(--da-accent-text); font-variant-numeric: tabular-nums; }
.form-switch .form-check-input:checked { background-color: var(--da-accent); border-color: var(--da-accent); }
.bmi-fascia { font-size: 13px; font-weight: 600; color: var(--da-accent); }
.bmi-gauge { display: block; width: 100%; max-width: 340px; margin: 0 auto; }
.bmi-gauge.d-none { display: none; }
.bmi-band { stroke: none; }
.bmi-sottopeso { fill: #2fa4dc; }
.bmi-normopeso { fill: #3fb35f; }
.bmi-sovrappeso { fill: #e6cf3a; }
.bmi-obesita { fill: #f0932f; }
.bmi-obesita-grave { fill: #e0443e; }
.bmi-tick { font-size: 8px; fill: var(--da-muted); font-family: inherit; }
.bmi-needle { fill: var(--da-text, currentColor); }
.bmi-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12px; color: var(--da-muted); }
.bmi-legend li { display: inline-flex; align-items: center; gap: 6px; }
.bmi-dot { width: 10px; height: 10px; border-radius: 50%; }
.bmi-sottopeso-bg { background: #2fa4dc; }
.bmi-normopeso-bg { background: #3fb35f; }
.bmi-sovrappeso-bg { background: #e6cf3a; }
.bmi-obesita-bg { background: #f0932f; }
.bmi-obesita-grave-bg { background: #e0443e; }
.export-option { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.export-option + .export-option { padding-top: 14px; border-top: 1px solid var(--da-chip-off-border); }
.panel-danger { border-color: rgba(224, 68, 62, .55); }
.icon-btn[aria-current="page"] { color: var(--da-accent); }

/* Report del diario (/app/diario/report): leggibile a schermo, pulito in stampa. */
.report { background: var(--da-surface); border: 1px solid var(--da-chip-off-border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.report-head { border-bottom: 2px solid var(--da-accent); padding-bottom: 10px; }
.report-title { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.report-summary { font-size: 13px; color: var(--da-muted); margin-top: 4px !important; }
.report-day { break-inside: avoid; page-break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--da-chip-off-border); }
.report-date { font-size: 15px; font-weight: 600; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.report-weight { font-size: 13px; font-weight: 500; color: var(--da-muted); }
.report-empty { font-size: 13px; color: var(--da-subtle); }
.report-meals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.report-meal { display: flex; gap: 10px; font-size: 14px; break-inside: avoid; }
.report-time { flex: 0 0 44px; color: var(--da-muted); font-variant-numeric: tabular-nums; }
.report-body { min-width: 0; }
.report-extra { font-size: 13px; color: var(--da-muted); }
.report-foot { font-size: 12px; color: var(--da-subtle); }

@media print {
  @page { margin: 14mm; }
  :root, :root[data-bs-theme] { color-scheme: light; }
  body, .app-body { background: #fff !important; color: #000 !important; padding: 0 !important; }
  .site-header, .app-bottom-nav, .no-print, .fab-bar, .visually-hidden-focusable { display: none !important; }
  main.container { max-width: none; padding: 0 !important; }
  .page-narrow { max-width: none; }
  .report { border: 0; padding: 0; background: #fff; color: #000; }
  .report-head { border-color: #000; }
  .report-summary, .report-weight, .report-time, .report-extra, .report-empty, .report-foot { color: #333; }
  .report-day { border-color: #bbb; }
}
@media (max-width: 400px) {
  .fab-bar .fab { padding: 0 12px; font-size: 14px; gap: 6px; }
}
.report-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 576px) { .report-periods { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Pagina "Installa l'app" */
.install-url { font-size: 1.35rem; font-weight: 600; }
.install-steps { padding-left: 1.25rem; }
.install-steps li { margin-bottom: .5rem; }
.install-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; vertical-align: middle;
  background: var(--da-chip-on-bg); color: var(--da-chip-on-text);
}

/* Home: privacy in primo piano */
.privacy-kicker {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: var(--da-chip-on-bg); color: var(--da-chip-on-text); font-size: 14px; font-weight: 600;
}
.cipher-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--da-muted); }
.cipher-arrow {
  display: flex; align-items: center; gap: 8px; margin: .75rem 0; padding: .5rem .75rem; border-radius: 8px;
  background: var(--da-chip-on-bg); color: var(--da-chip-on-text); font-size: 14px;
}
.cipher-text { display: block; margin-top: .35rem; word-break: break-all; color: var(--da-muted); font-size: 13px; }
.privacy-steps { padding-left: 1.25rem; }
.privacy-steps li { margin-bottom: .5rem; }
.privacy-box { padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--da-border); background: var(--da-surface); }
.privacy-box-no { border-color: var(--da-accent); }
.privacy-box ul { padding-left: 1.1rem; }