:root{
    --radius:24px;
    --bg:#f5f2e9;
    --bg-rgb:245,242,233;
    --card:#faf8f2;
    --card-rgb:250,248,242;
    --ink:#17140f;
    --ink-dim:#6f6a5e;
    --line:#d9d2c0;
    --shadow:rgba(23,20,15,.08);

    --accent:#1d877c;
    --accent-rgb:29, 135, 124;
    --accent-ink:#ffffff;
    --accent-soft:#e3f3f1;
    --tag-bg:#ededed;
    --cook-note-bg:#ffffce;
    --warning:#b86221;
    --danger:#ff0000;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#15130f;
      --bg-rgb:21,19,15;
      --card:#1e1c17;
      --card-rgb:30,28,23;
      --ink:#f3efe6;
      --ink-dim:#a39a89;
      --line:#332f27;
      --shadow:rgba(0,0,0,.28);
      --accent:#1d877c;
      --accent-rgb:29, 135, 124;
      --accent-ink:#ffffff;
      --accent-soft:#173330;
      --tag-bg:#333333;
      --cook-note-bg:#3a3418;
    }
    :root:not([data-theme="light"]) .meal-label-row{
      background:var(--line);
      border-color:var(--line);
    }
    :root:not([data-theme="light"]) .meal-completed .meal-label-row{
      background:var(--line);
      border-color:var(--line);
    }
    :root:not([data-theme="light"]) .meal-off .meal-label-row{
      background:var(--line);
      border-color:var(--line);
    }
    :root:not([data-theme="light"]) .meal-completed .food-list{
      border-color:var(--line);
    }
    :root:not([data-theme="light"]) .day-card{
      background:#000;
    }
    :root:not([data-theme="light"]) .meal-kcal-tag,
    :root:not([data-theme="light"]) .plate-kcal-tag{
      background:#000;
    }
    :root:not([data-theme="light"]) .day-rating-badge{
      box-shadow:0 0 0 4px #000;
      color:#000;
    }
    :root:not([data-theme="light"]) .kcal-tooltip-bubble{
      background:rgba(var(--accent-rgb), 1);
    }
    :root:not([data-theme="light"]) .kcal-tooltip-bubble::after{
      border-top-color:rgba(var(--accent-rgb), .9);
    }
    :root:not([data-theme="light"]) .kcal-tooltip-bubble.tooltip-flip-bottom::after{
      border-bottom-color:rgba(var(--accent-rgb), .9);
    }
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]) .day-rating-badge{
      box-shadow:0 0 0 4px #fff;
      color:#fff;
    }
    :root:not([data-theme="dark"]) .day-card{
      background:#fff;
    }
    :root:not([data-theme="dark"]) .meal-kcal-tag,
    :root:not([data-theme="dark"]) .plate-kcal-tag{
      background:#fff;
    }
  }
  :root[data-theme="dark"]{
    --bg:#15130f;
    --bg-rgb:21,19,15;
    --card:#1e1c17;
    --card-rgb:30,28,23;
    --ink:#f3efe6;
    --ink-dim:#a39a89;
    --line:#332f27;
    --shadow:rgba(0,0,0,.28);
    --accent:#1d877c;
    --accent-rgb:29, 135, 124;
    --accent-ink:#ffffff;
    --accent-soft:#173330;
    --tag-bg:#333333;
    --cook-note-bg:#3a3418;
  }
  :root[data-theme="dark"] .meal-label-row{
    background:rgba(var(--accent-rgb), .2);
    border-color:rgba(var(--accent-rgb), .2);
  }
  :root[data-theme="dark"] .meal-completed .meal-label-row{
    background:#15130f;
    border-color:#15130f;
  }
  :root[data-theme="dark"] .meal-off .meal-label-row{
    background:var(--bg);
    border-color:var(--bg);
  }
  :root[data-theme="dark"] .meal-completed .food-list{
    border-color:#15130f;
  }
  :root[data-theme="dark"] .day-card{
    background:#000;
  }
  :root[data-theme="dark"] .meal-kcal-tag,
  :root[data-theme="dark"] .plate-kcal-tag{
    background:#000;
  }
  :root[data-theme="light"] .meal-kcal-tag,
  :root[data-theme="light"] .plate-kcal-tag{
    background:#fff;
  }
  :root[data-theme="dark"] .day-rating-badge{
    box-shadow:0 0 0 4px #000;
    color:#000;
  }
  :root[data-theme="dark"] .kcal-tooltip-bubble{
    background:rgba(var(--accent-rgb), .9);
  }
  :root[data-theme="dark"] .kcal-tooltip-bubble::after{
    border-top-color:rgba(var(--accent-rgb), .9);
  }
  :root[data-theme="dark"] .kcal-tooltip-bubble.tooltip-flip-bottom::after{
    border-bottom-color:rgba(var(--accent-rgb), .9);
  }

  /* meal-label-row / food-list: proprietà condivise da entrambi i temi */
  .meal-label-row{
    padding:1rem;
    border-top-left-radius:var(--radius);
    border-top-right-radius:var(--radius);
    margin-top:2rem;
    border:1px solid rgba(var(--accent-rgb), .2);
    background:rgba(var(--accent-rgb), .2);
  }
  /* pasto completato, tema chiaro: label-row mimetizzata sullo sfondo pagina */
  .meal-completed .meal-label-row{
    background:var(--bg);
    border-color:var(--bg);
  }
  /* pasto saltato/libero, tema chiaro: label-row mimetizzata sullo sfondo pagina */
  .meal-off .meal-label-row{
    background:var(--bg);
    border-color:var(--bg);
  }
  .meal-completed .food-list{
    border-color:var(--bg);
  }
  .food-list{
    padding:.5rem !important;
    border-bottom-left-radius:var(--radius);
    border-bottom-right-radius:var(--radius);
    border:1px solid rgba(var(--accent-rgb), .2);
    border-top:0;
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  /* ATTENZIONE: in passato overflow-x:hidden qui disattivava lo scroll touch su iOS
     Safari (test dal vivo su iPhone reale). Da quando i dropdown restavano larghi 280px
     fissi fuori viewport è stata trovata e risolta la causa reale dell'overflow orizzontale
     (vedi fix sul posizionamento dei .more-dropdown), quindi overflow-x:hidden qui dovrebbe
     essere sicuro. Se lo scroll touch smette di funzionare su iPhone reale, rimuovere questa
     proprietà e tornare a cercare l'elemento che sfonda invece di riattivarla qui. */
  html,body{margin:0; padding:0; overflow-x:hidden;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    padding-bottom:60px;
    transition:background-color .2s ease, color .2s ease;
  }

  /* top bar */
  /* reset completo Bootstrap per header.nav-bar — previene sovrapposizioni stili */
  header.nav-bar,
  header.nav-bar *,
  header.nav-bar *::before,
  header.nav-bar *::after{
    box-sizing:border-box;
  }
  header.nav-bar{
    flex-wrap:nowrap;
    flex-direction:row;
    padding-top:0;
    padding-bottom:0;
    margin:0;
    top:auto;
    right:auto;
  }
  .nav-bar{
    position:fixed !important;
    bottom:2% !important;
    left:9% !important;
    right:9% !important;
    width:82% !important;
    top:auto !important;
    transform:none !important;
    z-index:60;
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:.5rem;
    padding:8px 16px calc(8px + env(safe-area-inset-bottom));
    background:rgba(var(--accent-rgb), .2);
    border:1px solid rgba(var(--accent-rgb), .2);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    max-width:100%;
    border-radius:360px;
    height:66px;
  }
  .nav-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    white-space:nowrap;
    width:48px;
    height:48px;
    border:none;
    background:transparent;
    color:var(--ink-dim);
    border-radius:999px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:color .15s ease, background .15s ease;
    flex:1 1 0;
  }
  .nav-btn:hover, .nav-btn:focus{
    color:var(--accent);
    background:rgba(var(--accent-rgb), .08);
    outline:none;
  }
  .nav-btn[aria-pressed="true"], .nav-btn.active{
    color:var(--accent);
  }
  .nav-btn .material-symbols-rounded{
    font-size:1.5rem;
  }
  /* .btn-default nella nav-bar usa gli stessi stili di .nav-btn */
  .nav-bar .btn-default{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border:none;
    background:transparent;
    color:var(--ink-dim);
    border-radius:999px;
    flex:1 1 0;
  }
  .nav-more-menu{
    flex:1 1 0;
    display:flex;
    justify-content:center;
  }
  /* lo sfondo sfocato vive su uno pseudo-elemento separato, non sulla topbar stessa:
     backdrop-filter applicato direttamente a un elemento position:sticky è un bug noto
     di WebKit/Safari che può disattivare del tutto il comportamento sticky su iOS */
  .nav-bar::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
  }
  .dashboard-topbar-title-group{
    display:flex;
    flex-direction:column;
    gap:1px;
  }
  .dashboard-topbar-subtitle{
    font-size:.875rem;
    font-weight:400;
    letter-spacing:.03em;
    color:var(--ink-dim);
    text-transform:uppercase;
  }
  .dashboard-topbar-title{
    margin:0;
    font-size:1.375rem;
    font-weight:400;
    color:var(--accent);
  }
  .color-swatch-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
  }
  .color-swatch{
    aspect-ratio:1;
    width:100%;
    border-radius:var(--radius);
    border:none;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 0 0 1px var(--shadow) inset;
    transition:transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .color-swatch:active{ transform:scale(.92); }
  .color-swatch.active{
    box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--ink);
  }
  .color-swatch-check{
    color:#fff;
    font-size:1.375rem;
    opacity:0;
    transform:scale(.5);
    transition:opacity .12s ease, transform .12s ease;
  }
  .color-swatch.active .color-swatch-check{
    opacity:1;
    transform:scale(1);
  }
  .modal-close .material-symbols-rounded{
    font-size:1.125rem;
  }
  .calendar-input{
    display:block;
    width:calc(100% - 24px);
    box-sizing:border-box;
    margin:0 12px 10px;
    font-family:inherit;
    font-size:.875rem;
    color:var(--ink);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:10px;
    padding:8px 10px;
  }
  .calendar-input:last-child{ margin-bottom:6px; }
  #waterLitersInput{
    font-size:1rem;
  }
  .calendar-input-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 12px 10px;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:10px;
    padding:0 10px;
  }
  .calendar-input-wrap:last-child{ margin-bottom:6px; }
  .calendar-input-wrap .material-symbols-rounded{
    flex:0 0 auto;
    font-size:1.125rem;
    color:var(--ink-dim);
  }
  .calendar-input-wrap .calendar-input{
    flex:1 1 auto;
    min-width:0;
    width:auto;
    margin:0;
    background:transparent;
    border:none;
    padding:9px 0;
  }
  .calendar-section-label{
    margin-top:20px;
  }
  /* modale indicazioni generali */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    z-index:1000;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  .modal-overlay.open{ opacity:1; pointer-events:auto; }
  .modal-card{
    background:var(--card);
    width:100%;
    max-width:640px;
    max-height:calc(88vh - 32px);
    max-height:calc(88dvh - 32px);
    border-radius:24px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transform:translateY(24px);
    transition:transform .2s ease;
  }
  .modal-overlay.open .modal-card{ transform:translateY(0); }
  @media (min-width: 1024px){
    #waterModal .modal-card{ max-width:450px; }
  }
  /* modale feedback: forza sempre il tema chiaro, così lo stile del Google Form incorporato non va in conflitto col dark mode */
  #feedbackModal{
    --bg:#f5f2e9;
    --bg-rgb:245,242,233;
    --card:#faf8f2;
    --card-rgb:250,248,242;
    --ink:#17140f;
    --ink-dim:#6f6a5e;
    --line:#d9d2c0;
    --shadow:rgba(23,20,15,.08);
    --accent:#1d877c;
    --accent-rgb:29, 135, 124;
    --accent-ink:#ffffff;
    --accent-soft:#e3f3f1;
    --tag-bg:#ededed;
    --cook-note-bg:#ffffce;
    --warning:#b86221;
  }
  /* la modale feedback non deve scrollare da sola: a scorrere è solo il form incorporato, altrimenti si crea un doppio scroll fastidioso.
     l'altezza tiene conto del padding di .modal-overlay (16px sopra/lati + safe-area sotto), altrimenti su mobile la modale
     sfora lo schermo e la parte con lo scroll diventa irraggiungibile */
  #feedbackModal .modal-card{
    height:calc(90vh - 32px - env(safe-area-inset-bottom));
    max-height:calc(90vh - 32px - env(safe-area-inset-bottom));
  }
  #feedbackModal .modal-body{
    display:flex;
    padding:0;
  }
  #feedbackModal .modal-head h2{
    color:var(--accent);
  }
  .feedback-form-frame{
    display:block;
    width:100%;
    flex:1 1 auto;
    max-height:none;
    border:none;
  }
  @media (min-width:640px){
    .modal-overlay{ align-items:center; }
    .modal-card{ max-height:80vh; }
  }
  .modal-head{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:22px 22px 14px;
    border-bottom:1px solid var(--line);
    background:var(--card);
  }
  .modal-head-actions{
    display:flex;
    align-items:center;
    gap:4px;
    flex:0 0 auto;
  }
  .modal-body{
    flex:1 1 auto;
    min-height:0;
    overflow-y:scroll;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    overscroll-behavior:contain;
    padding:14px 22px 22px;
  }
  .modal-head h2{
    font-size:1.25rem;
    font-weight:400;
    margin:0;
  }
  .modal-close{
    width:32px; height:32px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--bg);
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex:0 0 auto;
  }
  .modal-close svg{ width:15px; height:15px; }
  /* il pulsante "condividi" nell'header di una modale deve avere le stesse dimensioni del
     pulsante di chiusura accanto, non quelle generiche di .btn-default/.share-icon-btn
     (altrimenti su mobile risulta visibilmente più grande, essendo .btn-default 44px) */
  .modal-head-actions .share-icon-btn{
    width:32px; height:32px;
  }
  .modal-head-actions .share-icon-btn svg{ width:15px; height:15px; }
  .modal-section-title{
    font-weight:700;
    font-size:.75rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--accent);
    margin:22px 0 10px;
  }
  .modal-section-title:first-of-type{ margin-top:0; }
  .modal-section-title-regular{ font-weight:400; }
  .cook-note{
    font-size:.875rem;
    line-height:1.5;
    color:var(--ink-dim);
    background:var(--cook-note-bg);
    border-radius:24px;
    padding:1rem;
    margin:0 0 14px;
  }
  .cook-group{ margin-bottom:14px; }
  .cook-group:last-child{ margin-bottom:0; }
  .cook-group .food-name{
    font-weight:400;
    font-size:1rem;
    margin:0 0 4px;
  }
  .cook-group .food-name em{ font-style:italic; font-weight:400; color:var(--ink-dim); }
  .cook-group ul{
    margin:0;
    padding-left:18px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .cook-group li{
    font-size:.875rem;
    line-height:1.5;
    color:var(--ink);
  }
  .advice-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .advice-list li{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:.875rem;
    line-height:1.5;
    color:var(--ink);
  }
  .advice-list li::before{
    content:"";
    width:6px; height:6px;
    margin-top:7px;
    border-radius:50%;
    background:var(--accent);
    flex:0 0 auto;
  }
  .modal-footer{
    padding:1rem;
    border-top:1px solid var(--line);
  }
  .btn-ghost-full{
    display:block;
    width:100%;
    background:var(--accent);
    border:1px solid var(--accent);
    border-color:var(--accent);
    color:var(--accent-ink);
    border-radius:260px;
    font-family:inherit;
    font-weight:400;
    font-size:1rem;
    padding:13px 16px;
    cursor:pointer;
    text-align:center;
    -webkit-tap-highlight-color:transparent;
  }
  .modal-footer-split{
    display:flex;
    gap:10px;
  }
  .modal-footer-split .btn-ghost-full,
  .modal-footer-split .btn-ghost-muted{
    flex:1 1 0;
    width:auto;
    font-size:.875rem;
    text-transform:uppercase;
    font-weight:500;
    letter-spacing:.0625rem;
  }
  .modal-footer-stack{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  #shareReadonlyConfirmBtn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  #shareReadonlyConfirmBtn .material-symbols-rounded{
    font-size:1.125rem;
  }
  .btn-ghost-muted{
    display:block;
    background:#222;
    border:1px solid #222;
    color:#fff;
    border-radius:260px;
    font-family:inherit;
    font-weight:400;
    font-size:1rem;
    padding:13px 16px;
    cursor:pointer;
    text-align:center;
    -webkit-tap-highlight-color:transparent;
  }
  #mealNoteDeleteBtn{
    color:#ff0000;
  }
  .modal-footer p{
    margin:0 0 3px;
    font-size:.875rem;
    color:var(--ink-dim);
    line-height:1.5;
  }
  .modal-footer .author{
    font-weight:700;
    color:var(--ink);
  }

  /* hero */
  .hero{
    max-width:760px;
    margin:6px auto 20px;
    padding:0 20px;
    text-align:center;
  }
  .hero .eyebrow{
    font-weight:700;
    font-size:.875rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin:0 0 6px;
  }
  .hero .quote{
    font-family:'Playfair Display', Georgia, serif;
    font-style:italic;
    font-size:1.25rem;
    line-height:1.4;
    color:var(--ink);
    margin:0;
  }

  main{
    max-width:940px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  /* generic card */
  .card{
    background:var(--card);
    border-radius:20px;
    padding:18px 18px 20px;
    box-shadow:0 1px 3px var(--shadow);
  }
  .card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:14px;
  }
  .card-head h2{
    font-size:1.25rem;
    font-weight:400;
    margin:0;
    letter-spacing:.01em;
  }

  /* select "opzione colazione" per singolo giorno */
  .meal-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .meal-label-row .meal-label{ margin-bottom:0; }
  .meal-label-row .meal-label-select{ margin-bottom:0; }
  .meal-heading{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
  .meal-heading .meal-label{ margin:0; }
  .meal-heading .meal-label-select{ margin:0; }
  .meal-heading .meal-help{ margin:0; }
  .meal-heading .meal-kcal-tag{
    margin:.25rem 0 0 0;
    border:none;
    padding:4px 11px;
    white-space:normal;
    text-align:center;
  }
  .meal-label-actions{
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
  }
  .share-icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--ink);
    padding:0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .12s ease, border-color .12s ease;
  }
  .share-icon-btn:hover{ border-color:var(--accent); }
  .share-icon-btn svg{ width:16px; height:16px; }
  .share-icon-btn .material-symbols-rounded{ font-size:1rem; }

  /* pulsante valutazione giorno (hotel_class) + badge numerico */
  .day-rating-btn{
    position:relative;
  }
  .day-rating-btn .material-symbols-rounded,
  .meal-rating-btn .material-symbols-rounded{
    font-size:1rem;
    font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' -25, 'opsz' 48;
  }
  .day-rating-btn.rated .material-symbols-rounded,
  .meal-rating-btn.rated .material-symbols-rounded{
    color:var(--accent);
    font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' -25, 'opsz' 48;
  }
  .day-water-btn{
    position:relative;
  }
  .day-water-btn .material-symbols-rounded{
    font-size:1rem;
    font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' -25, 'opsz' 48;
  }
  .day-water-btn.rated .material-symbols-rounded{
    color:var(--accent);
    font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' -25, 'opsz' 48;
  }
  .day-cheat-btn .material-symbols-rounded{
    font-size:1rem;
    font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' -25, 'opsz' 48;
  }
  .day-cheat-btn.rated .material-symbols-rounded{
    color:var(--accent);
    font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' -25, 'opsz' 48;
  }
  .meal-rating-btn{
    position:relative;
  }
  #openFeedbackBtn .material-symbols-rounded{
    font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' -25, 'opsz' 48;
  }
  .day-rating-badge{
    position:absolute;
    top:-8px;
    right:-8px;
    min-width:18px;
    height:auto;
    padding:3px 6px;
    border-radius:999px;
    background:var(--accent);
    color:var(--ink);
    font-weight:normal;
    line-height:18px;
    text-align:center;
    box-shadow:0 0 0 4px #fff;
    text-transform:uppercase;
    animation:badgePopIn .25s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes badgePopIn{
    0%{ transform:scale(.5); opacity:0; }
    100%{ transform:scale(1); opacity:1; }
  }

  /* giorno libero: contenuto disabilitato e sfumato, badge e pulsante info */
  .day-card.day-off .meal-block{
    opacity:.4;
    pointer-events:none;
    filter:saturate(.65);
    transition:opacity .2s ease;
  }
  /* pasto libero: sfuma solo la lista alimenti di quel pasto, non l'header con le sue azioni */
  .meal-block.meal-off .food-list{
    opacity:.4;
    pointer-events:none;
    filter:saturate(.65);
    transition:opacity .2s ease;
  }
  .meal-off .kcal-tag{
    display:none;
  }
  .dayoff-badge{
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    font-size:.75rem;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#d97706;
    animation:badgePopIn .25s cubic-bezier(.34,1.56,.64,1);
  }
  .dayoff-badge.skipped-meal{
    color:var(--warning);
  }
  .dayoff-badge .material-symbols-rounded{
    font-size:1rem;
  }
  .btn-default.dayoff-info-btn{
    background:var(--card);
    border-color:var(--line);
    color:var(--ink);
  }
  .dayoff-info-btn .material-symbols-rounded{
    font-size:1.25rem;
    color:var(--accent);
  }

  /* modale tracciamento pasto: fame/umore prima e dopo, note durante */
  .meal-rating-emoji{
    font-size:1rem;
    line-height:1;
  }
  .tracking-section{
    margin-bottom:22px;
    background:var(--bg);
    padding:1rem;
    border-radius:var(--radius);
  }
  .tracking-section:last-child{ margin-bottom:0; }
  #dayTrackingSections{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    touch-action:pan-y;
  }
  #dayTrackingSections > *{
    width:100%;
  }
  #dayTrackingSections .tracking-section{ margin-bottom:0; }
  .tracking-section-title{
    font-size:1rem;
    font-weight:400;
    color:var(--accent);
    margin:0 0 12px;
  }
  .tracking-question{
    font-size:.875rem;
    font-weight:400;
    color:var(--ink);
    margin:0 0 8px;
  }
  .tracking-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:18px;
  }
  .tracking-chip{
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:20px;
    padding:8px 16px;
    color:var(--ink);
    font-family:inherit;
    font-weight:400;
    font-size:.875rem;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .tracking-chip:hover,
  .tracking-chip.active{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--accent-ink);
  }
  .tracking-mood-row{
    display:flex;
    gap:8px;
    justify-content:space-between;
  }
  .tracking-mood-btn{
    flex:1 1 0;
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:0;
    font-size:2rem;
    cursor:pointer;
    touch-action:pan-y;
    -webkit-tap-highlight-color:transparent;
  }
  .tracking-mood-btn:hover,
  .tracking-mood-btn.active{
    background:var(--accent-soft);
    border-color:var(--accent);
  }
  .tracking-textarea{
    width:100%;
    min-height:100px;
    resize:vertical;
    font-family:inherit;
    font-size:1rem;
    line-height:1.4;
    border-radius:16px;
    border:1px solid rgba(var(--accent-rgb), .35);
  }
  .tracking-meals-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
  }
  .tracking-meals-list li{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px 4px;
    border-bottom:1px solid var(--line);
    font-size:.875rem;
    color:var(--ink);
  }
  .tracking-meals-list li:last-child{ border-bottom:none; }
  .tracking-meal-name{
    font-weight:400;
  }
  .tracking-meal-phases{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .tracking-meal-phase{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
  }
  .tracking-meal-phase-label{
    color:var(--ink-dim);
    font-size:.75rem;
    white-space:nowrap;
    flex:0 0 auto;
    padding-top:2px;
  }
  .tracking-meals-values{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
    flex:1 1 auto;
    min-width:0;
  }
  .tracking-meals-value{
    font-size:1.125rem;
    line-height:1;
  }
  .tracking-meals-tag{
    font-size:.6875rem;
    line-height:1;
    letter-spacing:.04em;
    text-transform:uppercase;
    background:var(--tag-bg);
    color:var(--ink);
    border-radius:999px;
    padding:4px 8px;
  }

  .rating-favorite-section{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--line);
  }
  .rating-favorite-title{
    font-size:.875rem;
    font-weight:400;
    color:var(--ink-dim);
    margin:0 0 10px;
  }
  .rating-favorite-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .rating-favorite-list button{
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:999px;
    padding:9px 14px;
    color:var(--ink);
    font-family:inherit;
    font-weight:400;
    font-size:.875rem;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .rating-favorite-list button.active{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--accent-ink);
  }
  .cheat-note-label{
    margin-top:54px;
  }
  .cheat-note-input{
    min-height:84px;
    resize:vertical;
    font-family:inherit;
    font-size:1rem;
    line-height:1.4;
  }

  /* ---------- nota del pasto (testo + foto/allegato opzionale) ---------- */
  .meal-note-input{
    min-height:110px;
    resize:vertical;
    font-family:inherit;
    font-size:1rem;
    line-height:1.4;
    margin-bottom:14px;
  }
  .meal-note-attach-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    background:var(--bg);
    border:1px dashed var(--line);
    color:var(--ink);
    border-radius:var(--radius);
    padding:12px;
    font-family:inherit;
    font-size:.875rem;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .meal-note-attach-btn:active{ transform:scale(.98); }
  .meal-note-attachment-preview{
    position:relative;
    display:inline-flex;
    margin-bottom:14px;
  }
  .meal-note-attachment-preview img{
    display:block;
    max-width:100%;
    max-height:220px;
    border-radius:var(--radius);
    border:1px solid var(--line);
  }
  .meal-note-attachment-preview .meal-note-attachment-file{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:10px 14px;
    font-size:.875rem;
    color:var(--ink);
  }
  .meal-note-attachment-remove{
    position:absolute;
    top:-8px;
    right:-8px;
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--card);
    border:1px solid var(--line);
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
    -webkit-tap-highlight-color:transparent;
  }
  .meal-note-attachment-remove .material-symbols-rounded{ font-size:1rem; }

  /* ---------- ricetta testuale / video (dropdown del pasto) ---------- */
  .meal-recipe-text{
    white-space:pre-line;
    line-height:1.5;
    font-size:.9375rem;
    color:var(--ink);
    margin:0;
  }
  .modal-card-video{ max-width:720px; }
  .modal-body-video{ padding:0; }
  .video-embed-wrap{
    position:relative;
    width:100%;
    padding-top:56.25%; /* rapporto 16:9 */
    background:#000;
  }
  .video-embed-wrap iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
  }

  .breakfast-day-select{
    font-family:inherit;
    font-weight:400;
    font-size:.875rem;
    color:var(--ink);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:999px;
    padding:6px 26px 6px 14px;
    cursor:pointer;
    flex:0 0 auto;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6a5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat;
    background-position:right 8px center;
    background-size:14px;
  }
  .breakfast-day-select.meal-label-select{
    text-transform:uppercase;
  }
  .meal-help{
    font-size:.75rem;
    letter-spacing:.03em;
    line-height:1.5;
    color:var(--ink-dim);
    margin:0 0 10px;
  }
  /* food rows */
  .food-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .food-item{
    padding:1rem .75rem;
    background:var(--bg);
    border-radius:14px;
  }
  .food-item:last-child{ border-bottom:none; }
  .food-item.food-item-optional{
    background:transparent;
    border:2px dashed var(--line);
    position:relative;
    padding-top:2rem;
  }
  .food-item-optional-tag{
    position:absolute;
    top:-3px;
    left:15px;
    display:inline-block;
    text-transform:uppercase;
    font-size:.75rem;
    letter-spacing:1px;
    background:var(--line);
    color:var(--ink);
    padding:.35rem .75rem;
    border-bottom-left-radius:calc(var(--radius) / 3);
    border-bottom-right-radius:calc(var(--radius) / 3);
  }
  .food-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 4px;
  }
  .food-row .name-col,
  .row-subs-list li .name-col{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    flex:1 1 auto;
    min-width:0;
  }
  .food-row .name{
    font-size:.875rem;
    line-height:1.35;
    color:var(--ink);
    text-wrap:balance;
    white-space:pre-line;
    overflow-wrap:break-word;
  }
  .item-kcal{
    display:block;
    font-size:.75rem;
    color:var(--ink-dim);
    margin-bottom:2px;
  }
  .food-row .row-tags,
  .row-subs-list li .row-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:.25rem;
  }
  .food-row .row-right{
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
  }
  .row-icon-tag{
    width:25px;
    height:25px;
    flex:0 0 auto;
    color:var(--accent);
  }
  .plate-kcal-row{
    display:flex;
    align-items:center;
    gap:3px;
  }
  .row-icon-tag-wrap{
    position:relative;
    display:inline-flex;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .row-icon-tag-wrap:hover .kcal-tooltip-bubble,
  .row-icon-tag-wrap:focus .kcal-tooltip-bubble,
  .row-icon-tag-wrap:focus-within .kcal-tooltip-bubble,
  .row-icon-tag-wrap.kcal-tooltip-open .kcal-tooltip-bubble{
    opacity:.9;
    visibility:visible;
  }
  .food-row .row-right .qty{
    margin:0;
  }
  .more-dropdown-item-tag{
    margin-left:auto;
    vertical-align:1px;
  }
  .food-row .row-tag,
  .row-subs-list li .row-tag,
  .more-dropdown-item .row-tag{
    display:inline-block;
    max-width:100%;
    overflow-wrap:break-word;
    text-align:center;
    font-weight:400;
    font-size:.65rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    background:var(--tag-bg);
    color:var(--ink);
    border-radius:999px;
    padding:6px 8px;
  }
  .food-row .qty{
    flex:0 0 auto;
    font-weight:400;
    font-size:.75rem;
    background:var(--bg);
    border:1px solid var(--line);
    color:var(--ink-dim);
    border-radius:999px;
    padding:4px 11px;
    white-space:nowrap;
    margin-top:.25rem;
    min-height:28px;
    display:flex;
    align-items:center;
  }
  .meal-kcal-tag,
  .plate-kcal-tag{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    font-family:inherit;
    font-weight:400;
    font-size:.75rem;
    background:var(--bg);
    border:none;
    color:var(--ink-dim);
    border-radius:999px;
    padding:0;
    white-space:nowrap;
    margin:0 0 2px 0;
    position:relative;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .kcal-tag{
    border:none;
    padding:4px 8px;
    margin:.125rem 0 0 0;
  }
  .meal-kcal-tag.kcal-warn{
    border-color:var(--warning);
    color:var(--warning);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .kcal-ai-icon{
    font-size:1rem !important;
    width:.875rem;
    height:.875rem;
    margin-right:2px;
    margin-bottom:0;
    flex:0 0 auto;
    background-image:linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
  .kcal-tooltip-bubble{
    position:absolute;
    left:0;
    bottom:calc(100% + 9px);
    width:220px;
    max-width:70vw;
    background:rgba(0,0,0,.9);
    color:#fff;
    font-size:.8125rem;
    font-weight:400;
    line-height:1.4;
    text-align:left;
    text-transform:none;
    white-space:normal;
    padding:.75rem 1rem;
    border-radius:1rem;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .15s ease;
    z-index:60;
  }
  .row-icon-tag-wrap .kcal-tooltip-bubble{
    width:max-content;
    max-width:70vw;
    white-space:nowrap;
    text-transform:uppercase;
    letter-spacing:.0625rem;
  }
  .kcal-tooltip-bubble::after{
    content:"";
    position:absolute;
    top:100%;
    left:14px;
    border:8px solid transparent;
    border-top-color:rgba(0,0,0,.9);
  }
  /* varianti di posizionamento "intelligente": applicate via JS in base allo spazio realmente disponibile */
  .kcal-tooltip-bubble.tooltip-align-left{ left:0; right:auto; transform:none; }
  .kcal-tooltip-bubble.tooltip-align-left::after{ left:14px; right:auto; transform:none; }
  .kcal-tooltip-bubble.tooltip-align-right{ left:auto; right:0; transform:none; }
  .kcal-tooltip-bubble.tooltip-align-right::after{ left:auto; right:14px; transform:none; }
  .kcal-tooltip-bubble.tooltip-align-center{ left:50%; right:auto; transform:translateX(-50%); }
  .kcal-tooltip-bubble.tooltip-align-center::after{ left:50%; right:auto; transform:translateX(-50%); }
  .kcal-tooltip-bubble.tooltip-flip-bottom{ bottom:auto; top:calc(100% + 9px); }
  .kcal-tooltip-bubble.tooltip-flip-bottom::after{
    top:auto;
    bottom:100%;
    border-top-color:transparent;
    border-bottom-color:rgba(0,0,0,.9);
  }
  .meal-kcal-tag:hover .kcal-tooltip-bubble,
  .meal-kcal-tag:focus .kcal-tooltip-bubble,
  .meal-kcal-tag:focus-within .kcal-tooltip-bubble,
  .meal-kcal-tag.kcal-tooltip-open .kcal-tooltip-bubble,
  .plate-kcal-tag:hover .kcal-tooltip-bubble,
  .plate-kcal-tag:focus .kcal-tooltip-bubble,
  .plate-kcal-tag:focus-within .kcal-tooltip-bubble,
  .plate-kcal-tag.kcal-tooltip-open .kcal-tooltip-bubble{
    opacity:.9;
    visibility:visible;
  }
  .day-kcal-tag{
    margin-top:0;
    margin-bottom:0;
    padding:4px 11px;
    border-width:1px;
    border-style:solid;
    border-color:var(--bg);
  }
  .day-kcal-tag.kcal-warn{
    padding:3px 3px 3px 9px;
  }
  .kcal-info-btn{
    font-size:.9375rem;
    margin-left:5px;
  }
  .food-row .qty:empty{ display:none; }

  .sub-label{
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:400;
    font-size:1rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:8px;
  }

  /* week grid */
  /* menu a tendina "more_horiz" (ripristina piano/giorno) */
  .more-menu{
    position:relative;
    flex:0 0 auto;
  }
  .btn-default{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--ink);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .12s ease, border-color .12s ease, transform .12s ease;
  }
  .btn-default:active{ transform:scale(.88); }
  .btn-default .material-symbols-rounded{ font-size:1rem; }
  #openFeedbackBtn{
    width:auto;
    height:auto;
    max-height:44px;
    border-radius:999px;
    gap:8px;
    padding:8px 30px 8px 12px;
    font-family:inherit;
    font-size:.875rem;
    font-weight:400;
    white-space:nowrap;
    color:#000;
    background-image:linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
  }
  #openFeedbackBtn span:not(.material-symbols-rounded){
    display:block;
    white-space:normal;
    text-align:center;
    text-transform:uppercase;
    font-size:.75rem;
    line-height:1.15;
    max-width:52px;
  }
  @media (max-width: 1023px){
    .btn-default{ width:44px; height:44px; }
    .btn-default .material-symbols-rounded{ font-size:1.5rem; }
    .day-kcal-tag{
      white-space:normal;
      max-width:100%;
    }
  }
  .btn-default:disabled{
    opacity:.4;
    cursor:not-allowed;
    pointer-events:none;
  }
  .btn-default[aria-expanded="true"]{
    background:var(--accent-soft);
    border-color:var(--accent);
  }
  .dash-close-x .material-symbols-rounded{
    color:var(--danger);
  }
  .nav-btn.dash-close-x{
    margin-left:2rem;
  }
  #dashboardBtn[aria-pressed="true"] .material-symbols-rounded{
    color:var(--accent);
  }
  .more-dropdown{
    display:block;
    position:fixed;
    top:-9999px;
    left:-9999px;
    min-width:280px;
    max-height:calc(100vh - 120px);
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 8px 24px var(--shadow);
    padding:6px;
    z-index:1001;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-6px) scale(.96);
    transform-origin:top right;
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .nav-bar .more-dropdown{ transform-origin:top left; }
  .more-dropdown.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }
  /* apre verso l'alto quando non c'è spazio sotto */
  .more-dropdown.drop-up{
    top:auto;
    bottom:calc(100% + 6px);
    transform-origin:bottom right;
    transform:translateY(6px) scale(.96);
  }
  .more-dropdown.drop-up.open{
    transform:translateY(0) scale(1);
  }
  /* apre verso sinistra quando non c'è spazio a destra */
  .more-dropdown.drop-left{
    right:auto;
    left:0;
    transform-origin:top left;
  }
  .more-dropdown.drop-up.drop-left{
    transform-origin:bottom left;
  }
  @media (max-width: 1023px){
    .more-dropdown{
      max-height:80vh;
    }
  }
  /* i menu che partono dal lato sinistro della topbar si aprono verso destra, non verso sinistra fuori schermo */
  .nav-bar .more-dropdown{
    left:0;
    right:auto;
  }
  .more-dropdown-item{
    display:flex;
    align-items:center;
    gap:.5rem;
    width:100%;
    box-sizing:border-box;
    text-align:left;
    background:none;
    border:none;
    font-family:inherit;
    font-size:.875rem;
    color:var(--ink);
    text-decoration:none;
    padding:10px 12px;
    border-radius:var(--radius);
    cursor:pointer;
    transition:background-color .12s ease, transform .1s ease;
  }
  .more-dropdown-item .material-symbols-rounded{
    font-size:1.125rem;
    flex:0 0 auto;
  }
  .more-dropdown-item:hover{ background:var(--bg); }
  .more-dropdown-item:active{ transform:scale(.97); }
  .more-dropdown-item[data-action="reset-plan"],
  .more-dropdown-item[data-action="reset-day"]{
    color:var(--danger);
  }
  .more-dropdown-item[data-action="reset-plan"] .material-symbols-rounded,
  .more-dropdown-item[data-action="reset-day"] .material-symbols-rounded{
    color:var(--danger);
  }
  .more-dropdown-item[data-action="toggle-meal-off"],
  .more-dropdown-item[data-action="toggle-meal-off"] .material-symbols-rounded{
    color:var(--warning);
  }
  .more-dropdown-item[data-action="toggle-meal-skipped"],
  .more-dropdown-item[data-action="toggle-meal-skipped"] .material-symbols-rounded{
    color:var(--warning);
  }
  .more-dropdown-item[data-action="toggle-day-off"],
  .more-dropdown-item[data-action="toggle-day-off"] .material-symbols-rounded{
    color:var(--warning);
  }
  .more-dropdown-item[data-action="toggle-meal-completed"],
  .more-dropdown-item[data-action="toggle-meal-completed"] .material-symbols-rounded{
    color:#2e7d32;
  }
  .more-dropdown-item[data-action="toggle-meal-completed"].meal-completed-toggle-item,
  .more-dropdown-item[data-action="toggle-meal-completed"].meal-completed-toggle-item .material-symbols-rounded{
    color:var(--ink);
  }
  .more-dropdown-item:disabled{
    color:var(--ink-dim) !important;
    opacity:.5;
    cursor:not-allowed;
  }
  /* "Ripristina" (reset-plan/reset-day) resta rosso anche da disabilitato, invece di sbiadire a ink-dim come gli altri */
  .more-dropdown-item[data-action="reset-plan"]:disabled,
  .more-dropdown-item[data-action="reset-plan"]:disabled .material-symbols-rounded,
  .more-dropdown-item[data-action="reset-day"]:disabled,
  .more-dropdown-item[data-action="reset-day"]:disabled .material-symbols-rounded{
    color:var(--danger) !important;
  }
  .more-dropdown-item:disabled:hover{ background:none; }
  .more-dropdown-divider{
    height:1px;
    background:var(--line);
    margin:6px 4px;
  }
  .more-dropdown-label{
    margin:10px 12px 4px;
    font-size:.75rem;
    font-weight:400;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-dim);
  }
  .more-dropdown-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:10px 12px 4px;
  }
  .more-dropdown-label-row .more-dropdown-label{
    margin:0;
  }
  .more-dropdown-select-all-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:24px;
    height:24px;
    padding:0;
    background:none;
    border:none;
    border-radius:50%;
    color:var(--ink-dim);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .more-dropdown-select-all-btn:hover{
    background:var(--bg);
    color:var(--ink);
  }
  .more-dropdown-select-all-btn .material-symbols-rounded{
    font-size:1.125rem;
  }
  .lang-switcher{
    display:flex;
    flex-direction:column;
  }
  .lang-option{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    box-sizing:border-box;
    text-align:left;
    font-family:inherit;
    font-size:.875rem;
    font-weight:400;
    background:none;
    border:none;
    color:var(--ink);
    border-radius:var(--radius);
    padding:10px 12px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .lang-option:hover{ background:var(--bg); }
  .lang-option-flag{
    width:20px;
    height:20px;
    border-radius:4px;
    flex:0 0 auto;
    display:block;
  }
  .lang-option.active{
    background:var(--accent-soft);
    color:var(--accent);
    font-weight:400;
  }
  .lang-option .lang-option-check{
    display:none;
    margin-left:auto;
    font-size:1.125rem;
    color:var(--accent);
    font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' -25, 'opsz' 48;
  }
  .lang-option.active .lang-option-check{
    display:inline-block;
  }

  /* barra di ricerca a comparsa dal basso: stessa larghezza di .day-tabs (main max-width 760 + padding 20px + margin 4px) */
  .search-overlay{
    position:fixed;
    left:0;
    right:0;
    max-width:940px;
    margin:0 auto;
    padding:0 24px;
    box-sizing:border-box;
    bottom:calc(90px + env(safe-area-inset-bottom));
    z-index:1000;
    opacity:0;
    pointer-events:none;
    transform:translateY(140%);
  }
  .search-overlay.open{
    opacity:1;
    pointer-events:auto;
    animation:searchBounceUp .55s cubic-bezier(.22,1.12,.4,1) forwards;
  }
  @keyframes searchBounceUp{
    0%{ transform:translateY(140%); }
    70%{ transform:translateY(-4%); }
    100%{ transform:translateY(0); }
  }

  /* da desktop: barra in alto (non in basso), e il contenuto sotto scende con una transizione fluida */
  @media (min-width:768px){
    main{
      transition:margin-top .35s cubic-bezier(.22,1,.36,1);
    }
    body.search-open main{
      margin-top:84px;
    }
    .search-overlay{
      bottom:auto;
      top:calc(14px + env(safe-area-inset-top));
      transform:translateY(-140%);
    }
    .search-overlay.open{
      animation-name:searchBounceDown;
    }
  }
  @keyframes searchBounceDown{
    0%{ transform:translateY(-140%); }
    70%{ transform:translateY(4%); }
    100%{ transform:translateY(0); }
  }

  .search-bar{
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(var(--bg-rgb), .72);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--line);
    border-radius:999px;
    padding:10px 10px 10px 16px;
    box-shadow:0 8px 30px var(--shadow);
  }
  .search-icon{ color:var(--ink-dim); flex:0 0 auto; font-size:1.25rem; }
  .search-input{
    flex:1 1 auto;
    min-width:0;
    border:none;
    background:transparent;
    color:var(--ink);
    font-family:inherit;
    font-size:1rem;
    outline:none;
  }
  .search-input::-webkit-search-cancel-button{ display:none; }
  .search-close-btn{
    flex:0 0 auto;
    width:30px;
    height:30px;
    border-radius:50%;
    border:none;
    background:var(--card);
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .search-close-btn .material-symbols-rounded{ font-size:1.125rem; }

  /* risultati di ricerca */
  .search-results-count{
    font-size:.75rem;
    color:var(--ink-dim);
    margin:6px 4px 14px;
  }
  .search-empty-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin:50px 20px 120px;
  }
  .search-empty-image{
    width:220px;
    max-width:70%;
    border-radius:16px;
    margin-bottom:20px;
  }
  .search-empty-big{
    font-size:1.25rem;
    font-weight:400;
    color:var(--ink);
    margin:0;
  }
  .search-empty-back-btn{
    margin-top:20px;
    max-width:220px;
  }
  .search-results{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .search-result-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:12px 14px;
  }
  .search-result-item .name{
    font-size:.875rem;
    color:var(--ink);
  }
  .search-result-loc{
    display:block;
    font-size:.75rem;
    color:var(--accent);
    margin-top:2px;
  }
  .search-result-item .qty{
    flex:0 0 auto;
    font-weight:400;
    font-size:.875rem;
    background:var(--bg);
    border:1px solid var(--line);
    color:var(--ink);
    border-radius:999px;
    padding:4px 11px;
    white-space:nowrap;
  }

  .day-tabs{
    display:flex;
    gap:.5rem;
    justify-content:space-around;
    text-align:center;
    overflow-x:scroll;
    scrollbar-width:none;
  }
  .day-tabs::-webkit-scrollbar{ display:none; }
  .day-tabs::-webkit-scrollbar{ display:none; width:0; height:0; } /* Chrome/Safari */
  .day-tabs-inner{
    display:flex;
    align-items:center;
    gap:6px;
    padding:0;
    will-change:transform;
    transform:translateX(0);
  }
  /* frecce ‹ › ai lati della barra: nascoste di default (su desktop/tablet lo scroll
     orizzontale con mouse/trackpad sulla barra funziona bene, il problema è solo il touch
     su iOS), rese visibili e disposte in flex assieme alla nav nel media query mobile qui sotto */
  .day-tabs-arrow{
    display:none;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    width:34px;
    border:none;
    background:transparent;
    color:var(--ink);
    padding:0;
    cursor:pointer;
  }
  .day-tabs-arrow .material-symbols-rounded{ font-size:1.5rem; }
  .day-tabs-arrow:disabled{ color:var(--ink-dim); opacity:.35; cursor:default; }
  @media (max-width:767px){
    /* la barra è position:fixed (non sticky) per due motivi, entrambi bug
       noti di WebKit su iOS (Safari e Chrome, che condividono lo stesso
       motore): 1) un elemento CONTEMPORANEAMENTE position:sticky e proprio
       contenitore di scroll (overflow-x) smette di ricevere il touch per lo
       scroll; 2) l'ancoraggio in fondo di uno sticky dentro un flex column
       con min-height:100vh è fragile su iOS (la vh dinamica della barra degli
       indirizzi lascia uno spazio vuoto sotto la barra). position:fixed
       risolve entrambi.
       I due ruoli restano comunque su due elementi separati per chiarezza:
       #dayTabsBarWrap fa SOLO da barra ancorata in fondo (position:fixed,
       nessun overflow proprio), mentre #dayTabsBar (il <nav> al suo
       interno) fa SOLO da contenitore di scroll orizzontale dei pulsanti,
       in flusso normale rispetto al wrapper. Lo spazio che la barra
       "toglie" in fondo alla pagina viene compensato via JS
       (updateMainBottomPadding) impostando il padding-bottom di #main
       esattamente all'altezza del wrapper.
       CAUSA REALE (confermata con test dal vivo su iPhone reale collegato a
       Mac via Web Inspector, con reparenting via appendChild): un elemento
       fixed + proprio contenitore di scroll FUNZIONA bene su iOS quando è
       figlio diretto di <body>. Il touch-scroll però si rompe se questo
       elemento è annidato dentro certi antenati — in particolare dentro
       #main (che è display:flex; flex-direction:column). Per questo
       #dayTabsBarWrap in HTML è ora un FRATELLO di #main (subito dopo
       <main id="main"></main>), non più annidato al suo interno: il suo
       contenuto viene generato/aggiornato da renderDayTabsBar() invece che
       da render() dentro main.innerHTML. NON reinserire #dayTabsBarWrap
       dentro #main: il touch-scroll su iOS smetterebbe di funzionare. */
    /* #dayTabsBarWrap: posizionamento gestito dal contenitore .tabs-row-wrap */
    .day-tabs-arrow{
      display:none;
    }
    #dayTabsBar{
      flex:1 1 auto;
      min-width:0;
      height:auto;
      box-sizing:border-box;
      margin:0;
      overflow-x:scroll;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      touch-action:pan-x;
      padding:.5rem;
    }
    #dayTabsBar::-webkit-scrollbar{ display:none; width:0; height:0; }
    main{
      padding-left:.5rem;
      padding-right:.5rem;
      padding-top:7rem;
      padding-bottom:calc(64px + env(safe-area-inset-bottom));
      display:flex;
      flex-direction:column;
    }
  }
  .segmented{
    display:flex;
    gap:4px;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px;
    width:fit-content;
  }
  .shopping-view-tabs{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:14px;
  }
  .segmented button{
    flex:0 0 auto;
    width:auto;
    font-family:inherit;
    font-weight:400;
    font-size:.875rem;
    color:var(--ink);
    background:transparent;
    border:none;
    border-radius:999px;
    padding:7px 14px;
    cursor:pointer;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
  }
  .segmented button.active{
    background:var(--accent);
    color:var(--accent-ink);
  }
  .shopping-tab-content{
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:12px;
  }

  /* ---------- Dashboard statistiche ---------- */
  .dashboard-view{
    padding:calc(140px + env(safe-area-inset-top)) 20px 12px;
    max-width:940px;
    margin:0 auto;
  }
  @media (max-width: 1023px){
    .dashboard-view{
      width:100%;
      box-sizing:border-box;
    }
  }
  .dash-filter-tabs{
    display:flex;
    gap:4px;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px;
    width:fit-content;
    margin:0;
    position:fixed;
    left:50%;
    transform:translate3d(-50%,0,0);
    -webkit-transform:translate3d(-50%,0,0);
    bottom:calc(20px + env(safe-area-inset-bottom));
    z-index:50;
    will-change:transform;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    box-shadow:
      0 12px 24px -6px var(--shadow),
      0 30px 48px -14px var(--shadow),
      0 50px 80px -24px var(--shadow);
  }
  .dash-filter-tabs button{
    flex:0 0 auto;
    font-family:inherit;
    font-weight:400;
    font-size:.875rem;
    color:var(--ink);
    background:transparent;
    border:none;
    border-radius:999px;
    padding:7px 16px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .dash-filter-tabs button.active{
    background:var(--accent);
    color:var(--accent-ink);
  }
  .dash-stat-row{
    display:flex;
    align-items:stretch;
    gap:10px;
    margin-bottom:28px;
  }
  .dash-stat-row > .dash-water-card,
  .dash-stat-row > .dash-warning-card{
    flex:1 1 0;
    min-width:0;
    margin-bottom:0;
  }
  .dash-water-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    background:rgba(62, 168, 224, .12);
    border:1px solid rgba(62, 168, 224, .35);
    border-radius:var(--radius);
    padding:16px;
    margin-bottom:28px;
  }
  .dash-water-card .dash-card-title-row > .material-symbols-rounded{
    font-size:1.75rem;
    color:#3ea8e0;
    flex:0 0 auto;
  }
  .dash-card-title-row{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .dash-card-title-text{
    font-size:1.25rem;
    font-weight:400;
  }
  .dash-water-card .dash-card-title-text{
    color:#3ea8e0;
  }
  .dash-water-info{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .dash-stat-stack{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    margin-top:auto;
  }
  .dash-water-value{
    font-size:1.25rem;
    font-weight:400;
    color:#3ea8e0;
  }
  .dash-water-label{
    font-size:.75rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-dim);
  }
  .dash-warning-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    background:rgba(184, 98, 33, .12);
    border:1px solid var(--warning);
    border-radius:var(--radius);
    padding:16px;
    margin-bottom:28px;
  }
  .dash-warning-card .dash-card-title-row > .material-symbols-rounded{
    font-size:1.75rem;
    color:var(--warning);
    flex:0 0 auto;
  }
  .dash-warning-card .dash-card-title-text{
    color:var(--warning);
  }
  .dash-warning-value{
    font-size:1.25rem;
    font-weight:400;
    color:var(--warning);
  }
  .dash-kpi-grid{
    display:grid;
    align-items:stretch;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:28px;
  }
  .dash-kpi-grid-3{
    grid-template-columns:1fr 1fr;
    margin-bottom:16px;
  }
  .dash-kpi-card{
    display:flex;
    flex-direction:column;
    gap:4px;
    height:195px;
    width:100%;
    min-width:0;
    background:rgba(var(--accent-rgb), .07);
    border:1px solid rgba(var(--accent-rgb), .22);
    border-radius:var(--radius);
    padding:16px;
  }
  .dash-kpi-card:nth-child(2){ background:rgba(var(--accent-rgb), .12); }
  .dash-kpi-card:nth-child(3){ background:rgba(var(--accent-rgb), .17); }
  .dash-kpi-card:nth-child(4){ background:rgba(var(--accent-rgb), .22); }
  .dash-kpi-value-row{
    display:flex;
    gap:6px;
    flex-direction:column;
    align-items:flex-start;
  }
  .dash-kpi-icon{
    font-size:2.5rem !important;
    color:var(--accent);
    flex:0 0 auto;
  }
  .dash-kpi-value{
    font-size:1.75rem;
    font-weight:400;
    color:var(--accent);
  }
  .dash-kpi-value-text{
    font-size:1.125rem;
    overflow-wrap:break-word;
  }
  .dash-kpi-label{
    font-size:.875rem;
    margin-top:auto;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-dim);
  }
  .dash-section{
    margin-bottom:28px;
  }
  .dash-section-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:1.5rem;
    font-weight:400;
    margin:0 0 12px;
    padding-left:10px;
    border-left:3px solid var(--accent);
    color:var(--accent);
  }
  .dash-section-title .material-symbols-rounded{
    font-size:2rem;
    color:var(--accent);
    flex:0 0 auto;
  }
  .dash-meal-cards{
    display:flex;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-bottom:4px;
    margin:0 -20px;
    padding-left:20px;
    padding-right:20px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .dash-meal-cards::-webkit-scrollbar{
    display:none;
  }
  .dash-meal-card{
    flex:0 0 auto;
    scroll-snap-align:start;
    width:220px;
    height:280px;
    display:flex;
    flex-direction:column;
    background:rgba(var(--accent-rgb), .06);
    border:1px solid rgba(var(--accent-rgb), .2);
    border-top:3px solid var(--accent);
    border-radius:var(--radius);
    padding:16px;
  }
  .dash-meal-card-head{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    gap:6px;
    margin-bottom:14px;
  }
  .dash-meal-card-title{
    font-size:1rem;
    color:var(--ink);
  }
  .dash-feedback-emojis{
    font-size:2.5rem;
    letter-spacing:2px;
  }
  .dash-no-data{
    font-size:.875rem;
    color:var(--ink-dim);
  }
  .dash-meal-phases-title{
    display:block;
    margin-bottom:8px;
  }
  .dash-phase-label.dash-meal-phases-title{
    color:var(--ink);
    flex:0 0 auto;
    padding-top:0;
    letter-spacing:.0325rem;
    font-size:.875rem;
    white-space:break-spaces;
    text-wrap:balance;
    margin-top:auto;
    text-transform:none;
  }
  .dash-meal-phases{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .dash-meal-phase{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:.8125rem;
  }
  .dash-phase-label{
    color:var(--ink-dim);
    white-space:nowrap;
    flex:0 0 auto;
    padding-top:0;
    text-transform:uppercase;
    letter-spacing:.0525rem;
    font-size:.75rem;
  }
  .dash-phase-feedback{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    flex:1 1 auto;
    min-width:0;
  }
  .dash-phase-chip{
    white-space:nowrap;
  }
  .dash-kcal-per-meal{
    list-style:none;
    margin:0;
    padding:0;
    border-top:1px solid var(--line);
  }
  .dash-kcal-per-meal li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid var(--line);
    font-size:.875rem;
  }
  .dash-kcal-per-meal .name{ color:var(--ink); }
  .dash-kcal-per-meal .qty{ color:var(--ink-dim); }
  @media (min-width: 700px){
    .dash-kpi-grid{ grid-template-columns:repeat(4, 1fr); }
    .dash-kpi-grid-3{ grid-template-columns:repeat(2, 1fr); max-width:420px; }
  }

  .day-tabs button{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    border:1px solid rgba(var(--card-rgb), .2);
    background:rgba(var(--card-rgb), .2);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    color:var(--ink);
    font-family:inherit;
    font-weight:400;
    font-size:.875rem;
    padding:4px 8px;
    border-radius:999px;
    cursor:pointer;
    white-space:nowrap;
    text-transform:uppercase;
    letter-spacing:.0625rem;
    height:100px;
    margin:0;
    touch-action:pan-x;
    transition:background-color .2s ease, border-color .2s ease, color .2s ease, padding .2s ease;
  }
  .day-tabs button:first-child{ margin-left:0; }
  .day-tabs button:last-child{ margin-right:0; }
  /* niente transform:scale su :active qui: applicare una trasformazione mentre il dito è
     ancora sopra il pulsante può interrompere il riconoscimento del gesto di swipe/pan da
     parte di iOS Safari proprio nel mezzo del tocco (stesso motivo per cui lo scroll si
     bloccava passando sopra ai pulsanti) */
  .day-tabs button.active{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--accent-ink);
  }
  #shoppingModalBody .day-tabs button{
    background:var(--bg);
  }
  #shoppingModalBody .day-tabs button.active{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--accent-ink);
  }
  #shoppingModalBody .shopping-view-tabs{
    position:sticky;
    top:0;
    z-index:5;
    background:var(--card);
    padding-top:2px;
    box-shadow:
      0 12px 24px -6px var(--shadow),
      0 30px 48px -14px var(--shadow),
      0 50px 80px -24px var(--shadow);
    transition:margin-left .25s ease, padding .25s ease, border-radius .25s ease;
  }
  #shoppingModalBody .shopping-view-tabs.is-stuck{
    margin-left:10px;
    padding:6px;
    border-radius:360px;
  }
  #shoppingModalBody #shoppingDayTabs{
    position:sticky;
    top:50px;
    z-index:4;
    background:var(--card);
    padding:6px;
    border-radius:360px;
    /* margine che prima viveva sul nav .day-tabs stesso (2px 4px 12px, con
       margin-left:0): ora che il nav è annidato, lo spostiamo sul wrapper
       sticky così lo spazio verso il contenuto sottostante resta identico */
    margin:2px 4px 12px 0;
    box-shadow:
      0 12px 24px -6px var(--shadow),
      0 30px 48px -14px var(--shadow),
      0 50px 80px -24px var(--shadow);
    transition:margin-left .25s ease, padding .25s ease, border-radius .25s ease;
  }
  #shoppingModalBody #shoppingDayTabs.is-stuck{
    margin-left:10px;
  }
  /* stesso bug WebKit del dayTabs principale: #shoppingDayTabs è sticky, quindi lo
     scroll orizzontale deve vivere sul .day-tabs interno, non sull'elemento sticky */
  #shoppingModalBody #shoppingDayTabs .day-tabs{
    margin:0;
    padding:0;
  }
  .day-card{
    background:#fff;
    border-radius:20px;
    padding:2rem 18px 18px;
    box-shadow:0 2px 40px var(--shadow);
  }
  .day-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:1rem;
  }
  .day-name-group{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.25rem;
  }
  .day-head-actions{
    display:flex;
    align-items:center;
    gap:.5rem;
    flex:0 0 auto;
  }
  .day-head .day-name{
    font-size:1.625rem;
    font-weight:400;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
  }
  .day-name-line{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.15em;
  }
  .today-badge{
    display:inline-block;
    text-transform:uppercase;
    letter-spacing:.0625rem;
    padding:0px 6px;
    border-radius:260px;
    margin-left:.5rem;
    border:1px solid transparent;
  }
  .day-head .day-name .today-badge{
    margin-left:0; /* qui lo spazio lo garantisce già il gap del flex */
    font-size:.875rem;
    padding:0;
    background:none;
    border:none;
    color:var(--accent);
  }
  .day-tabs .today-badge{
    background:var(--accent-ink);
    border-color:var(--accent-ink);
    color:var(--accent);
    font-size:.75rem;
  }
  .day-number{
    color:var(--ink);
    font-weight:bold;
    font-size:1.25rem;
  }
  .day-label-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
  }
  .day-head .day-name .day-number{
    margin-left:0; /* qui lo spazio lo garantisce già il gap del flex */
  }
  .day-tabs button.active .day-number{
    color:var(--accent-ink);
    opacity:.85;
  }
  .day-month-line{
    color:var(--ink);
    font-weight:400;
  }
  .meal-block + .meal-block{ margin-top:22px; }
  .meal-label{
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:400;
    font-size:1rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--accent);
    margin:0 0 8px;
  }
  .meal-label-check{
    font-size:1.125rem;
    color:var(--accent);
    flex:0 0 auto;
  }
  .meal-label-select-wrap{
    display:flex;
    align-items:center;
    gap:6px;
    margin:0 0 8px;
  }
  .meal-label-select-wrap .meal-label-select{
    margin:0;
  }
  .meal-label-select{
    display:inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    font-family:inherit;
    font-weight:400;
    font-size:1rem;
    letter-spacing:.06em;
    text-transform:capitalize;
    color:var(--accent);
    background:transparent;
    border:none;
    margin:0 0 8px;
    padding:0 18px 0 0;
    cursor:pointer;
    outline:none;
    background-repeat:no-repeat;
    background-position:right center;
    background-size:14px;
  }
  .meal-label-select:focus{
    outline:none;
  }
  .meal-label-select:disabled{
    cursor:default;
    background-image:none;
    padding-right:0;
  }

  .material-symbols-rounded{
    font-family:'Material Symbols Rounded';
    font-weight:normal;
    font-style:normal;
    font-size:1.5rem;
    line-height:1;
    letter-spacing:normal;
    text-transform:none;
    display:inline-block;
    white-space:nowrap;
    word-wrap:normal;
    direction:ltr;
    -webkit-font-smoothing:antialiased;
    font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' -25, 'opsz' 48;
  }
  .swap-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:400;
    background:var(--tag-bg);
    color:var(--ink);
    border:none;
    border-radius:999px;
    padding:4px;
    cursor:pointer;
    flex:0 0 auto;
    width:28px;
    height:28px;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .12s ease, color .12s ease;
  }
  .swap-btn .material-symbols-rounded{ font-size:1.125rem; }
  .swap-btn:hover{ background:var(--accent-soft); }
  .swap-btn:active{ background:var(--accent-soft); }
  .swap-btn[aria-expanded="true"]{
    background:var(--accent);
    color:var(--accent-ink);
  }
  .meal-completed .swap-btn{ display:none; }
  .swap-wrap{
    position:relative;
    display:inline-flex;
    flex:0 0 auto;
  }
  .swap-changed-dot{
    position:absolute;
    top:-1px;
    right:-1px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 2px var(--card);
    pointer-events:none;
  }
  /* badge "nota presente" sul pulsante "..." del pasto (more-menu): stessa idea dello
     swap-changed-dot ma più grande, per restare leggibile sopra l'icona more_horiz */
  .meal-note-dot{
    position:absolute;
    top:-5px;
    right:-5px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 2px var(--card);
    pointer-events:none;
  }
  .row-subs-panel{
    display:none;
    background:var(--bg);
    border-radius:20px;
    padding:14px 0 16px;
    margin:0;
    box-shadow:0 1px 3px var(--shadow);
    margin:8px 4px .75rem;
  }
  .row-subs-panel.open{ display:block; }
  .row-subs-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:0 0 6px;
  }
  .row-subs-title{
    font-weight:400;
    font-size:.75rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-dim);
    margin:0;
  }
  .row-subs-reset-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:none;
    border:none;
    padding:2px;
    margin:0;
    color:var(--danger);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    position:relative;
  }
  .row-subs-reset-btn .material-symbols-rounded{
    font-size:1.125rem;
  }
  .row-subs-reset-btn:hover{ color:var(--danger); }
  .row-subs-reset-btn .kcal-tooltip-bubble{
    left:auto;
    right:0;
    width:max-content;
    max-width:70vw;
    white-space:nowrap;
  }
  .row-subs-reset-btn .kcal-tooltip-bubble::after{
    left:auto;
    right:14px;
  }
  .row-subs-reset-btn:hover .kcal-tooltip-bubble,
  .row-subs-reset-btn:focus .kcal-tooltip-bubble,
  .row-subs-reset-btn:focus-within .kcal-tooltip-bubble{
    opacity:.9;
    visibility:visible;
  }
  .row-subs-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .row-subs-list li{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:1rem;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
  }
  .row-subs-list li:last-child{ border-bottom:1px solid var(--line); }
  .row-subs-list li .name{
    font-size:.875rem;
    line-height:1.35;
    color:var(--ink);
  }
  .row-subs-list li .qty{
    flex:0 0 auto;
    font-weight:400;
    font-size:.875rem;
    background:var(--card);
    border:1px solid var(--line);
    color:var(--ink);
    border-radius:999px;
    padding:4px 11px;
    white-space:nowrap;
  }
  .row-subs-list li .row-right{
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
  }
  .row-subs-list li .swap-btn .material-symbols-rounded{ font-size:1rem; }
  .row-subs-note{
    margin:8px 4px 0;
    font-size:.75rem;
    font-style:italic;
    color:var(--ink-dim);
  }

  .footnote{
    max-width:760px;
    margin:20px auto 0;
    padding:0 24px;
    font-size:.875rem;
    color:var(--ink-dim);
    text-align:center;
  }

  /* banner "aggiungi alla schermata Home" (solo iOS) */
  .add-home-banner{
    display:none;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1001;
    background:var(--card);
    border-top:1px solid var(--line);
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 20px var(--shadow);
  }
  .add-home-banner-inner{
    display:flex;
    flex-direction:column;
    gap:14px;
    max-width:540px;
    margin:0 auto;
  }
  .add-home-banner-head{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .add-home-banner-appicon{
    width:48px;
    height:48px;
    border-radius:12px;
    flex:0 0 auto;
  }
  .add-home-banner-title-wrap{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .add-home-banner-title{
    font-size:.9375rem;
    font-weight:600;
    color:var(--ink);
  }
  .add-home-banner-sub{
    font-size:.8rem;
    color:var(--ink-dim);
    line-height:1.35;
  }
  .add-home-banner-close{
    flex:0 0 auto;
    width:30px;
    height:30px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--bg);
    color:var(--ink-dim);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    align-self:flex-start;
  }
  .add-home-banner-close svg{ width:14px; height:14px; }
  .add-home-banner-steps{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .add-home-banner-steps li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.8125rem;
    color:var(--ink);
    line-height:1.4;
  }
  .add-home-banner-step-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--accent);
    color:var(--accent-ink);
    font-size:.6875rem;
    font-weight:700;
    flex:0 0 auto;
  }
  .add-home-banner-step-icon{
    display:inline-flex;
    vertical-align:middle;
    margin:0 1px;
    color:var(--accent);
  }
  .add-home-banner-actions{
    display:flex;
    gap:8px;
  }
  .add-home-banner-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--accent);
    color:var(--accent-ink);
    border:none;
    border-radius:999px;
    padding:12px 24px;
    font-family:inherit;
    font-size:.9375rem;
    font-weight:600;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    width:100%;
  }
  body.has-home-banner{ padding-bottom:220px; }

  /* topbar actions group */
  /* lista della spesa */
  .modal-head-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
  }
  .persons-input{
    width:80px;
    font-family:inherit;
    font-size:.875rem;
    color:var(--ink);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 14px;
    text-align:center;
  }
  .shopping-cat{ margin-bottom:18px; }
  .shopping-cat:last-child{ margin-bottom:0; }
  .shopping-cat-title{
    font-weight:400;
    font-size:.75rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--accent);
    margin:0 0 8px;
  }
  .shopping-list{
    list-style:none;
    margin:0;
    padding:0;
  }
  .shopping-list li{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:space-between;
    gap:8px 12px;
    padding:8px 4px;
    border-bottom:1px solid var(--line);
  }
  .shopping-list li:last-child{ border-bottom:none; }
  .shopping-list .name{
    flex:1 1 auto;
    min-width:0;
    overflow-wrap:break-word;
    word-break:break-word;
    font-size:.875rem;
    line-height:1.35;
    color:var(--ink);
  }
  .shopping-list .qty{
    flex:0 0 auto;
    font-weight:400;
    font-size:.875rem;
    background:var(--bg);
    border:1px solid var(--line);
    color:var(--ink);
    border-radius:999px;
    padding:4px 11px;
    white-space:nowrap;
  }
  .shopping-list .row-right{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex:0 0 auto;
  }
  .remove-item-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--tag-bg);
    color:var(--ink-dim);
    border:none;
    border-radius:999px;
    padding:4px;
    cursor:pointer;
    flex:0 0 auto;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .12s ease, color .12s ease;
  }
  .remove-item-btn .material-symbols-rounded{ font-size:1.125rem; }
  .remove-item-btn:hover{ background:rgba(255,0,0,.14); color:var(--danger); }
  .remove-item-btn:active{ background:rgba(255,0,0,.2); color:var(--danger); }
  .item-mult-select{
    font-family:inherit;
    font-size:.75rem;
    color:var(--ink);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:999px;
    padding:5px 22px 5px 10px;
    cursor:pointer;
    flex:0 0 auto;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6a5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat;
    background-position:right 6px center;
    background-size:14px;
  }
  .shopping-note{
    font-size:.75rem;
    color:var(--ink-dim);
    margin-top:10px;
    text-align:center;
  }
  .copy-feedback{
    font-size:.75rem;
    color:var(--accent);
    text-align:center;
    margin-top:8px;
    min-height:1.2em;
  }
  /* area di rendering per stampa / export PDF: sempre colori chiari, controlli nascosti.
     NOTA: deve restare in flusso normale (position:static) e solo visibility:hidden — html2canvas
     (usato per "Scarica PDF") calcola un'altezza di 0 per questo stesso elemento quando è
     position:fixed/absolute, producendo un PDF vuoto. Con position:static il layout la
     posiziona fuori dalla vista comunque (nessun elemento visibile la segue in ordine di
     documento, essendo i modali tutti position:fixed), e viene svuotata subito dopo l'uso
     per non lasciare uno spazio vuoto scrollabile in fondo alla pagina.
     width:800px NON sta qui apposta: essendo ora position:static (in flusso), se fosse sempre
     larga 800px forzerebbe la pagina intera a essere larga almeno 800px anche su mobile (schermo
     "zoomato" con spazio vuoto a destra). La larghezza fissa viene impostata via JS solo per la
     durata di stampa/esportazione (vedi setExportRenderAreaActive), quando serve per il layout
     del PDF, e rimossa subito dopo insieme al contenuto. */
  .export-render-area{
    position:static;
    visibility:hidden;
    padding:24px;
    box-sizing:border-box;
    background:#f5f2e9;
    --bg:#f5f2e9;
    --bg-rgb:245,242,233;
    --card:#faf8f2;
    --card-rgb:250,248,242;
    --ink:#17140f;
    --ink-dim:#6f6a5e;
    --line:#d9d2c0;
    --shadow:rgba(23,20,15,.08);
    --accent:#1d877c;
    --accent-rgb:29, 135, 124;
    --accent-ink:#ffffff;
    --accent-soft:#e3f3f1;
    --tag-bg:#ededed;
    --cook-note-bg:#ffffce;
    --warning:#b86221;
  }
  .export-title{
    font-family:inherit;
    font-size:1.5rem;
    font-weight:700;
    color:#17140f !important;
    margin:0 0 20px;
    break-after:avoid-page;
    page-break-after:avoid;
  }
  .export-title-group{
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .export-render-area .day-card{
    background:#fff !important;
    box-shadow:none !important;
    margin-bottom:24px;
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .export-render-area .meal-block{
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .export-render-area .meal-label-row,
  .export-render-area .food-list{
    background:#fff !important;
    border-color:#ccc !important;
  }
  .export-render-area .swap-wrap,
  .export-render-area .share-icon-btn,
  .export-render-area .breakfast-day-select,
  .export-render-area .more-menu,
  .export-render-area .today-badge,
  .export-render-area .day-rating-btn,
  .export-render-area .meal-rating-btn{
    display:none !important;
  }

  /* export giorni: checklist nella modale */
  .export-day-option{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.875rem;
    font-weight:400;
    color:var(--ink);
    padding:10px 4px;
    cursor:pointer;
  }
  .export-day-option input{
    width:18px;
    height:18px;
    accent-color:var(--accent);
  }
  .export-day-all{
    border-bottom:1px solid var(--line);
    margin-bottom:4px;
    font-weight:400;
  }

  /* stampa: nasconde tutto tranne l'area di export popolata */
  @media print{
    @page{
      margin:12mm;
    }
    body > *:not(.export-render-area){ display:none !important; }
    .export-render-area{
      position:static !important;
      visibility:visible !important;
      left:auto !important;
      width:auto !important;
    }
  }

  /* modalità di sola lettura (link condiviso dal menu "more"): si può ancora
     passare da un giorno all'altro con le day-tabs, cercare e cambiare giorno/settimana,
     ma ogni pulsante o select che permetterebbe di modificare o ri-condividere il piano
     viene nascosto */
  html:not(.water-monitoring-on) .water-monitoring{
    display:none;
  }
  html:not(.extra-monitoring-on) .extra-monitoring{
    display:none;
  }
  /* diario alimentare (valutazione umore/fame di giorni e pasti): visibile di default,
     nascondibile dal menu "more" della topbar per chi non lo usa */
  html.diary-feature-off .diary-feature{
    display:none;
  }
  html.readonly-mode #dashboardBtn,
  html.readonly-mode #openFeedbackBtn,
  html.readonly-mode #addHomeBanner,
  html.readonly-mode main .more-menu,
  html.readonly-mode main button:not(#dayTabsBar button),
  html.readonly-mode main select,
  html.readonly-mode main .swap-wrap,
  html.readonly-mode main .row-subs-panel{
    display:none !important;
  }
  /* nel menu "more" della topbar, chi apre un link condiviso non deve poter ri-condividere
     né toccare le impostazioni globali di visibilità kcal/monitoraggio: quelle restano solo
     per chi possiede il piano */
  html.readonly-mode #mainMoreDropdown [data-action="share-readonly"],
  html.readonly-mode #kcalDividerTop,
  html.readonly-mode #mainMoreDropdown .more-dropdown-label-row,
  html.readonly-mode #kcalMealToggleItem,
  html.readonly-mode #kcalItemToggleItem,
  html.readonly-mode #kcalDayToggleItem,
  html.readonly-mode #kcalDividerBottom,
  html.readonly-mode #monitoringSectionLabel,
  html.readonly-mode #dietMonitoringToggleItem,
  html.readonly-mode #diaryFeatureToggleItem{
    display:none !important;
  }

  /* ---------- desktop: pulsanti tondi a icona (btn-default, share-icon-btn, modal-close) leggermente più grandi ---------- */
  @media (min-width: 1024px){
    .btn-default{ width:48px; height:48px; }
    .btn-default .material-symbols-rounded{ font-size:1.5rem; }
    .share-icon-btn svg{ width:18px; height:18px; }
    .modal-close{ width:36px; height:36px; }
    .modal-close .material-symbols-rounded{ font-size:1.25rem; }
    .modal-close svg{ width:17px; height:17px; }
    .modal-head-actions .share-icon-btn{ width:36px; height:36px; }
    .modal-head-actions .share-icon-btn svg{ width:17px; height:17px; }
    .tracking-mood-btn{ font-size:3.5rem; }
    .day-head{
      flex-direction:row;
      justify-content:space-between;
      align-items:flex-start;
      padding-left:1.5rem;
      padding-right:1.5rem;
    }
    .day-head .day-name{
      align-items:flex-start;
    }
    .day-name-group{
      align-items:flex-start;
    }
  }

  /* ---------- font-size aumentati su tutta l'app (mobile e desktop), valori px puliti invece delle cifre frazionate in rem ---------- */
    .calendar-input{ font-size:1rem; }
    .modal-head h2{ font-size:1.375rem; }
    .modal-section-title{ font-size:.875rem; }
    .cook-note{ font-size:1rem; }
    .cook-group .food-name{ font-size:1.125rem; }
    .cook-group li{ font-size:1rem; }
    .advice-list li{ font-size:1rem; }
    .btn-ghost-full{ font-size:1.125rem; }
    .btn-ghost-muted{ font-size:1.125rem; }
    .modal-footer p{ font-size:1rem; }
    .hero .eyebrow{ font-size:1rem; }
    .card-head h2{ font-size:1.375rem; }
    .day-rating-badge{ font-size:.8125rem; }
    .dayoff-badge{ font-size:.875rem; }
    .tracking-section-title{ font-size:1.125rem; }
    .tracking-question{ font-size:1rem; }
    .tracking-chip{ font-size:1rem; }
    .tracking-meals-list li{ font-size:1rem; }
    .rating-favorite-title{ font-size:1rem; }
    .rating-favorite-list button{ font-size:1rem; }
    .breakfast-day-select{ font-size:1rem; }
    .meal-help{ font-size:.875rem; }
    .food-row .name{ font-size:1rem; }
    .item-kcal{ font-size:.875rem; }
    .more-dropdown-item .row-tag{ font-size:.75rem; }
    .food-row .qty{ font-size:.875rem; }
    .meal-kcal-tag,
    .plate-kcal-tag{ font-size:.875rem; }
    .sub-label{ font-size:1.125rem; }
    .more-dropdown-item{ font-size:1rem; }
    .more-dropdown-label{ font-size:.875rem; }
    .lang-option{ font-size:.9375rem; }
    .search-input{ font-size:1.125rem; }
    .search-results-count{ font-size:.875rem; }
    .search-empty-big{ font-size:1.375rem; }
    .search-result-item .name{ font-size:1rem; }
    .search-result-loc{ font-size:.875rem; }
    .search-result-item .qty{ font-size:1rem; }
    .segmented button{ font-size:1rem; }
    .dashboard-topbar-title{ font-size:1.5rem; }
    .dash-filter-tabs button{ font-size:1rem; }
    .dash-filter-tabs{
      padding:6px;
      gap:6px;
      margin-bottom:2rem;
    }
    .dash-filter-tabs button{
      padding:10px 22px;
    }
    .dash-kpi-value{ font-size:1.875rem; }
    .dash-kpi-value-text{ font-size:1.25rem; }
    .dash-kpi-label{ font-size:.875rem; }
    .dash-meal-card-title{ font-size:1.125rem; }
    .dash-feedback-emojis{ font-size:2.5rem; }
    .dash-no-data{ font-size:1rem; }
    .dash-meal-phase{ font-size:.9375rem; }
    .dash-phase-chip{ font-size:.75rem; }
    .dash-kcal-per-meal li{ font-size:1rem; }
    .day-head .day-name{ font-size:1.875rem; }
    .day-head .day-name .today-badge{ font-size:1rem; }
    .day-tabs .today-badge{ font-size:.875rem; }
    .meal-label{ font-size:1.125rem; }
    .meal-label-select{ font-size:1.125rem; }
    .row-subs-title{ font-size:.875rem; }
    .row-subs-list li .name{ font-size:1rem; }
    .row-subs-list li .qty{ font-size:1rem; }
    .row-subs-note{ font-size:.875rem; }
    .footnote{ font-size:1rem; }
    .add-home-banner-text{ font-size:.875rem; }
    .persons-input{ font-size:1rem; }
    .shopping-cat-title{ font-size:.875rem; }
    .shopping-list .name{ font-size:1rem; }
    .shopping-list .qty{ font-size:1rem; }
    .item-mult-select{ font-size:.875rem; }
    .shopping-note{ font-size:.875rem; }
    .copy-feedback{ font-size:.875rem; }
    .export-title{ font-size:1.625rem; }
    .export-day-option{ font-size:1rem; }

/* ============================================================
   Bootstrap 5 — override tema per componenti migrati
   ============================================================ */
/* Dropdown */
.dropdown-menu{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 8px 24px var(--shadow);
  padding:6px;
  min-width:280px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  color:var(--ink);
}
.dropdown-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--ink);
  border-radius:calc(var(--radius) - 4px);
  padding:10px 12px;
  font-size:.875rem;
  font-family:inherit;
}
.dropdown-item:hover,.dropdown-item:focus{ background:rgba(var(--accent-rgb),.1); color:var(--ink); }
.dropdown-divider{ border-color:var(--line); margin:4px 0; }
.dropdown-header{ color:var(--ink-dim); font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:8px 12px 4px; }

/* Saluto sopra la day-card */
.day-greeting{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 1rem .75rem;
  gap:.5rem;
  position:relative;
}
.day-greeting .more-menu{
  position:relative;
}
.day-greeting-left{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  text-align:left;
}
.user-more-btn{
  width:40px;
  height:40px;
  border-radius:999px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-dim);
  background:var(--card);
  border:1px solid var(--line);
}
.day-greeting-label{
  font-size:1rem;
  font-weight:normal;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.day-greeting-name{
  font-size:3rem;
  font-weight:700;
  color:var(--accent);
  line-height:1.15;
}

/* userMoreDropdown usa il posizionamento standard .more-dropdown.drop-left */
/* nav-bar si sposta in alto quando la dashboard è aperta */
body.dashboard-open #planBtn{
  display:none;
}
body.dashboard-open .tabs-row-wrap{
  display:none !important;
}
body.dashboard-open .nav-bar{
  top:6% !important;
  bottom:auto !important;
}

/* icone native input[type=date] chiare in dark mode */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .calendar-input,
  :root:not([data-theme="light"]) .calendar-input-wrap .calendar-input{
    color-scheme: dark;
  }
}
:root[data-theme="dark"] .calendar-input,
:root[data-theme="dark"] .calendar-input-wrap .calendar-input{
  color-scheme: dark;
}

@media (max-width:767px){
  .day-tabs-inline{ display:none; }
}

/* day-card trasparente in dark mode su mobile */
@media (max-width:767px){
  .day-card{
    background:transparent;
    border-radius:0;
    padding:0;
    box-shadow:none;
  }
}

/* fix sostituzione su mobile: nome su riga intera, qty sotto */
@media (max-width:767px){
  .row-subs-panel{
    padding:8px 6px 10px;
    margin:8px 0 .75rem;
  }
  .row-subs-list li{
    flex-wrap:wrap;
    gap:4px;
    padding:1rem;
  }
  .row-subs-list li .name-col{
    flex:1 1 100%;
    min-width:0;
  }
  .row-subs-list li .row-right{
    flex:0 0 auto;
    margin-left:auto;
    gap:6px;
  }
  .row-subs-list li .qty{
    font-size:.8125rem;
    padding:3px 9px;
    white-space:nowrap;
  }
}

/* ── nav-btn: outline di default, fill quando attivo ── */
.nav-btn .nav-icon{
  font-variation-settings:'FILL' 0, 'wght' 300;
  transition:font-variation-settings .15s ease;
}
.nav-btn[aria-pressed="true"] .nav-icon,
.nav-btn.active .nav-icon{
  font-variation-settings:'FILL' 1, 'wght' 400;
  color:var(--accent);
}

/* ── search-overlay: bar+calendar fianco a fianco, nasconde navbar ── */
.search-bar-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}
.search-bar-wrap .search-bar{
  flex:1 1 auto;
}
.search-calendar-btn{
  flex:0 0 auto;
  width:48px;
  height:48px;
}
body.search-open .nav-bar{
  display:none !important;
}



/* ── tabs-row-wrap: calendarBtn + dayTabs affiancati ── */
/* elemento UNICO condiviso tra mobile e desktop: JS lo sposta nel punto giusto del DOM
   (dentro #main su desktop, subito dopo il greeting; fuori da #main su mobile), il CSS
   ne gestisce solo l'aspetto — nessuna duplicazione HTML, nessun rischio di divergenza */
.tabs-row-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  position:relative;
}
@media (min-width:768px){
  .tabs-row-wrap{
    margin:0 0 10px;
  }
}
.tabs-actions-stack{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:0 0 auto;
  align-self:stretch;
  box-sizing:border-box;
  padding:.5rem;
  background:rgba(var(--card-rgb), .2);
  border:1px solid rgba(var(--card-rgb), .2);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  border-radius:var(--radius);
}
/* #calendarMenu (.more-menu) è un genitore intermedio tra lo stack e il bottone
   calendario: senza farlo comportare da flex container che si estende, il bottone
   al suo interno non ha un riferimento di altezza valido per height:calc(50%-...)
   e ricade sull'altezza naturale del contenuto (solo l'icona, ~12px) */
.tabs-actions-stack > .more-menu{
  display:flex;
  flex:0 0 auto;
  height:calc(50% - 2px);
}
.tabs-actions-stack .tabs-calendar-btn,
.tabs-actions-stack .tabs-today-btn{
  flex:1 1 auto;
  height:100%;
  align-self:stretch;
}
.tabs-calendar-btn{
  flex:0 0 auto;
  width:42px;
  height:20px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  background:rgba(var(--accent-rgb),.1);
  border:1px solid rgba(var(--accent-rgb),.2);
}
.tabs-today-btn{
  flex:0 0 auto;
  height:20px;
  padding:0 10px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  font-family:inherit;
  font-size:.625rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.0625rem;
  color:var(--accent);
  background:rgba(var(--accent-rgb),.1);
  border:1px solid rgba(var(--accent-rgb),.2);
}
.tabs-row-inner{
  flex:1 1 auto;
  min-width:0;
  position:relative;
}
/* sfumatura destra per indicare che c'è altro */
.tabs-row-inner::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width:40px;
  pointer-events:none;
  z-index:2;
  border-radius:0 360px 360px 0;
  background:linear-gradient(to right, transparent, rgba(var(--bg-rgb), .25));
}
/* aspetto visivo di .tabs-row-wrap: identico su mobile e desktop */
.tabs-row-wrap .tabs-calendar-btn{
  background:rgba(var(--accent-rgb),.2);
  border:1px solid rgba(var(--accent-rgb),.2);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.tabs-row-inner{
  background:rgba(var(--accent-rgb),.2);
  border:1px solid rgba(var(--accent-rgb),.2);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:360px;
  overflow:hidden;
}
@media (max-width:767px){
  /* solo il posizionamento è specifico di mobile: su schermi piccoli la barra
     resta ancorata in alto, su desktop segue il flusso normale della pagina */
  .tabs-row-wrap{
    position:fixed;
    top:6%;
    left:0;
    right:0;
    width:100%;
    z-index:50;
    gap:6px;
    background:transparent;
    padding:0 1rem;
  }
  /* il vecchio #dayTabsBarWrap ora è dentro tabs-row-wrap, non serve più il suo posizionamento */
}

/* ── mainMoreDropdown su mobile: fixed per evitare overflow fuori schermo ── */
@media (max-width:767px){
  #mainMoreDropdown.open{
    position:fixed !important;
    bottom:calc(80px + env(safe-area-inset-bottom)) !important;
    right:8px !important;
    left:8px !important;
    top:auto !important;
    width:auto !important;
    max-width:calc(100vw - 16px) !important;
    max-height:70vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:none !important;
    border-radius:var(--radius);
    z-index:1100;
  }
}

/* day-card trasparente in dark mode */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .day-card{
    background:transparent;
  }
}
:root[data-theme="dark"] .day-card{
  background:transparent;
}



/* #dayTabsBarWrap (mobile) e #dayTabsBarInline (desktop): stessa identica veste grafica */
#dayTabsBarWrap,
#dayTabsBarInline{
  flex:1 1 auto;
  min-width:0;
  background:rgba(var(--card-rgb), .2);
  border:1px solid rgba(var(--card-rgb), .2);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  border-radius:var(--radius);
  overflow:hidden;
}

.meals-list{
  padding:0 .5rem;
}

@media (min-width:768px){
  .nav-bar{
    width:auto !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
  }
}

@media (max-width:767px){
  .dashboard-view{
    padding:calc(30px + env(safe-area-inset-top)) 20px 12px;
  }
}

@media (max-width:767px){
  .dash-filter-tabs{
    margin-bottom:0;
  }
}

#dayOffReactivateBtn{
  width:100%;
}

.day-status-icon{
  font-size:1.25rem;
  line-height:1;
  font-variation-settings:'FILL' 1;
}
/* .active forza FILL 0 SOLO sulle icone che sarebbero comunque vuote (giorni
   futuri, oggi-non-completato): un giorno davvero completato resta pieno anche
   quando il suo tab è quello selezionato */
.day-tabs button.active .day-status-icon.day-status-icon--outline{
  font-variation-settings:'FILL' 0;
}
/* giorni futuri e oggi-non-completato: cerchio vuoto, sempre FILL 0 anche se il tab
   non è quello attivo (a differenza del comportamento sopra legato solo ad .active) */
.day-status-icon.day-status-icon--outline{
  font-variation-settings:'FILL' 0 !important;
}
/* giorno saltato: icona dedicata, resta sempre identica sia che il tab sia attivo o no */
.day-status-icon.day-status-icon--skipped{
  font-variation-settings:'FILL' 0 !important;
  opacity:1;
}