:root {
    --rosso: #CB2639;
    --nero: #231F20;
    --grigio: #E6E7E8;
    --grigio-testo: #5d5b5c;
    --bianco: #fff;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--nero);
    -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bianco); }

.foglia { display: inline-block; width: .8em; height: .8em; background: currentColor; border-radius: 0 70% 0 70%; }

.testata {
    background: var(--rosso);
    color: var(--bianco);
    text-align: center;
    padding: calc(1.75rem + env(safe-area-inset-top)) 1rem 1.5rem;
}
.marchio { display: flex; justify-content: center; align-items: baseline; gap: .5rem; }
.marchio .bni { font-weight: bold; font-size: 1.1rem; background: var(--bianco); color: var(--rosso); padding: .1rem .5rem; border-radius: 1rem; }
.marchio .capitolo { font-weight: bold; font-size: 2.2rem; letter-spacing: .02em; }
.sottotitolo { margin: .25rem 0 0; font-weight: bold; letter-spacing: .15em; font-size: .95rem; }
.edizione { margin: .5rem 0 0; font-size: .8rem; opacity: .85; font-style: italic; }
.scaricamenti { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.pulsante { display: inline-block; padding: .55rem 1rem; border-radius: 2rem; text-decoration: none; font-weight: bold; font-size: .9rem; }
.pulsante.chiaro { background: var(--bianco); color: var(--rosso); }
.pulsante.trasparente { border: 1px solid rgba(255, 255, 255, .7); color: var(--bianco); }

.strumenti {
    position: sticky; top: 0; z-index: 2;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--grigio);
    display: grid; grid-template-columns: 1fr; gap: .5rem;
    max-width: 720px; margin: 0 auto;
}
.strumenti input, .strumenti select {
    width: 100%; padding: .7rem .9rem; font: inherit; font-size: 16px;
    border: 1px solid #c9c9cb; border-radius: .6rem; background: var(--bianco); color: var(--nero);
}
.strumenti input:focus, .strumenti select:focus { outline: 2px solid var(--rosso); outline-offset: -1px; }
.conteggio { margin: 0; font-size: .8rem; color: var(--grigio-testo); }

.schede { max-width: 720px; margin: 0 auto; padding: 1rem; display: grid; gap: 1rem; }
.scheda {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-areas: "foto dati" "azioni azioni";
    background: var(--grigio);
    border-radius: .5rem;
    overflow: hidden;
    border-left: 4px solid var(--rosso);
}
.scheda[hidden] { display: none; }
.scheda .foto { grid-area: foto; aspect-ratio: 35 / 44; background: #d5d6d8; }
.scheda .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scheda .dati { grid-area: dati; padding: .7rem .85rem; min-width: 0; }
.scheda .logo { display: block; height: 30px; margin-bottom: .4rem; }
.scheda .logo img { max-height: 100%; max-width: 100%; display: block; }
.scheda h2 { margin: 0; font-size: 1.05rem; line-height: 1.2; }
.scheda .categoria { margin: .2rem 0 0; color: var(--rosso); font-size: .8rem; letter-spacing: .02em; }
.scheda .azienda { margin: .2rem 0 0; font-size: .8rem; color: var(--grigio-testo); overflow-wrap: anywhere; }

.scheda .azioni { grid-area: azioni; display: flex; border-top: 1px solid #d0d1d3; background: var(--bianco); }
.scheda .azioni a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .55rem .25rem; text-decoration: none; color: var(--nero); font-size: .72rem;
    min-height: 48px; justify-content: center;
}
.scheda .azioni a + a { border-left: 1px solid var(--grigio); }
.scheda .azioni a:active { background: var(--grigio); }
.scheda .azioni svg { width: 20px; height: 20px; fill: var(--rosso); }

.nessun-risultato, .vuoto { text-align: center; color: var(--grigio-testo); padding: 2rem 1rem; }

.piede { text-align: center; color: var(--rosso); font-weight: bold; padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom)); font-size: .9rem; }

@media (min-width: 560px) {
    .strumenti { grid-template-columns: 1fr 220px; }
    .conteggio { grid-column: 1 / -1; }
    .scheda { grid-template-columns: 130px 1fr; }
}

/* Banner di installazione */
.installa {
    position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 10;
    display: flex; align-items: center; gap: .75rem;
    background: var(--bianco); color: var(--nero);
    border-radius: .9rem; padding: .75rem .85rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
    max-width: 520px; margin: 0 auto;
    animation: entra .3s ease-out;
}
.installa[hidden] { display: none; }
.installa img { border-radius: .6rem; flex: none; }
.installa-testo { flex: 1; display: flex; flex-direction: column; gap: .15rem; font-size: .82rem; line-height: 1.3; min-width: 0; }
.installa-testo strong { font-size: .92rem; }
.installa-testo svg { width: 16px; height: 16px; fill: #007aff; vertical-align: -3px; }
.installa .installa-ios { display: none; }
.installa.ios .installa-ios { display: inline; }
.installa.ios .installa-android, .installa.ios .installa-si { display: none; }
.installa-si { flex: none; background: var(--rosso); color: var(--bianco); border: 0; border-radius: 2rem; padding: .55rem 1rem; font: inherit; font-weight: bold; font-size: .85rem; }
.installa-chiudi { flex: none; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--grigio-testo); padding: .25rem .4rem; }
@keyframes entra { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }

.piede .crediti { margin: .6rem 0 0; font-weight: normal; font-size: .75rem; color: var(--grigio-testo); }
.piede .crediti a { color: var(--grigio-testo); }