/* =====================================================
   APP - base comune del nuovo layout (mobile-first)
   Colori, tipografia, barra di navigazione, componenti.
   ===================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
    --bg: #f4f3fc;
    --surface: #ffffff;
    --surface-2: #eeedfe;
    --border: #e4e2f3;
    --border-strong: #d9d6ee;
    --text: #1e1b3a;
    --text-2: #4a4668;
    --text-muted: #5e5a7a;
    --brand: #3c3489;
    --brand-contrast: #ffffff;
    --brand-soft: #cfcbf7;
    --ok: #1d9e75;
    --ok-text: #12704f;
    --ok-soft: #e3f4ec;
    --warn: #c77700;
    --warn-soft: #ffe7c2;
    --warn-text: #6b4300;
    --high: #f2b04a;
    --low: #b23a12;
    --low-soft: #fbe3da;
    --carbo-bg: #fbecd2;
    --carbo-text: #7a4a00;
    --insulina-bg: #dde8ff;
    --insulina-text: #1d4ea6;
    --shadow: 0 6px 24px rgba(30, 27, 58, 0.08);
    --radius: 18px;
    --tabbar-h: 68px;
    /* spazio sotto la barra in basso: la linea "home" dell'iPhone ne vuole meno di tutta l'area sicura */
    --sotto-barra: max(calc(var(--sa-bottom, env(safe-area-inset-bottom)) - 16px), 0px);
    --sidebar-w: 232px;
    --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.dark {
    --bg: #12111f;
    --surface: #1d1b31;
    --surface-2: #2a2747;
    --border: #2f2c4d;
    --border-strong: #3d3961;
    --text: #ece9ff;
    --text-2: #c9c4ef;
    --text-muted: #a6a1cc;
    --brand: #9d96f0;
    --brand-contrast: #12111f;
    --brand-soft: #5a5399;
    --ok: #3cc497;
    --ok-text: #6fe0b8;
    --ok-soft: #173a30;
    --warn: #f0a640;
    --warn-soft: #3d2c12;
    --warn-text: #ffd59a;
    --high: #f2b04a;
    --low: #ff7a52;
    --low-soft: #3d1d14;
    --carbo-bg: #3b2a10;
    --carbo-text: #f5c77a;
    --insulina-bg: #1a2a52;
    --insulina-text: #a9c3ff;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

* {
    box-sizing: border-box;
}

/* Niente zoom con il doppio tocco: è un'app, non una pagina da ingrandire */
html {
    touch-action: manipulation;
}

body.app {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    /* spazio per la barra in basso su telefono */
    padding-bottom: calc(var(--tabbar-h) + var(--sotto-barra));
    /* app installata su iPhone: il contenuto non finisce sotto l'orologio */
    padding-top: var(--sa-top, env(safe-area-inset-top));
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

a {
    color: var(--brand);
}

.hidden {
    display: none !important;
}

/* ===== STRUTTURA ===== */
.page {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 4px;
}
.page-header .btn {
    white-space: nowrap;
    flex-shrink: 0;
}
.page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.4px;
}
.page-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 4px 0;
}
.section-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}
.section-head a {
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

/* ===== BARRA LATERALE (PC) ===== */
.sidebar {
    display: none;
}

/* ===== TELEFONO: scorre il contenuto, non la pagina =====
   Nell'app installata su iPhone la barra fissa in basso, con pagine lunghe, poteva fermarsi a metà schermo
   durante lo scorrimento. Con la pagina ferma e il contenuto che scorre dentro <main>, la barra resta ancorata. */
@media (max-width: 899px) {
    /* altezza dello schermo (100% nell'app installata su iPhone può risultare più corto dello schermo) */
    html:has(> body.app[data-nav]),
    body.app[data-nav] {
        height: 100vh;
        height: 100dvh;
        /* Android: alcuni telefoni (es. Samsung) calcolano 100dvh più alto dello schermo su certe pagine e la
           barra in basso finiva tagliata; l'altezza reale arriva da common.js (--app-h = innerHeight) */
        height: var(--app-h, 100dvh);
        overflow: hidden;
    }
    /* iOS 26, app installata: 100% e 100dvh risultano più corti dell'altezza della barra di stato
       (difetto di WebKit); solo 100lvh è alto quanto lo schermo. Solo su iPhone (-webkit-touch-callout esiste
       solo lì): su Android 100lvh è più alto dello schermo visibile e la barra in basso finiva fuori vista */
    @media (display-mode: standalone) {
        @supports (-webkit-touch-callout: none) {
            html:has(> body.app[data-nav]),
            body.app[data-nav] {
                height: 100lvh;
            }
        }
    }
    body.app[data-nav] {
        position: relative;
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }
    body.app[data-nav] > main {
        flex: 1;
        min-height: 0;
        /* con i margini automatici un elemento flex si restringe al contenuto: la larghezza va fissata */
        width: 100%;
        min-width: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding-bottom: 16px;
    }
    /* spazio per il pulsante + in fondo al contenuto: un elemento e non il padding, perché il padding
       di main sposterebbe in alto anche le barre "sticky" (es. Salva profilo) */
    body.app[data-nav] > main::after {
        content: "";
        display: block;
        flex-shrink: 0;
        height: 64px;
    }
    /* main scorre con altezza fissa: i blocchi non devono restringersi (verrebbero tagliati) */
    body.app[data-nav] > main > * {
        flex-shrink: 0;
    }
    /* la barra non è più "fixed": è l'ultimo elemento della colonna, quindi sta sempre in fondo allo schermo */
    body.app[data-nav] > .tabbar {
        position: relative;
        flex-shrink: 0;
    }
    /* pulsante + e avvisi agganciati al fondo della pagina, appena sopra la barra */
    body.app[data-nav] > .fab,
    body.app[data-nav] > .toast {
        position: absolute;
    }
    body.app[data-nav] .salva-barra {
        bottom: 8px;
    }
}

/* ===== BARRA IN BASSO (TELEFONO) ===== */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    height: calc(var(--tabbar-h) + var(--sotto-barra));
    padding: 6px 8px var(--sotto-barra);
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}
.tabbar a.active {
    color: var(--brand);
    font-weight: 800;
}
.tabbar svg {
    width: 24px;
    height: 24px;
}

@media (min-width: 900px) {
    body.app {
        padding-bottom: 0;
        padding-left: var(--sidebar-w);
    }
    .tabbar {
        display: none;
    }
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        width: var(--sidebar-w);
        padding: 22px 14px;
        background: var(--surface);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .sidebar .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 10px 20px;
        font-weight: 800;
        font-size: 17px;
        color: var(--text);
        text-decoration: none;
    }
    .sidebar .brand img {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }
    .sidebar a,
    .sidebar button {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        padding: 0 12px;
        border-radius: 12px;
        border: none;
        background: transparent;
        color: var(--text-2);
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        cursor: pointer;
        text-align: left;
        width: 100%;
    }
    .sidebar svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    .sidebar a:hover,
    .sidebar button:hover {
        background: var(--surface-2);
        color: var(--brand);
    }
    .sidebar a.active {
        background: var(--brand);
        color: var(--brand-contrast);
    }
    .sidebar .spacer {
        flex-grow: 1;
    }

    /* Su PC le pagine usano la larghezza disponibile */
    .page {
        max-width: 1240px;
        padding: 28px 32px 40px;
        gap: 16px;
    }
    .page.narrow {
        max-width: 720px;
    }
    .page-title {
        font-size: 28px;
    }
}

/* ===== CARD ===== */
.card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}
.card-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}
.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.muted {
    color: var(--text-muted);
}
.small {
    font-size: 12px;
}

/* ===== METRICHE ===== */
.metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.metrics.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.metric {
    background: var(--surface);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.metric-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.metric-value {
    font-size: 22px;
    font-weight: 800;
}
.metric-note {
    font-size: 12px;
    color: var(--text-muted);
}
.val-ok {
    color: var(--ok-text);
}
.val-low {
    color: var(--low);
}
.val-high {
    color: var(--warn);
}

/* ===== PALLINI GLICEMIA ===== */
.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    flex-shrink: 0;
}
.dot-green {
    background: var(--ok);
}
.dot-yellow {
    background: var(--warn);
}
.dot-red {
    background: var(--low);
}

/* ===== PULSANTI ===== */
.btn {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    border: none;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.btn-primary {
    background: var(--brand);
    color: var(--brand-contrast);
}
.btn-ok {
    background: var(--ok);
    color: #ffffff;
}
.btn-danger {
    background: var(--low-soft);
    color: var(--low);
}
.btn-ghost {
    background: var(--surface-2);
    color: var(--brand);
}
.btn-block {
    width: 100%;
}
.btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.fab {
    position: fixed;
    right: 20px;
    bottom: calc(var(--tabbar-h) + var(--sotto-barra) + 16px);
    z-index: 40;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    border: none;
    background: var(--ok);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(29, 158, 117, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
@media (min-width: 900px) {
    .fab {
        bottom: 28px;
        right: 28px;
    }
}

/* ===== CHIP / FILTRI ===== */
.chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.chip {
    flex-shrink: 0;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 19px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.chip.active {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-contrast);
}
.seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    background: var(--border);
    border-radius: 14px;
    padding: 4px;
    gap: 4px;
}
.seg button {
    min-height: 38px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
}
/* schede-collegamento (es. Analisi: Misurazioni / Sensore) */
.seg a {
    min-height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-2);
    text-decoration: none;
}
.seg a.active,
.seg button.active {
    background: var(--surface);
    color: var(--brand);
    font-weight: 800;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ===== CAMPI ===== */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0; /* nelle griglie a due colonne non deve allargarsi oltre la sua cella */
}
.field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: 16px; /* 16px: su iPhone evita lo zoom automatico */
    font-weight: 600;
    outline: none;
}
/* Data e ora: su iPhone (Safari) questi campi hanno una larghezza minima propria e sporgono dal contenitore */
input.input[type="date"],
input.input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-width: 0;
    max-width: 100%;
}
input.input[type="date"]::-webkit-date-and-time-value,
input.input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
}
.input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--surface-2);
}
.input-unit {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 54px;
    padding: 0 14px;
    border-radius: 14px;
    background: var(--surface-2);
}
.input-unit input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 24px;
    font-weight: 800;
    width: 100%;
    min-width: 0;
}
.input-unit span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}
.input-unit.big {
    min-height: 64px;
    background: var(--surface);
    border: 2px solid var(--brand);
}
.input-unit.big input {
    font-size: 32px;
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.option {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--brand);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.option.active {
    border: 2px solid var(--brand);
    background: var(--surface-2);
    font-weight: 800;
}
.search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.search input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    flex-grow: 1;
    min-width: 0;
}

/* ===== SCHEDE MISURAZIONE ===== */
.entry-group {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.entry {
    display: flex;
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.entry:last-child {
    border-bottom: none;
}
/* solo con il mouse: sul telefono l'evidenziazione resterebbe dopo il tocco */
@media (hover: hover) {
    .entry:hover {
        background: var(--surface-2);
    }
}
.entry-time {
    width: 62px;
    flex-shrink: 0;
}
.entry-time b {
    display: block;
    font-size: 15px;
    font-weight: 800;
}
.entry-time span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
/* il nome del pasto risalta; i semplici controlli restano con la sola ora */
.entry.con-pasto .entry-time span {
    color: var(--brand);
    font-weight: 800;
}
.entry-body {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.entry-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.tag {
    background: var(--surface-2);
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}
.entry-food {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entry-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 22px;
    font-weight: 800;
}
.day-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 4px 2px;
}
.day-head b {
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}
/* Telefono: data e sport sulla stessa riga, il riepilogo del giorno sotto */
@media (max-width: 600px) {
    .day-head {
        flex-wrap: wrap;
        row-gap: 2px;
    }
    .day-head b {
        flex-grow: 1;
    }
    .day-head > .small {
        order: 3;
        flex-basis: 100%;
    }
}
.sport-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    white-space: nowrap;
    border-radius: 12px;
    border: none;
    background: var(--ok-soft);
    color: var(--ok-text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.sport-pill.add {
    background: transparent;
    border: 1px dashed var(--border-strong);
    color: var(--text-muted);
}
.empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
}

/* ===== FOGLIO DAL BASSO (modal) ===== */
.sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(18, 17, 31, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.sheet {
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    background: var(--surface);
    border-radius: 26px 26px 0 0;
    display: flex;
    flex-direction: column;
    animation: sheet-in 0.18s ease-out;
}
@keyframes sheet-in {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
}
@media (min-width: 900px) {
    .sheet-backdrop {
        align-items: center;
        padding-left: var(--sidebar-w);
    }
    .sheet {
        border-radius: 22px;
        max-height: 86vh;
    }
}
.sheet-grip {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--border-strong);
    margin: 10px auto 0;
}
.sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px 4px 20px;
}
.sheet-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}
.sheet-body {
    overflow-y: auto;
    padding: 8px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sheet-foot {
    padding: 12px 20px calc(16px + var(--sa-bottom, env(safe-area-inset-bottom)));
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sheet-error {
    color: var(--low);
    font-size: 13px;
    font-weight: 700;
    min-height: 18px;
}
.note-box {
    background: var(--surface-2);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.45;
}
.note-box b {
    display: block;
    font-size: 13px;
    color: var(--brand);
    margin-bottom: 2px;
}
.link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px dashed var(--border-strong);
    background: transparent;
    color: var(--brand);
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

/* ===== RIGHE ALIMENTO NEL PIATTO ===== */
.plate-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 12px;
    border-radius: 14px;
    background: var(--surface-2);
}
.plate-row .name {
    flex-grow: 1;
    min-width: 0;
}
.plate-row .name b {
    display: block;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plate-row .name span {
    font-size: 12px;
    color: var(--text-2);
}
.stepper {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: var(--surface);
    color: var(--brand);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}
.grams {
    width: 58px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 800;
    outline: none;
}
.food-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.food-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 12px;
    border: none;
    border-radius: 12px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-weight: 700;
}
/* solo con il mouse: sul telefono l'evidenziazione resterebbe dopo il tocco */
@media (hover: hover) {
    .food-result:hover {
        background: var(--surface-2);
    }
}
.food-result span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ===== MENU "ALTRO" ===== */
.menu-gruppo {
    margin: 8px 4px -4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.menu-list {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 60px;
    padding: 0 16px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    text-align: left;
}
.menu-item:last-child {
    border-bottom: none;
}
.menu-item svg {
    width: 22px;
    height: 22px;
    color: var(--brand);
    flex-shrink: 0;
}
.menu-item .grow {
    flex-grow: 1;
}
.menu-item.danger,
.menu-item.danger svg {
    color: var(--low);
}

/* ===== AVVISO IN BASSO ===== */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--tabbar-h) + var(--sotto-barra) + 16px);
    transform: translate(-50%, 20px);
    z-index: 200;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    border-radius: 14px;
    background: #1e1b3a;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
@media (min-width: 900px) {
    .toast {
        bottom: 28px;
    }
}

/* ===== ETICHETTE DEI GIORNI ===== */
.day-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 4px 8px;
}
.tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    border: none;
}
body.dark .tag {
    color: var(--text);
}
.tag.add {
    background: transparent;
    border: 1px dashed var(--border-strong);
    color: var(--text-muted);
    cursor: pointer;
}

/* ===== PASTI RICORRENTI E IPO ===== */
.chip-ghost {
    border-style: dashed;
    color: var(--text-muted);
}
.btn-link {
    border: none;
    background: none;
    color: var(--brand);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    min-height: 40px;
    padding: 0;
    text-align: left;
}
.modello-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.modello-row div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.section-azioni {
    display: flex;
    align-items: center;
    gap: 14px;
}
.btn-ipo {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 17px;
    border: none;
    background: var(--low-soft);
    color: var(--low);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
}

/* ===== TESTI LUNGHI (informativa) ===== */
.testo-legale h2 {
    font-size: 16px;
    margin: 18px 0 6px;
}
.testo-legale ul {
    margin: 0 0 8px;
    padding-left: 20px;
    line-height: 1.6;
    color: var(--text-2);
}
.testo-legale p {
    margin: 0 0 8px;
    line-height: 1.6;
    color: var(--text-2);
}

.badge-num {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--low);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== TELEFONO: tocchi comodi e niente contenuti nascosti ===== */
/* Il pulsante + in basso a destra non copre l'ultima misurazione */
body:has(.fab) .page {
    padding-bottom: 104px;
}
/* I campi (soprattutto le date) non escono mai dal riquadro */
.input {
    min-width: 0;
}
/* Etichette dei giorni e link piccoli: area da toccare più grande, aspetto invariato */
.tag {
    min-height: 34px;
    padding: 0 12px;
}
.section-head a,
.card-head a,
.link-sensore {
    padding: 10px 0;
    margin: -10px 0;
}

/* Scansione del codice a barre */
.scan-box {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background: #111;
}
.scan-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scan-mirino {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 34%;
    bottom: 34%;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* Glicemia compilata dalle letture del sensore */
.glic-sensore {
    font-size: 12px;
    color: var(--brand);
    font-weight: 700;
}
.glic-sensore:empty {
    display: none;
}

/* ===== Campo insulina con elenco ===== */
.con-elenco {
    position: relative;
}
.insuline-elenco {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 6px;
}
.insuline-gruppo {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.insuline-voce {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font-size: 15px;
}
.insuline-voce:hover,
.insuline-voce:focus {
    background: var(--surface-2);
}
.insuline-voce span {
    font-size: 12px;
    color: var(--text-muted);
}
.insuline-vuoto {
    padding: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Editor del profilo basale */
.pb-fasce {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pb-riga {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
    gap: 8px;
    align-items: center;
}
.pb-vuoto {
    width: 40px;
}
.pb-totale {
    margin: 0;
    font-weight: 800;
}

/* Avviso: prototipo su invito (benvenuto, accesso, registrazione) */
.avviso-prototipo {
    background: var(--warn-soft);
    color: var(--warn-text);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    margin: 8px 0 4px;
}

/* ===== Modalità esempio ===== */
.fascia-esempio {
    position: fixed;
    top: max(8px, var(--sa-top, env(safe-area-inset-top)));
    left: 50%;
    transform: translateX(-50%);
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 24px);
    padding: 6px 6px 6px 14px;
    border-radius: 999px;
    background: var(--warn-soft);
    color: var(--warn-text);
    font-size: 13px;
    box-shadow: var(--shadow);
}
.fascia-esempio > span {
    white-space: nowrap;
}
@media (max-width: 700px) {
    .fascia-esempio {
        top: auto;
        bottom: calc(var(--tabbar-h) + 12px + var(--sotto-barra));
        left: 12px;
        transform: none;
    }
    .fascia-esempio .fe-extra {
        display: none;
    }
}
.fascia-esempio button {
    border: 0;
    border-radius: 999px;
    padding: 6px 12px;
    font: inherit;
    font-weight: 800;
    background: var(--warn-text);
    color: var(--warn-soft);
    cursor: pointer;
    white-space: nowrap;
}

/* ===== Tutorial ===== */
.tut {
    position: fixed;
    inset: 0;
    z-index: 300;
}
.tut-velo.pieno {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 40, 0.55);
}
.tut-luce {
    position: fixed;
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(20, 18, 40, 0.55);
    outline: 3px solid var(--brand-soft);
    pointer-events: none;
    transition: all 0.2s ease;
}
.tut-scheda {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 24px));
    padding: 18px 18px 14px;
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}
.tut-scheda.centro {
    top: 50%;
    transform: translate(-50%, -50%);
}
.tut-scheda h2 {
    margin: 0 0 6px;
    font-size: 19px;
}
.tut-scheda p {
    margin: 0 0 10px;
    line-height: 1.5;
}
.tut-passo {
    font-size: 12px;
    font-weight: 800;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
body.dark .tut-passo {
    color: var(--text-muted);
}
.tut-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.tut-spazio {
    flex: 1;
}

/* Pulsante "?" del mini-tutorial della sezione */
.tut-aiuto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 10px;
    vertical-align: middle;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--brand);
    font: 800 14px/1 var(--font);
    cursor: pointer;
}
body.dark .tut-aiuto {
    color: var(--text);
}
.pro-tabs .tut-aiuto {
    flex: none;
    align-self: center;
    margin-left: auto;
    padding: 0;
    border-bottom: 1.5px solid var(--border-strong);
}

/* Carboidrati e insulina: colori diversi tra loro e dai pallini della glicemia */
.tag.tag-carbo,
.dr-chip.tag-carbo {
    background: var(--carbo-bg);
    color: var(--carbo-text);
    border-color: transparent;
}
.tag.tag-insulina,
.dr-chip.tag-insulina {
    background: var(--insulina-bg);
    color: var(--insulina-text);
    border-color: transparent;
}

/* Foto o iniziali delle persone */
.avatar-tondo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
img.avatar-tondo {
    cursor: zoom-in;
}
img.avatar-tondo.fissa {
    cursor: inherit;
}
.avatar-tondo.iniziali {
    background: hsl(var(--tinta) 55% 88%);
    color: hsl(var(--tinta) 45% 28%);
}
body.dark .avatar-tondo.iniziali {
    background: hsl(var(--tinta) 30% 26%);
    color: hsl(var(--tinta) 70% 85%);
}
.avatar-tondo.piccolo {
    width: 32px;
    height: 32px;
    font-size: 12px;
}
.avatar-tondo.grande {
    width: 64px;
    height: 64px;
    font-size: 22px;
}

/* Foto a tutto schermo */
.foto-grande {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(12, 10, 28, 0.82);
}
.fg-quadro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: min(520px, 100%);
}
.fg-quadro img {
    width: min(480px, 88vw, 70vh);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.fg-titolo {
    color: #fff;
    font-size: 17px;
}
.fg-azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* ===== Temi deluxe (su base scura: valgono anche le regole di body.dark) =====
   I colori della glicemia (--ok, --low, --high, --warn) non cambiano. */
body.tema-aurora {
    --bg: #0b1026;
    --surface: rgba(20, 26, 58, 0.78);
    --surface-2: rgba(38, 46, 92, 0.7);
    --border: #26305e;
    --border-strong: #35407a;
    --text: #eef1ff;
    --text-2: #cdd3f5;
    --text-muted: #a3abd8;
    --brand: #8ff0c8;
    --brand-contrast: #0b1026;
    --brand-soft: #3b4e8c;
}
body.tema-oceano {
    --bg: #04222e;
    --surface: rgba(8, 48, 64, 0.8);
    --surface-2: rgba(14, 70, 90, 0.72);
    --border: #135366;
    --border-strong: #1b6a80;
    --text: #e6fbff;
    --text-2: #bfe8ef;
    --text-muted: #8fc5cf;
    --brand: #4fe0e0;
    --brand-contrast: #04222e;
    --brand-soft: #16607a;
}
body.tema-tramonto {
    --bg: #2a1530;
    --surface: rgba(58, 30, 62, 0.82);
    --surface-2: rgba(84, 44, 82, 0.72);
    --border: #5a3360;
    --border-strong: #74427a;
    --text: #fff0ea;
    --text-2: #f6d3c8;
    --text-muted: #d8aab0;
    --brand: #ffa184;
    --brand-contrast: #2a1530;
    --brand-soft: #7a3e62;
}
body.tema-oro {
    --bg: #0e0c0a;
    --surface: rgba(26, 23, 19, 0.88);
    --surface-2: rgba(40, 35, 27, 0.85);
    --border: #3a3122;
    --border-strong: #5b4a2c;
    --text: #f6efe0;
    --text-2: #e3d6b8;
    --text-muted: #b9a986;
    --brand: #e0bb6a;
    --brand-contrast: #0e0c0a;
    --brand-soft: #5b4a2c;
}

/* sfondo animato dietro a tutto: due livelli (::before nuvole di colore, ::after effetto del tema) */
body.tema-deluxe::before,
body.tema-deluxe::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    will-change: transform; /* animazioni solo con transform/opacity: niente ridisegno a ogni fotogramma */
}
body.tema-deluxe::before {
    inset: -25%;
    animation: tema-deriva 16s ease-in-out infinite alternate;
}
@keyframes tema-deriva {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(-7%, 5%) rotate(8deg) scale(1.08); }
    100% { transform: translate(6%, -6%) rotate(-6deg) scale(1.04); }
}
body.tema-aurora::before {
    background:
        radial-gradient(35% 28% at 25% 25%, rgba(94, 242, 180, 0.55), transparent 70%),
        radial-gradient(38% 30% at 75% 15%, rgba(167, 123, 255, 0.55), transparent 70%),
        radial-gradient(45% 35% at 55% 80%, rgba(64, 140, 255, 0.35), transparent 70%);
}
/* Aurora: tende di luce che ondeggiano in alto */
body.tema-aurora::after {
    left: -30%;
    right: -30%;
    top: -10%;
    height: 55%;
    /* sfumature larghe al posto del filtro blur, molto pesante sui telefoni */
    background: repeating-linear-gradient(100deg, transparent 0 4%, rgba(94, 242, 180, 0.18) 9%, transparent 15%, rgba(167, 123, 255, 0.16) 19%, transparent 25%);
    animation: tema-tende 10s ease-in-out infinite alternate;
    /* sfuma verso il basso e ai lati: senza, su PC si vedeva il bordo netto delle tende */
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
@keyframes tema-tende {
    from { transform: translateX(-8%) skewX(-8deg); opacity: 0.6; }
    to { transform: translateX(8%) skewX(8deg); opacity: 1; }
}
body.tema-oceano::before {
    background:
        radial-gradient(40% 30% at 20% 75%, rgba(42, 212, 212, 0.45), transparent 70%),
        radial-gradient(40% 32% at 80% 20%, rgba(31, 123, 209, 0.5), transparent 70%);
    animation-duration: 20s;
}
/* Oceano: onde che scorrono in fondo allo schermo */
body.tema-oceano::after {
    left: -2400px; /* 2400 = multiplo di entrambe le onde: lo scorrimento ricomincia senza salti */
    right: 0;
    bottom: 0;
    height: 180px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 Q100 20 200 60 T400 60 T600 60 T800 60 V120 H0Z' fill='%234fe0e0' fill-opacity='0.16'/%3E%3C/svg%3E") repeat-x 0 30px / 800px 120px,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 Q100 35 200 70 T400 70 T600 70 T800 70 V120 H0Z' fill='%231f7bd1' fill-opacity='0.22'/%3E%3C/svg%3E") repeat-x 0 60px / 600px 120px;
    animation: tema-onde 36s linear infinite;
}
@keyframes tema-onde {
    from { transform: translateX(0); }
    to { transform: translateX(2400px); }
}
body.tema-tramonto::before {
    background:
        radial-gradient(45% 32% at 50% 5%, rgba(255, 138, 107, 0.6), transparent 70%),
        radial-gradient(40% 30% at 10% 60%, rgba(255, 196, 138, 0.35), transparent 70%),
        radial-gradient(45% 35% at 90% 90%, rgba(170, 80, 180, 0.5), transparent 70%);
}
/* Tramonto: il sole che pulsa piano in alto */
body.tema-tramonto::after {
    top: -140px;
    left: 50%;
    width: 340px;
    height: 340px;
    margin-left: -170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 196, 138, 0.55), rgba(255, 138, 107, 0.25) 45%, transparent 70%);
    animation: tema-sole 6s ease-in-out infinite;
}
@keyframes tema-sole {
    0%, 100% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
}
body.tema-oro::before {
    background:
        radial-gradient(35% 28% at 85% 10%, rgba(217, 178, 95, 0.32), transparent 70%),
        radial-gradient(40% 30% at 10% 90%, rgba(217, 178, 95, 0.22), transparent 70%);
    animation-duration: 22s;
}
/* Ossidiana e oro: un fascio di luce dorata che attraversa lo schermo */
body.tema-oro::after {
    top: -50%;
    bottom: -50%;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(243, 223, 168, 0.13) 45%, rgba(243, 223, 168, 0.22) 50%, rgba(243, 223, 168, 0.13) 55%, transparent);
    transform: rotate(18deg);
    animation: tema-fascio 7s ease-in-out infinite;
}
@keyframes tema-fascio {
    0% { transform: translateX(0) rotate(18deg); }
    60%, 100% { transform: translateX(190vw) rotate(18deg); }
}

/* sfocatura solo sulle barre fisse: su ogni riquadro rallentava lo scorrimento */
body.tema-deluxe .sidebar,
body.tema-deluxe .tabbar {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@keyframes tema-riflesso {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

/* Tramonto: bagliore che "respira" sui pulsanti principali */
body.tema-tramonto .btn-primary,
body.tema-tramonto .fab {
    background: linear-gradient(135deg, #ff8a6b, #e0568a);
    color: #2a1530;
    animation: tema-respiro 3.5s ease-in-out infinite;
}
@keyframes tema-respiro {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 107, 0.0); }
    50% { box-shadow: 0 0 22px 2px rgba(255, 138, 107, 0.45); }
}

/* Ossidiana e oro: titoli dorati con un riflesso, bordi sottili dorati */
body.tema-oro .page-title,
body.tema-oro .pb-saluto {
    background: linear-gradient(100deg, #b8913f 20%, #f6e3a6 40%, #b8913f 60%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: tema-riflesso 7s linear infinite;
}
body.tema-oro .card {
    border: 1px solid rgba(217, 178, 95, 0.28);
}
body.tema-oro .btn-primary,
body.tema-oro .fab {
    background: linear-gradient(135deg, #f3dfa8, #c79a45);
    color: #0e0c0a;
}

/* Aurora: pulsanti con una sfumatura verde-viola */
body.tema-aurora .btn-primary,
body.tema-aurora .fab {
    background: linear-gradient(135deg, #5ef2b4, #a77bff);
    color: #0b1026;
}
body.tema-oceano .btn-primary,
body.tema-oceano .fab {
    background: linear-gradient(135deg, #2ad4d4, #1f7bd1);
    color: #04222e;
}

/* ===== Tema deluxe "Meduse": abisso blu-viola con meduse luminose che fluttuano ===== */
body.tema-meduse {
    --bg: #070a1f;
    --surface: rgba(18, 18, 48, 0.8);
    --surface-2: rgba(36, 30, 80, 0.72);
    --border: #2b2a5e;
    --border-strong: #3d3a7c;
    --text: #f3eeff;
    --text-2: #d8cff5;
    --text-muted: #ab9fd6;
    --brand: #ff8ad8;
    --brand-contrast: #1a0b24;
    --brand-soft: #4a2f6e;
}
/* sfondo: bagliori dal profondo che derivano lenti */
body.tema-meduse::before {
    background:
        radial-gradient(45% 35% at 20% 15%, rgba(165, 139, 255, 0.32), transparent 70%),
        radial-gradient(40% 35% at 85% 80%, rgba(127, 227, 255, 0.22), transparent 70%),
        radial-gradient(35% 30% at 60% 45%, rgba(255, 138, 216, 0.14), transparent 70%);
    animation-duration: 26s;
}
/* Le meduse: elementi veri (creati da common.js solo con questo tema), ognuna sale, ondeggia e "pulsa" */
#meduse {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.medusa {
    position: absolute;
    bottom: 0;
    will-change: transform;
    animation: md-sale var(--durata) linear var(--ritardo) infinite;
}
.medusa > div {
    animation: md-dondola calc(var(--durata) / 6) ease-in-out infinite alternate;
}
.medusa svg {
    display: block;
    width: var(--w);
    height: auto;
    overflow: visible;
}
@keyframes md-sale {
    from { transform: translateY(30vh); }
    to { transform: translateY(-120vh); }
}
@keyframes md-dondola {
    from { transform: translateX(-3vw) rotate(-6deg); }
    to { transform: translateX(3vw) rotate(6deg); }
}
/* leggera rotazione su se stessa: la medusa sembra girarsi nello spazio */
.md-gira {
    animation: md-gira calc(var(--durata) / 4) ease-in-out infinite alternate;
}
@keyframes md-gira {
    from { transform: perspective(400px) rotateY(-28deg) rotateX(8deg); }
    to { transform: perspective(400px) rotateY(28deg) rotateX(-4deg); }
}
.md-campana {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: md-pulsa 3.4s ease-in-out infinite;
}
@keyframes md-pulsa {
    0%, 100% { transform: scale(1, 1); }
    40% { transform: scale(1.08, 0.84); }
}
.md-tentacolo {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: md-onda 3.4s ease-in-out infinite alternate;
}
.md-tentacolo:nth-child(2n) { animation-duration: 4.1s; animation-direction: alternate-reverse; }
.md-tentacolo:nth-child(3n) { animation-duration: 2.9s; }
/* plancton luminoso: sale ondeggiando e "respira" (solo transform e opacity) */
.plancton {
    position: absolute;
    bottom: 0;
    width: var(--d);
    height: var(--d);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0, #fff 20%, var(--c) 45%, transparent 75%);
    box-shadow: 0 0 calc(var(--d) * 2) var(--c), 0 0 calc(var(--d) * 5) var(--c);
    will-change: transform, opacity;
    animation: pl-sale var(--durata) linear var(--ritardo) infinite, pl-luce var(--luce) ease-in-out infinite alternate;
}
@keyframes pl-sale {
    0% { transform: translate(0, 10vh); }
    25% { transform: translate(var(--x), -20vh); }
    50% { transform: translate(0, -50vh); }
    75% { transform: translate(calc(var(--x) * -1), -80vh); }
    100% { transform: translate(0, -112vh); }
}
@keyframes pl-luce {
    from { opacity: 0.35; }
    to { opacity: 1; }
}
@keyframes md-onda {
    from { transform: rotate(-9deg) scaleY(0.94); }
    to { transform: rotate(9deg) scaleY(1.04); }
}
body.tema-meduse .btn-primary,
body.tema-meduse .fab {
    background: linear-gradient(135deg, #ff8ad8, #a58bff);
    color: #1a0b24;
}
.tema-anteprima-meduse { background: radial-gradient(circle at 30% 35%, #ff8ad8 0 18%, transparent 19%), radial-gradient(circle at 70% 65%, #7fe3ff 0 14%, transparent 15%), #070a1f; }

/* ===== Tema deluxe "Cielo stellato": blu notte, stelle che brillano, stelle cadenti e luna ===== */
body.tema-stelle {
    --bg: #050817;
    --surface: rgba(14, 20, 46, 0.78);
    --surface-2: rgba(28, 38, 78, 0.7);
    --border: #222c58;
    --border-strong: #34407a;
    --text: #f2f4ff;
    --text-2: #d3d9f5;
    --text-muted: #9ea8d4;
    --brand: #ffd98a;
    --brand-contrast: #1b1405;
    --brand-soft: #3a3560;
}
/* sfondo: la via lattea e un bagliore all'orizzonte, che si spostano lentissimi */
body.tema-stelle::before {
    background:
        radial-gradient(60% 16% at 50% 38%, rgba(143, 180, 255, 0.16), transparent 70%),
        radial-gradient(40% 30% at 20% 20%, rgba(120, 90, 220, 0.18), transparent 70%),
        radial-gradient(70% 30% at 50% 105%, rgba(255, 190, 120, 0.12), transparent 70%);
    animation-duration: 40s;
}
#cielo {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.cl-strato {
    position: absolute;
    inset: -10%;
    will-change: transform;
    animation: cl-deriva 180s linear infinite alternate;
}
.cl-medie { animation-duration: 120s; }
.cl-vicine { animation-duration: 80s; }
@keyframes cl-deriva {
    from { transform: translate(0, 0); }
    to { transform: translate(-4%, 2%); }
}
.stella {
    position: absolute;
    width: var(--d);
    height: var(--d);
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 calc(var(--d) * 2) var(--c);
    will-change: opacity, transform;
    animation: cl-brilla var(--luce) ease-in-out var(--ritardo) infinite alternate;
}
/* le stelle vicine hanno anche i raggi a croce */
.cl-vicine .stella::before,
.cl-vicine .stella::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--d) * 7);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c), transparent);
    transform: translate(-50%, -50%);
    opacity: 0.7;
}
.cl-vicine .stella::after { transform: translate(-50%, -50%) rotate(90deg); }
@keyframes cl-brilla {
    from { opacity: var(--min); transform: scale(0.8); }
    to { opacity: 1; transform: scale(1.15); }
}
/* stella cadente: attraversa in diagonale nel primo 8% del ciclo, poi resta spenta */
.cadente {
    position: absolute;
    width: 140px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 245, 220, 0.9));
    opacity: 0;
    transform: rotate(-35deg);
    will-change: transform, opacity;
    animation: cl-cade var(--ciclo) linear var(--ritardo) infinite;
}
.cadente::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px 3px rgba(255, 240, 200, 0.8);
}
@keyframes cl-cade {
    0% { opacity: 0; transform: rotate(-35deg) translateX(0); }
    1% { opacity: 1; }
    7% { opacity: 0; transform: rotate(-35deg) translateX(-320px); }
    100% { opacity: 0; transform: rotate(-35deg) translateX(-320px); }
}
/* luna: falce luminosa che attraversa piano la parte alta del cielo */
.luna {
    position: absolute;
    top: 7%;
    left: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffbe8, #f3e2b0 55%, #d8c48e);
    box-shadow: 0 0 40px 10px rgba(255, 230, 170, 0.25), 0 0 120px 40px rgba(255, 220, 150, 0.08);
    -webkit-mask: radial-gradient(circle at 72% 38%, transparent 42%, #000 43%);
    mask: radial-gradient(circle at 72% 38%, transparent 42%, #000 43%);
    will-change: transform;
    animation: cl-luna 240s ease-in-out infinite alternate;
}
@keyframes cl-luna {
    from { transform: translateX(8vw) translateY(2vh); }
    to { transform: translateX(80vw) translateY(-1vh); }
}
body.tema-stelle .btn-primary,
body.tema-stelle .fab {
    background: linear-gradient(135deg, #ffd98a, #f2a65a);
    color: #1b1405;
}
.tema-anteprima-stelle { background: radial-gradient(circle at 70% 30%, #fff3c8 0 10%, transparent 11%), radial-gradient(circle at 25% 60%, #fff 0 3%, transparent 4%), radial-gradient(circle at 50% 80%, #cfe0ff 0 3%, transparent 4%), #050817; }

@media (prefers-reduced-motion: reduce) {
    .medusa, .medusa > div, .md-gira, .md-campana, .md-tentacolo, .plancton,
    .cl-strato, .stella, .luna,
    body.tema-deluxe::after,
    body.tema-deluxe::before,
    body.tema-deluxe .card,
    body.tema-deluxe .btn-primary,
    body.tema-deluxe .fab,
    body.tema-deluxe .page-title,
    body.tema-deluxe .pb-saluto {
        animation: none !important;
    }
    .cadente { display: none; }
}

/* Scelta del tema */
.temi-griglia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.tema-scelta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px;
    border: 2px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.tema-scelta.attivo {
    border-color: var(--brand);
}
.tema-anteprima {
    display: flex;
    width: 100%;
    height: 38px;
    border-radius: 10px;
    overflow: hidden;
}
.tema-anteprima i {
    flex: 1;
}

/* Bevande */
.badge-bevanda {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    vertical-align: middle;
    background: var(--insulina-bg);
    color: var(--insulina-text);
}
.tipo-alimento,
.tipo-filtro {
    margin-bottom: 10px;
}
.porzioni-bevanda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.plate-row.bevanda {
    flex-wrap: wrap;
}
.plate-row .porzioni-bevanda {
    flex-basis: 100%;
}
.plate-row .porzioni-bevanda .chip {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 12px;
}
.grams-unita {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}
.grams-unita > span {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}
#fs-free-unita {
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--text-muted);
}

/* ===== Account del professionista: gruppi ordinati, due colonne su PC ===== */
.acc { display: flex; flex-direction: column; gap: 14px; }
.acc .btn-sm { padding: 8px 14px; min-height: 0; font-size: 14px; white-space: nowrap; }
.acc-profilo {
    display: flex; gap: 16px; align-items: center;
    padding: 16px; border-radius: 18px; background: var(--surface-2);
}
.acc-chi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acc-chi b { font-size: 18px; }
.acc-chi .small { overflow-wrap: anywhere; }
.acc-azioni { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.acc-gruppo {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: 18px;
}
.acc-gruppo h3 {
    margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted);
}
.acc-riga { display: flex; gap: 8px; }
.acc-riga .input { flex: 1; min-width: 0; }
.acc-voce { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc-voce + .acc-voce { border-top: 1px solid var(--border); padding-top: 10px; }
.acc-voce > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-apri summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.acc-apri[open] { display: flex; flex-direction: column; gap: 10px; }
.acc-apri + .acc-apri { border-top: 1px solid var(--border); padding-top: 10px; }
.acc-pericolo summary { color: var(--low); }
.acc-esci { align-self: stretch; }
@media (min-width: 900px) {
    .sheet.sheet-account { max-width: 880px; }
    .acc { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
    .acc-profilo, .acc-esci { grid-column: 1 / -1; }
    .acc-esci { justify-self: end; align-self: auto; }
}
@media (min-width: 900px) { .sheet-account .sheet-grip { display: none; } }

/* Cambio di sezione scorrendo con il dito */
@keyframes entra-dx { from { transform: translateX(28%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes entra-sx { from { transform: translateX(-28%); opacity: 0; } to { transform: none; opacity: 1; } }
.entra-dx { animation: entra-dx 0.24s ease-out; }
.entra-sx { animation: entra-sx 0.24s ease-out; }

/* Gestione utenti (solo admin) */
.ut-riga { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ut-riga:last-child { border-bottom: none; }
.ut-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ut-testo .small { overflow-wrap: anywhere; }
.ut-riga .btn-sm { padding: 8px 12px; min-height: 0; font-size: 14px; }
#ut-cerca { margin: 4px 0 6px; }
.menu-item[hidden] { display: none; }

/* ===== Transizioni tra le pagine (View Transitions, dove supportate) =====
   Barra in basso e menù laterale restano fermi, il contenuto scorre di lato senza lampeggiare. */
@view-transition { navigation: auto; }
.tabbar { view-transition-name: barra; }
.sidebar { view-transition-name: menu; }
body > main { view-transition-name: pagina; }
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
::view-transition-group(pagina) { animation-duration: 0.26s; }
::view-transition-old(pagina) { animation: vt-sparisci 0.18s ease-out both; }
::view-transition-new(pagina) { animation: vt-compari 0.22s ease-out both; }
html:active-view-transition-type(avanti)::view-transition-old(pagina) { animation: vt-esci-sx 0.26s cubic-bezier(0.3, 0, 0.2, 1) both; }
html:active-view-transition-type(avanti)::view-transition-new(pagina) { animation: vt-entra-dx 0.26s cubic-bezier(0.3, 0, 0.2, 1) both; }
html:active-view-transition-type(indietro)::view-transition-old(pagina) { animation: vt-esci-dx 0.26s cubic-bezier(0.3, 0, 0.2, 1) both; }
html:active-view-transition-type(indietro)::view-transition-new(pagina) { animation: vt-entra-sx 0.26s cubic-bezier(0.3, 0, 0.2, 1) both; }
@keyframes vt-sparisci { to { opacity: 0; } }
@keyframes vt-compari { from { opacity: 0; } }
@keyframes vt-esci-sx { to { transform: translateX(-30%); opacity: 0; } }
@keyframes vt-entra-dx { from { transform: translateX(30%); opacity: 0; } }
@keyframes vt-esci-dx { to { transform: translateX(30%); opacity: 0; } }
@keyframes vt-entra-sx { from { transform: translateX(-30%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* app a pagina unica: sezione nascosta, animazioni ferme finché non torna in vista */
.in-pausa *, .in-pausa *::before, .in-pausa *::after { animation-play-state: paused !important; }

/* Altro: riepilogo delle cose da fare */
.altro-riepilogo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.altro-riepilogo[hidden] { display: none; }
.altro-riepilogo a { display: block; padding: 11px 14px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; }
.diario-alimenti { display: inline-flex; align-items: center; gap: 6px; }
body[data-nav="diario"]:not([data-sub]) .page-header { flex-wrap: wrap; row-gap: 6px; }
.diario-alimenti { margin-left: auto; }
.note-box .bolo-contesto { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.45; }