/* ============================================================
   myLibrary — foglio di stile
   Identità: monocromatico caldo, Inter + Newsreader, bordi 1px, raggio 8-14px.
   ============================================================ */

/* ---------- 1. Token ---------- */
:root {
  --bg:           #ffffff;
  --superficie:   #ffffff;
  --superficie2:  #f3f3f3;
  --superficie3:  #e8e8e8;
  --bordo:        #e6e6e6;
  --bordo-forte:  #d2d2d2;
  --testo:        #1a1a18;
  --testo2:       #616161;
  --testo3:       #8a8a8a;
  --nero:         #141412;
  --su-nero:      #ffffff;
  --rosso:        #c9362a;
  --rosso-bg:     #fcefed;
  --verde:        #2a7f52;
  --verde-bg:     #ecf7f0;
  --blu:          #3565a6;
  --blu-bg:       #eef3fa;
  --ambra:        #8f6416;
  --ambra-bg:     #fbf4e4;
  --stella:       #e9a800;
  --stella-spenta:#dcdcdc;
  --ombra-1:      0 1px 2px rgba(20,20,18,.05);
  --ombra-2:      0 8px 24px rgba(20,20,18,.10);
  --ombra-3:      0 24px 64px rgba(20,20,18,.18);
  --velo:         rgba(20,20,18,.38);
  --raggio:       14px;
  --raggio-s:     8px;
  --serif:        "Newsreader", Georgia, "Times New Roman", serif;
  --sans:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sidebar:      230px;
  --tabbar:       0px;
  --anim:         .16s ease;
  color-scheme: light;
}
html.tema-scuro {
  --bg:           #161615;
  --superficie:   #1e1e1c;
  --superficie2:  #272725;
  --superficie3:  #31312e;
  --bordo:        #2f2f2c;
  --bordo-forte:  #444440;
  --testo:        #f1f1ed;
  --testo2:       #b3b3ab;
  --testo3:       #83837c;
  --nero:         #f1f1ed;
  --su-nero:      #161615;
  --rosso:        #f07a6d;
  --rosso-bg:     #3a2421;
  --verde:        #7cd19b;
  --verde-bg:     #1f3628;
  --blu:          #90b8ec;
  --blu-bg:       #22313f;
  --ambra:        #e6b95c;
  --ambra-bg:     #3a3220;
  --stella:       #f2b632;
  --stella-spenta:#3f3f3b;
  --ombra-1:      0 1px 2px rgba(0,0,0,.3);
  --ombra-2:      0 8px 24px rgba(0,0,0,.4);
  --ombra-3:      0 24px 64px rgba(0,0,0,.6);
  --velo:         rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--testo);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.modale-aperto { overflow: hidden; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
svg { display: block; }
.nascosto, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--nero); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--nero); color: var(--su-nero); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 3. Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: 38px; padding: 0 .95rem;
  border: 1px solid transparent; border-radius: var(--raggio-s);
  background: transparent; color: var(--testo);
  font-size: .9rem; font-weight: 500; line-height: 1; white-space: nowrap;
  text-decoration: none;
  transition: background var(--anim), color var(--anim), border-color var(--anim), transform .08s ease, box-shadow var(--anim);
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:hover { background: var(--superficie2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.solido { background: var(--nero); color: var(--su-nero); font-weight: 600; }
.btn.solido:hover { background: var(--testo); }
html.tema-scuro .btn.solido:hover { background: #ffffff; }
.btn.fantasma { border-color: var(--bordo-forte); background: var(--superficie); }
.btn.fantasma:hover { background: var(--superficie2); border-color: var(--testo3); }
.btn.distruttivo { color: var(--rosso); }
.btn.distruttivo:hover { background: var(--rosso-bg); border-color: var(--rosso); }
.btn.distruttivo-pieno { background: var(--rosso); color: #fff; font-weight: 600; }
.btn.distruttivo-pieno:hover { filter: brightness(.92); }
.btn.piccolo { height: 32px; padding: 0 .7rem; font-size: .82rem; }
.btn.piccolo svg { width: 14px; height: 14px; }
.btn.strumento { border-color: var(--bordo-forte); background: var(--superficie); color: var(--testo); font-weight: 500; }
.btn.strumento:hover { border-color: var(--testo3); }
.btn.strumento.attivo { border-color: var(--nero); }
.btn.icona { width: 38px; padding: 0; color: var(--testo2); }
.btn.icona:hover { color: var(--testo); }
.btn.icona.attivo { background: var(--nero); color: var(--su-nero); border-color: var(--nero); }
.btn.link { height: auto; padding: .2rem .3rem; color: var(--testo2); font-size: .85rem; }
.btn.link:hover { color: var(--testo); background: transparent; text-decoration: underline; text-underline-offset: .2em; }
.btn.link-rosso { height: 32px; padding: 0 .6rem; color: var(--rosso); font-size: .82rem; font-weight: 600; }
.btn.link-rosso:hover { background: var(--rosso-bg); }
.btn.link-indietro { height: auto; padding: .3rem .5rem .3rem .3rem; margin: -.3rem 0 .9rem -.3rem; color: var(--testo2); font-size: .85rem; }
.btn.link-indietro:hover { color: var(--testo); background: var(--superficie2); }
.btn.caricamento { position: relative; color: transparent !important; pointer-events: none; }
.btn.caricamento::after {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite;
}
html.tema-scuro .btn.solido.caricamento::after { border-color: rgba(0,0,0,.25); border-top-color: var(--su-nero); }

.btn-icona {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: none; border-radius: var(--raggio-s); background: transparent; color: var(--testo2);
  transition: background var(--anim), color var(--anim);
}
.btn-icona svg { width: 18px; height: 18px; }
.btn-icona:hover:not(:disabled) { background: var(--superficie2); color: var(--testo); }
.btn-icona:disabled { opacity: .3; cursor: default; }
.btn-icona.pericolo:hover { background: var(--rosso-bg); color: var(--rosso); }

.btn-cuore {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: none; border-radius: 50%; background: transparent; color: var(--testo3);
  transition: color var(--anim), transform .1s ease, background var(--anim);
}
.btn-cuore svg { width: 18px; height: 18px; }
.btn-cuore:hover { color: var(--rosso); background: var(--rosso-bg); transform: scale(1.08); }
.btn-cuore.liked { color: var(--rosso); }
.btn-cuore.grande { width: 38px; height: 38px; }
.btn-cuore.grande svg { width: 22px; height: 22px; }

.fab {
  display: none; position: fixed; right: 1.1rem; bottom: calc(var(--tabbar) + 1rem + env(safe-area-inset-bottom));
  width: 54px; height: 54px; border-radius: 50%; border: none; z-index: 30;
  background: var(--nero); color: var(--su-nero); box-shadow: var(--ombra-2);
  place-items: center;
}
.fab svg { width: 24px; height: 24px; }

/* ---------- 4. Campi ---------- */
input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="password"], textarea {
  width: 100%; padding: .55rem .8rem;
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s);
  background: var(--superficie); color: var(--testo);
  font-size: .92rem; line-height: 1.4;
  transition: border-color var(--anim);
}
input::placeholder, textarea::placeholder { color: var(--testo3); }
input:focus, textarea:focus, input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--nero); box-shadow: none; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type="date"] { min-height: 38px; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
html.tema-scuro input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
textarea { resize: vertical; min-height: 4.5rem; }

.campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; min-width: 0; }
.campo > label { font-size: .8rem; font-weight: 600; color: var(--testo2); }
.campo .obbl { color: var(--rosso); }
.campo .facolt { font-weight: 400; color: var(--testo3); }
.campo-errore { display: none; font-size: .76rem; color: var(--rosso); }
.campo.errore input, .campo.errore .sel-btn { border-color: var(--rosso); }
.campo.errore .campo-errore { display: block; }
.riga-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
.suggerimento { font-size: .76rem; color: var(--testo3); line-height: 1.45; }

.campo-cerca { position: relative; flex: 1; min-width: 12rem; }
.campo-cerca svg { position: absolute; left: .75rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--testo3); pointer-events: none; }
.campo-cerca input { height: 38px; padding-left: 2.3rem; }

/* checkbox */
.campo-check, .cb-item { display: flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; font-size: .88rem; color: var(--testo); }
.campo-check { margin: .4rem 0 .9rem; }
.campo-check small { color: var(--testo3); font-size: .8rem; }
.campo-check input, .cb-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box, .cb-item span:first-of-type::before {
  content: ''; display: inline-grid; place-items: center; flex-shrink: 0;
  width: 18px; height: 18px; border: 1.5px solid var(--bordo-forte); border-radius: 5px;
  background: var(--superficie); transition: background var(--anim), border-color var(--anim);
}
.cb-item span:first-of-type { display: flex; align-items: center; gap: .6rem; }
.check-box::after, .cb-item span:first-of-type::after { display: none; }
.campo-check input:checked + .check-box, .cb-item input:checked + span::before { background: var(--nero); border-color: var(--nero); }
.campo-check input:checked + .check-box, .cb-item input:checked + span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}
html.tema-scuro .campo-check input:checked + .check-box, html.tema-scuro .cb-item input:checked + span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161615' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
}
.campo-check input:focus-visible + .check-box, .cb-item input:focus-visible + span::before { outline: 2px solid var(--nero); outline-offset: 2px; }

/* scelta sì/no (logga nel diario) */
.scelta-si-no { display: flex; gap: 1.2rem; padding: .2rem 0 .1rem; }
.scelta-si-no .opzione { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--testo); cursor: pointer; user-select: none; }
.scelta-si-no input { width: 16px; height: 16px; margin: 0; accent-color: var(--nero); cursor: pointer; }
.campo-data-lettura { margin-top: .7rem; margin-bottom: 0; }

/* select personalizzata */
.sel-nativo { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.sel-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 38px; padding: 0 .65rem 0 .85rem; max-width: 100%;
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s);
  background: var(--superficie); color: var(--testo);
  font-size: .9rem; font-weight: 500; line-height: 1.4; text-align: left; white-space: nowrap;
  transition: border-color var(--anim), box-shadow var(--anim);
}
.sel-btn:hover { border-color: var(--testo3); }
.sel-btn[aria-expanded="true"], .sel-btn:focus-visible { border-color: var(--nero); outline: none; }
.sel-btn.compatta { height: 34px; font-size: .85rem; }
.sel-prefisso { color: var(--testo3); font-weight: 400; }
.sel-prefisso::after { content: ':'; }
.sel-testo { overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.sel-testo.vuoto { color: var(--testo3); font-weight: 400; }
.sel-chevron { width: 15px; height: 15px; margin-left: auto; color: var(--testo3); flex-shrink: 0; transition: transform .18s ease; }
.sel-btn[aria-expanded="true"] .sel-chevron { transform: rotate(180deg); }
.campo .sel-btn { width: 100%; }
.sel-menu {
  position: fixed; z-index: 400; overflow-y: auto; padding: .35rem;
  border: 1px solid var(--bordo); border-radius: 10px;
  background: var(--superficie); box-shadow: var(--ombra-2);
  animation: apri .14s ease; outline: none; overscroll-behavior: contain;
}
.sel-opt {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .5rem .7rem; border-radius: 6px; font-size: .88rem; cursor: pointer; white-space: nowrap;
}
.sel-opt svg { width: 15px; height: 15px; color: var(--testo2); }
.sel-opt.attiva { background: var(--superficie2); }
.sel-opt.selezionata { font-weight: 600; }
.sel-opt.disabilitata { opacity: .4; cursor: default; }

/* stelle */
.stelle { display: inline-flex; gap: 1px; }
.stelle svg { width: 15px; height: 15px; }
.stelle .accesa { color: var(--stella); }
.stelle .spenta { color: var(--stella-spenta); }
.stelle-grandi svg { width: 22px; height: 22px; }
.stelle-piccole svg { width: 13px; height: 13px; }
.stelle-input { display: inline-flex; gap: .1rem; }
.stelle-input .stella { width: 32px; height: 32px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--stella-spenta); display: grid; place-items: center; transition: color .1s ease, transform .1s ease; }
.stelle-input .stella svg { width: 24px; height: 24px; }
.stelle-input .stella.on { color: var(--stella); }
.stelle-input .stella:hover { transform: scale(1.12); }
.valutazione-riga { display: flex; align-items: center; gap: .9rem; }

/* ---------- 5. Login ---------- */
.schermo-login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1rem; }
.login-card { width: 100%; max-width: 23rem; }
.login-marca { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-bottom: 2.25rem; }
.monogramma { display: inline-grid; place-items: center; background: #141412; color: #fff; border-radius: 12px; flex-shrink: 0; }
.login-marca .monogramma { width: 56px; height: 56px; border-radius: 14px; }
.login-marca .monogramma svg { width: 27px; height: 27px; }
.login-marca h1 { font-family: var(--serif); font-size: 2.3rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
#form-login label { display: block; margin-bottom: .45rem; text-align: center; font-size: .82rem; font-weight: 600; color: var(--testo2); }
#form-login input { height: 46px; font-size: 1rem; text-align: center; letter-spacing: .08em; }
/* il campo username nascosto (solo per i gestori di password): senza queste regole `input[type=text] { width: 100% }`
   vince su .sr-only e il campo, posizionato in assoluto, allarga la pagina di 1px facendo sforare gli elementi fixed su mobile */
#form-login input.sr-only { top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; }
#form-login .btn { width: 100%; height: 46px; margin-top: .8rem; font-size: .95rem; }
.login-msg { min-height: 1.3rem; margin-top: .8rem; text-align: center; font-size: .85rem; color: var(--testo2); }
.login-msg[data-tipo="errore"] { color: var(--rosso); }
.login-demo { margin-top: 1.6rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--bordo); border-radius: 12px; background: var(--superficie); text-align: center; }
.login-demo p { font-size: .84rem; color: var(--testo2); line-height: 1.55; }
.login-demo strong { color: var(--testo); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; padding: .05rem .4rem; background: var(--superficie2); border: 1px solid var(--bordo); border-radius: 5px; }
.login-demo p span { display: block; margin-top: .25rem; }
.login-demo .btn { width: 100%; margin-top: .8rem; }
.login-contatto { margin-top: .9rem; font-size: .78rem !important; color: var(--testo3) !important; }
.login-contatto a { color: var(--testo2); font-weight: 500; text-underline-offset: .2em; }
.login-contatto a:hover { color: var(--testo); }

.btn-tema {
  position: fixed; top: .9rem; right: .9rem; z-index: 90;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--bordo-forte); border-radius: 50%;
  background: var(--superficie); color: var(--testo2); box-shadow: var(--ombra-1);
  transition: color var(--anim), background var(--anim), transform .1s ease;
}
.btn-tema svg { width: 18px; height: 18px; }
.btn-tema:hover { color: var(--testo); background: var(--superficie2); }
.btn-tema:active { transform: scale(.94); }

/* ---------- 6. Struttura app ---------- */
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: .2rem; padding: 1.4rem .9rem 1.2rem;
  border-right: 1px solid var(--bordo); background: var(--superficie);
}
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; }
.sidebar .brand { padding: 0 .6rem 1.4rem; }
.brand .monogramma { width: 30px; height: 30px; border-radius: 8px; }
.brand .monogramma svg { width: 16px; height: 16px; }
.voce {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .55rem .7rem; border: none; border-radius: var(--raggio-s);
  background: none; color: var(--testo2); font-size: .92rem; font-weight: 500; text-align: left; text-decoration: none;
  transition: background var(--anim), color var(--anim);
}
.voce svg { width: 18px; height: 18px; flex-shrink: 0; }
.voce:hover { background: var(--superficie2); color: var(--testo); }
.voce.attiva { background: var(--superficie2); color: var(--testo); font-weight: 600; }
.sidebar-sep { height: 1px; margin: .6rem .7rem; background: var(--bordo); }
.sidebar-footer { margin-top: auto; }
.topbar { display: none; }
.tabbar { display: none; }

.contenuto { padding: 3.25rem 4.6rem 5rem 2.75rem; max-width: 82rem; width: 100%; }
.pagina { animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.banner-demo {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem; padding: .6rem .9rem;
  border: 1px solid var(--ambra); border-radius: 10px; background: var(--ambra-bg); color: var(--ambra); font-size: .84rem;
}
.banner-demo svg { width: 18px; height: 18px; flex-shrink: 0; }
.banner-demo strong { font-weight: 600; }

.skeleton { display: none; }
.app.caricamento .skeleton { display: block; }
.app.caricamento .pagina { display: none !important; }
.sk-titolo, .sk-riga, .sk-griglia > div { background: linear-gradient(90deg, var(--superficie2) 25%, var(--superficie3) 50%, var(--superficie2) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; }
.sk-titolo { width: 12rem; height: 2.2rem; margin-bottom: .8rem; }
.sk-riga { width: 100%; height: 38px; margin-bottom: 1.6rem; }
.sk-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.3rem 1rem; }
.sk-griglia > div { aspect-ratio: 2 / 3; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- 7. Intestazioni, toolbar, filtri ---------- */
/* Stessa intestazione in ogni pagina: altezza fissa, titolo e controlli a destra centrati sulla stessa linea. */
.intestazione { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; min-height: 44px; margin-bottom: 1.2rem; }
.intestazione h2 { font-family: var(--serif); font-size: 2.1rem; letter-spacing: -.02em; line-height: 1; }
.titolo-nota { margin-left: .5rem; font-family: var(--sans); font-size: .85rem; font-weight: 400; letter-spacing: 0; color: var(--testo3); vertical-align: .25em; }
.sottotitolo { margin-top: .3rem; color: var(--testo2); font-size: .9rem; }
.intestazione .azioni { display: flex; gap: .45rem; flex-wrap: wrap; }
.dash-titolo { font-family: var(--serif); font-size: 1.35rem; margin: 1.6rem 0 .8rem; }
.dash-titolo:first-of-type { margin-top: 0; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: 1.1rem; }
.ordina-wrap { display: inline-flex; gap: .4rem; }
.vista-toggle .ico-elenco { display: none; }
.vista-toggle.vista-elenco .ico-griglia { display: none; }
.vista-toggle.vista-elenco .ico-elenco { display: block; }
.btn-nuovo, .btn-destra { margin-left: auto; }

.contatori { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.contatore {
  display: inline-flex; align-items: center; gap: .3rem; height: 30px; padding: 0 .8rem;
  border: 1px solid var(--bordo); border-radius: 999px; background: var(--superficie);
  color: var(--testo2); font-size: .78rem; font-weight: 500; white-space: nowrap;
  transition: background var(--anim), border-color var(--anim), color var(--anim);
}
.contatore b { color: var(--testo); font-weight: 600; }
.contatore:hover { border-color: var(--testo3); }
.contatore.attivo { background: var(--nero); border-color: var(--nero); color: var(--su-nero); }
.contatore.attivo b { color: inherit; }

.dropdown-filtri { position: relative; }
.conta-filtri { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 .3rem; margin-left: .1rem; border-radius: 999px; background: var(--nero); color: var(--su-nero); font-size: .68rem; font-weight: 600; }
.menu-filtri {
  position: absolute; left: 0; top: calc(100% + .4rem); z-index: 50; width: 17rem; padding: .5rem;
  border: 1px solid var(--bordo); border-radius: 12px; background: var(--superficie); box-shadow: var(--ombra-2);
  animation: apri .14s ease;
}
.menu-item + .menu-item { border-top: 1px solid var(--bordo); }
.fold-btn { display: flex; align-items: center; gap: .45rem; width: 100%; padding: .55rem .5rem; border: none; border-radius: 6px; background: none; color: var(--testo); font-size: .84rem; font-weight: 600; text-align: left; }
.fold-btn svg { width: 13px; height: 13px; color: var(--testo3); transition: transform .18s ease; }
.fold-btn:hover { background: var(--superficie2); }
.menu-item.aperto .fold-btn svg { transform: rotate(90deg); }
.checkbox-group { display: none; flex-direction: column; gap: .05rem; max-height: 11rem; overflow-y: auto; padding: 0 .25rem .45rem; }
.menu-item.aperto .checkbox-group { display: flex; }
.cb-item { padding: .35rem .5rem; border-radius: 6px; font-size: .85rem; }
.cb-item:hover { background: var(--superficie2); }
.menu-azioni { display: flex; justify-content: flex-end; padding-top: .35rem; border-top: 1px solid var(--bordo); }

.barra-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: -.4rem 0 1rem; }
.barra-filtri:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem; height: 28px; padding: 0 .4rem 0 .7rem;
  border: 1px solid var(--bordo); border-radius: 999px; background: var(--superficie2);
  color: var(--testo2); font-size: .78rem; font-weight: 500;
}
.chip button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--testo3); }
.chip button svg { width: 12px; height: 12px; }
.chip button:hover { background: var(--rosso-bg); color: var(--rosso); }
.chip-btn { padding: 0 .75rem; cursor: pointer; }
.chip-btn svg { width: 13px; height: 13px; }
.chip-btn:hover { border-color: var(--testo3); color: var(--testo); }
.chip-azzera { height: 28px; padding: 0 .5rem; border: none; background: none; color: var(--rosso); font-size: .78rem; font-weight: 600; border-radius: 6px; }
.chip-azzera:hover { background: var(--rosso-bg); }

/* ---------- 8. Griglia libri ---------- */
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.3rem 1rem; }
.cop { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--superficie2); border-radius: 8px; }
.cop img { width: 100%; height: 100%; object-fit: cover; }
.cop-vuota { background: linear-gradient(160deg, var(--cop-a), var(--cop-b)); }
.cop-vuota[data-tinta="0"] { --cop-a: #efece4; --cop-b: #e0dccb; }
.cop-vuota[data-tinta="1"] { --cop-a: #e9ecf2; --cop-b: #d5dbe6; }
.cop-vuota[data-tinta="2"] { --cop-a: #f2e9e2; --cop-b: #e3d1c3; }
.cop-vuota[data-tinta="3"] { --cop-a: #e8efe9; --cop-b: #d2e0d4; }
.cop-vuota[data-tinta="4"] { --cop-a: #efe9f0; --cop-b: #e0d2e0; }
.cop-vuota[data-tinta="5"] { --cop-a: #f0e9e0; --cop-b: #e2d2bf; }
.cop-vuota[data-tinta="6"] { --cop-a: #e7efef; --cop-b: #cfe0e0; }
.cop-vuota[data-tinta="7"] { --cop-a: #f0efe8; --cop-b: #e3e0d4; }
.cop-vuota[data-tinta="8"] { --cop-a: #eeeaef; --cop-b: #ddd5e2; }
.cop-vuota[data-tinta="9"] { --cop-a: #f0e9e7; --cop-b: #e3d3cf; }
html.tema-scuro .cop-vuota[data-tinta="0"] { --cop-a: #33312b; --cop-b: #2a2823; }
html.tema-scuro .cop-vuota[data-tinta="1"] { --cop-a: #2c3036; --cop-b: #24272c; }
html.tema-scuro .cop-vuota[data-tinta="2"] { --cop-a: #37302b; --cop-b: #2b2622; }
html.tema-scuro .cop-vuota[data-tinta="3"] { --cop-a: #2c3530; --cop-b: #232b26; }
html.tema-scuro .cop-vuota[data-tinta="4"] { --cop-a: #332c35; --cop-b: #29232b; }
html.tema-scuro .cop-vuota[data-tinta="5"] { --cop-a: #36312a; --cop-b: #2a2620; }
html.tema-scuro .cop-vuota[data-tinta="6"] { --cop-a: #2b3535; --cop-b: #232b2b; }
html.tema-scuro .cop-vuota[data-tinta="7"] { --cop-a: #34332c; --cop-b: #2a2924; }
html.tema-scuro .cop-vuota[data-tinta="8"] { --cop-a: #322f35; --cop-b: #28262b; }
html.tema-scuro .cop-vuota[data-tinta="9"] { --cop-a: #352f2e; --cop-b: #2a2524; }
.cop-segnaposto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: .6rem; color: var(--testo3); text-align: center; }
.cop-segnaposto svg { width: 30%; max-width: 40px; height: auto; opacity: .55; }
.cop-segnaposto span { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cop-mini { width: 32px; border-radius: 4px; }
.cop-mini .cop-segnaposto svg { width: 55%; }

.carta { border-radius: 10px; }
.carta, .lista-libro, .lista-carta { cursor: pointer; transition: transform var(--anim); }
.carta:hover, .lista-libro:hover, .lista-carta:hover { transform: translateY(-3px); }
.cop-wrap { position: relative; border-radius: 8px; overflow: hidden; box-shadow: var(--ombra-1); }
.cop-wrap .cop { border-radius: 8px; }
.cop-wrap img { transition: transform .35s ease, filter .3s ease; }
.segnalibro {
  position: absolute; top: .55rem; left: .55rem; z-index: 3;
  padding: .22rem .55rem; border-radius: 999px;
  background: rgba(255,255,255,.92); color: #1a1a18; box-shadow: 0 1px 4px rgba(20,20,18,.15);
  font-size: .64rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; backdrop-filter: blur(3px);
}
.segnalibro.letto { color: #2a7f52; }
.segnalibro.in_lettura { color: #3565a6; }
.segnalibro.da_leggere { color: #8f6416; }
.hover-info {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  padding: 1rem; background: rgba(20,20,18,.55); color: #fff; text-align: center; opacity: 0; transition: opacity var(--anim); pointer-events: none;
}
.hover-info .t { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hover-info .a { font-size: .78rem; opacity: .85; }
@media (hover: hover) {
  .carta:hover .hover-info, .lista-libro:hover .hover-info { opacity: 1; }
  .carta:hover .cop-wrap img, .lista-libro:hover .cop-wrap img { transform: scale(1.04); }
}
.carta-sotto { display: flex; align-items: center; justify-content: space-between; padding: .5rem .1rem 0; }
.carta-sotto .btn-cuore { width: 28px; height: 28px; }
.carta-sotto .btn-cuore svg { width: 16px; height: 16px; }

/* vista elenco */
.griglia.vista-elenco { display: flex; flex-direction: column; gap: 0; }
.riga {
  display: grid; grid-template-columns: 40px minmax(10rem, 2.2fr) 4rem 6rem 1.3fr 5rem 6.5rem 2rem 8.5rem;
  align-items: center; gap: .9rem; padding: .6rem .5rem; border-bottom: 1px solid var(--bordo);
  cursor: pointer; transition: background var(--anim); border-radius: 6px;
}
.riga > * { min-width: 0; }
.riga:hover { background: var(--superficie2); }
.riga-testata { padding: .3rem .5rem .5rem; color: var(--testo3); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: default; }
.riga-testata:hover { background: none; }
.rg-cop .cop { width: 40px; border-radius: 4px; }
.rg-nome { display: flex; flex-direction: column; gap: .05rem; }
.rg-titolo { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-autore { font-size: .82rem; color: var(--testo2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.rg-meta { color: var(--testo2); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-genere { white-space: normal; }
.virgola { color: var(--testo2); }
.link-filtro { padding: 0; border: none; background: none; color: var(--blu); font-size: inherit; text-align: left; cursor: pointer; }
.link-filtro:hover { text-decoration: underline; text-underline-offset: .18em; color: var(--testo); }
.rg-possesso { display: grid; place-items: center; color: var(--stella-spenta); }
.rg-possesso svg { width: 16px; height: 16px; }
.rg-possesso.si { color: var(--testo); }
.rg-val { display: flex; align-items: center; gap: .35rem; justify-self: end; }
.rg-val .btn-cuore { width: 26px; height: 26px; }
.rg-val .btn-cuore svg { width: 15px; height: 15px; }

.pill { display: inline-flex; align-items: center; gap: .3rem; height: 24px; padding: 0 .6rem; border-radius: 999px; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.pill svg { width: 12px; height: 12px; }
.pill.letto { background: var(--verde-bg); color: var(--verde); }
.pill.in_lettura { background: var(--blu-bg); color: var(--blu); }
.pill.da_leggere { background: var(--ambra-bg); color: var(--ambra); }
.pill.neutra { background: var(--superficie2); color: var(--testo2); }

/* ---------- 9. Diario ---------- */
.diario-anno { display: flex; align-items: baseline; gap: .7rem; margin: 1.8rem 0 .4rem; padding-bottom: .35rem; border-bottom: 1px solid var(--bordo); font-family: var(--serif); font-size: 1.5rem; }
.diario-anno:first-child { margin-top: 0; }
.diario-anno span { font-family: var(--sans); font-size: .78rem; color: var(--testo3); }
.diario-mese { margin: 1.1rem 0 .2rem; font-family: var(--serif); font-size: 1rem; color: var(--testo2); }
.diario-voce {
  display: grid; grid-template-columns: 2.8rem 4.4rem minmax(0, 1fr) auto; align-items: start; gap: 1rem;
  padding: .9rem .3rem; border-bottom: 1px solid var(--bordo); cursor: pointer; border-radius: 8px; transition: background var(--anim);
}
.diario-voce:hover { background: var(--superficie2); }
.diario-data { text-align: right; padding-top: .1rem; }
.diario-data .g { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1; }
.diario-data .m { display: block; margin-top: .15rem; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--testo3); }
.diario-cop .cop { border-radius: 5px; }
.diario-titolo { font-family: var(--serif); font-size: 1.08rem; line-height: 1.25; }
.riletto { display: inline-flex; vertical-align: -2px; margin-right: .3rem; color: var(--testo2); }
.riletto svg { width: 14px; height: 14px; }
.diario-autore { margin-top: .1rem; font-size: .85rem; color: var(--testo2); }
.diario-voto { display: flex; align-items: center; gap: .3rem; margin-top: .45rem; }
.diario-voto .btn-cuore { width: 26px; height: 26px; }
.diario-voto .btn-cuore svg { width: 15px; height: 15px; }
.dl-vuoto { font-size: .78rem; color: var(--testo3); font-style: italic; }
.diario-note { margin-top: .5rem; font-size: .88rem; line-height: 1.5; color: var(--testo); white-space: pre-wrap; }
.diario-azioni { display: flex; gap: .1rem; opacity: 0; transition: opacity var(--anim); }
.diario-voce:hover .diario-azioni, .diario-voce:focus-within .diario-azioni { opacity: 1; }
@media (hover: none) { .diario-azioni { opacity: 1; } }

/* ---------- 10. Liste ---------- */
.liste-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.4rem 1.2rem; }
.lista-carta { border-radius: 10px; }
.lista-ripiano { display: flex; gap: 3px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: var(--superficie2); box-shadow: var(--ombra-1); }
.lista-ripiano .cop { flex: 1; aspect-ratio: auto; height: 100%; border-radius: 0; }
.lista-ripiano-vuoto { flex: 1; display: grid; place-items: center; color: var(--testo3); }
.lista-ripiano-vuoto svg { width: 32px; height: 32px; }
.lista-carta-corpo { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .55rem .1rem 0; }
.lc-titolo { font-family: var(--serif); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-meta { flex-shrink: 0; font-size: .76rem; color: var(--testo2); white-space: nowrap; }

.lista-testa { align-items: flex-start; }
.lista-suggerimento { margin: -.4rem 0 1rem; }
.lista-libri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.3rem 1rem; }
.lista-libro { position: relative; border-radius: 10px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lista-libro img { -webkit-user-drag: none; pointer-events: none; }
.lista-libro.trascinata { opacity: .3; }
.lista-libro.ghost { opacity: .95; transform: scale(1.03) rotate(1.5deg); box-shadow: var(--ombra-3); background: var(--bg); border-radius: 10px; }
.lista-libri.riordino .lista-libro { cursor: grabbing; }
.lista-libri.riordino .lista-libro:hover { transform: none; }
.rank { position: absolute; top: .5rem; left: .5rem; z-index: 3; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 .4rem; border-radius: 999px; background: var(--nero); color: var(--su-nero); font-size: .78rem; font-weight: 700; box-shadow: 0 1px 4px rgba(20,20,18,.3); }
.lista-libro .btn-rimuovi, .lista-libro .maniglia {
  position: absolute; z-index: 4; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: none; border-radius: 50%; background: rgba(20,20,18,.7); color: #fff; opacity: 0; transition: opacity var(--anim), background var(--anim);
}
.lista-libro .btn-rimuovi { top: .5rem; right: .5rem; }
.lista-libro .btn-rimuovi:hover { background: var(--rosso); }
.lista-libro .maniglia { bottom: .5rem; right: .5rem; cursor: grab; touch-action: none; display: none; }
.lista-libro .btn-rimuovi svg, .lista-libro .maniglia svg { width: 14px; height: 14px; }
.lista-libro:hover .btn-rimuovi, .lista-libro:focus-within .btn-rimuovi { opacity: 1; }
@media (hover: none) {
  .lista-libro .btn-rimuovi, .lista-libro .maniglia { opacity: 1; display: grid; }
  .lista-suggerimento { display: none; }
}
.lista-libro-corpo { display: flex; flex-direction: column; padding: .5rem .1rem 0; }
.lista-libro-corpo .t { font-family: var(--serif); font-size: .98rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-libro-corpo .a { font-size: .76rem; color: var(--testo2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* scelte nei modali (aggiungi a lista / picker) */
.scelte { display: flex; flex-direction: column; gap: .35rem; }
.scelta-lista, .picker-libro {
  display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .7rem; text-align: left;
  border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: var(--superficie);
  transition: background var(--anim), border-color var(--anim);
}
.scelta-lista:hover, .picker-libro:hover { background: var(--superficie2); }
.scelta-lista.dentro, .picker-libro.dentro { border-color: var(--verde); background: var(--verde-bg); }
.sl-check { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--bordo-forte); border-radius: 50%; color: transparent; flex-shrink: 0; }
.sl-check svg { width: 13px; height: 13px; }
.scelta-lista.dentro .sl-check { background: var(--verde); border-color: var(--verde); color: #fff; }
.sl-nome { font-weight: 500; font-size: .9rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-meta { font-size: .72rem; color: var(--testo3); white-space: nowrap; }
.pl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-titolo { font-weight: 500; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-autore { font-size: .76rem; color: var(--testo2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-stato { display: inline-flex; align-items: center; gap: .25rem; color: var(--testo3); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.pl-stato svg { width: 15px; height: 15px; }
.picker-libro.dentro .pl-stato { color: var(--verde); }

/* ---------- 11. Dashboard ---------- */
.stat-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-bottom: .7rem; }
.stat-griglia.quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { display: flex; flex-direction: column; width: 100%; min-width: 0; gap: .35rem; min-height: 5.6rem; padding: .85rem 1rem; border: 1px solid var(--bordo); border-radius: 10px; background: var(--superficie); text-align: left; }
.stat.cliccabile { cursor: pointer; transition: border-color var(--anim), background var(--anim); }
.stat.cliccabile:hover { border-color: var(--testo3); }
.stat-label { display: flex; align-items: center; gap: .4rem; color: var(--testo2); font-size: .76rem; font-weight: 500; }
.stat-label svg { width: 14px; height: 14px; color: var(--testo3); }
.stat strong { font-family: var(--serif); font-size: 1.8rem; font-weight: 500; line-height: 1; }
.stat-sotto { font-size: .72rem; color: var(--testo3); }
.dash-due { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); gap: .7rem; margin-bottom: .7rem; }
.pannello { padding: 1rem 1.15rem 1.1rem; border: 1px solid var(--bordo); border-radius: 10px; background: var(--superficie); }
.pannello-testa { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .7rem; }
.pannello-testa h3 { font-family: var(--serif); font-size: 1.15rem; }
.pannello-testa > span { font-size: .76rem; color: var(--testo3); }
.dash-anno-testa { display: flex; align-items: center; gap: .6rem; margin: 1.6rem 0 .8rem; }
.dash-anno-testa .dash-titolo { margin: 0; }
.dash-anno-testa .sel-btn { font-family: var(--serif); font-size: 1.2rem; height: 36px; padding-left: .7rem; }
.generi { display: flex; flex-direction: column; gap: .3rem; }
.genere-riga { display: grid; width: 100%; grid-template-columns: 7rem 1fr 2rem; align-items: center; gap: .6rem; padding: .3rem .4rem; border: none; border-radius: 6px; background: none; text-align: left; font-size: .84rem; }
.genere-riga:hover { background: var(--superficie2); }
.gr-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-barra { height: 8px; border-radius: 99px; background: var(--superficie2); overflow: hidden; }
.gr-barra span { display: block; height: 100%; border-radius: inherit; background: var(--nero); }
.gr-n { text-align: right; color: var(--testo2); font-size: .8rem; font-variant-numeric: tabular-nums; }
.dash-libri { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; }
#dash-in-lettura-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-libro { display: flex; flex-direction: column; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; padding: 0; border: none; background: none; text-align: left; cursor: pointer; }   /* width/overflow espliciti: Safari non restringe un <button> alla cella della griglia */
.dash-libro .cop { border-radius: 6px; transition: transform var(--anim); }
.dash-libro:hover .cop { transform: translateY(-2px); }
.dash-libro { contain: inline-size; }   /* Safari iOS: la larghezza del bottone la decide solo la griglia, mai il testo */
.dash-libro > span { display: block; width: 100%; max-width: 100%; margin-top: .4rem; min-width: 0; overflow: hidden; }
.dash-libro strong, .dash-libro small { display: block; width: 100%; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-libro strong { font-family: var(--serif); font-size: .88rem; font-weight: 500; }
.dash-libro small { font-size: .72rem; color: var(--testo2); }
.mesi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .35rem; height: 10rem; align-items: end; }
.mese { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.mese-n { height: 1rem; font-size: .7rem; color: var(--testo2); font-variant-numeric: tabular-nums; }
.mese-barra { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 7rem; }
.mese-barra span { display: block; width: min(1.3rem, 65%); border-radius: 4px 4px 2px 2px; background: var(--nero); transition: height .25s ease; }
.mese.futuro .mese-barra span { opacity: .25; }
.mese-nome { margin-top: .3rem; font-size: .66rem; color: var(--testo3); }
.ob-numero { display: flex; align-items: baseline; gap: .35rem; margin: .4rem 0 .6rem; color: var(--testo2); }
.ob-numero strong { font-family: var(--serif); font-size: 2.4rem; font-weight: 500; line-height: 1; color: var(--testo); }
.ob-progress { height: .5rem; overflow: hidden; border-radius: 99px; background: var(--superficie2); }
.ob-progress span { display: block; height: 100%; border-radius: inherit; background: var(--nero); transition: width .3s ease; }
.ob-progress span.completa { background: var(--verde); }
.ob-testo { margin-top: .5rem; font-size: .8rem; color: var(--testo2); }
.ob-form { margin-top: 1rem; }
.ob-form label { display: block; margin-bottom: .35rem; font-size: .76rem; color: var(--testo2); }
.ob-form div { display: flex; gap: .45rem; }
.ob-form input { width: 5.5rem; height: 36px; }
.ob-form .btn { height: 36px; }

/* ---------- 12. Modali ---------- */
.velo {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem;
  background: var(--velo); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .18s ease;
}
.velo.aperto { opacity: 1; }
.modale {
  display: flex; flex-direction: column; width: 100%; max-width: 36rem; max-height: min(92vh, 92dvh);
  border-radius: var(--raggio); background: var(--superficie); box-shadow: var(--ombra-3);
  transform: translateY(10px) scale(.985); transition: transform .18s ease; margin: 0;
}
.velo.aperto .modale { transform: none; }
.modale-piccola { max-width: 26rem; }
.modale-citazioni { max-width: 38rem; }
.modale-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.5rem .6rem; flex-shrink: 0; }
.modale-testa h2 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; }
.modale-sottotitolo { margin-top: .2rem; font-size: .82rem; color: var(--testo2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modale-testa .btn-icona { margin: -.3rem -.5rem 0 0; }
.modale-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: .4rem 1.5rem 1rem; overscroll-behavior: contain; }
.modale-azioni { display: flex; justify-content: flex-end; gap: .5rem; padding: .9rem 1.5rem 1.3rem; border-top: 1px solid var(--bordo); flex-shrink: 0; }
.modale-azioni .btn { min-width: 6rem; }
.modale-cerca { margin: .2rem 1.5rem .6rem; flex-shrink: 0; }
.conferma { padding: 1.4rem 1.5rem 1.3rem; }
.conferma h2 { font-family: var(--serif); font-size: 1.35rem; margin-bottom: .4rem; }
.conferma p { color: var(--testo2); font-size: .9rem; line-height: 1.5; }
.conferma .modale-azioni { padding: 1.2rem 0 0; border-top: none; }
.sheet-menu { max-width: 22rem; gap: .2rem; padding: .7rem; }
.sheet-menu .voce { padding: .8rem .9rem; font-size: .95rem; }
.sheet-menu .btn { margin-top: .4rem; }

.sezione-form { margin: 0 0 .6rem; padding: 0; border: none; min-width: 0; }
.sezione-form legend { padding: 0; margin-bottom: .7rem; font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--testo3); }
.sezione-form + .sezione-form { padding-top: .9rem; border-top: 1px solid var(--bordo); }

.copertina-upload { display: flex; align-items: flex-start; gap: .9rem; }
.anteprima { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; width: 84px; height: 126px; flex-shrink: 0; overflow: hidden; border: 1px dashed var(--bordo-forte); border-radius: 6px; background: var(--superficie2); color: var(--testo3); font-size: .66rem; text-align: center; }
.anteprima svg { width: 22px; height: 22px; }
.anteprima img { width: 100%; height: 100%; object-fit: cover; }
.copertina-azioni { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.copertina-azioni .bottoni { display: flex; flex-wrap: wrap; gap: .4rem; }
.copertina-status { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .78rem; color: var(--testo2); }
.copertina-status.errore { color: var(--rosso); }
.copertina-status.ok { color: var(--verde); }
.spinner { width: 14px; height: 14px; border: 2px solid var(--bordo-forte); border-top-color: var(--nero); border-radius: 50%; animation: spin .6s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.copertina-risultati { display: flex; gap: .5rem; margin-top: .6rem; padding-bottom: .3rem; overflow-x: auto; scroll-snap-type: x proximity; }
.cop-risultato { width: 64px; height: 96px; flex-shrink: 0; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 6px; background: var(--superficie2); scroll-snap-align: start; transition: border-color var(--anim), transform var(--anim); }
.cop-risultato img { width: 100%; height: 100%; object-fit: cover; }
.cop-risultato:hover { transform: scale(1.05); border-color: var(--testo3); }
.cop-risultato.selezionata { border-color: var(--nero); }

.citazioni-lista { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1rem; }
.citazione { padding: .8rem .95rem .6rem; border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: var(--superficie2); }
.citazione p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.45; white-space: pre-wrap; }
.citazione footer { display: flex; align-items: center; justify-content: space-between; margin-top: .3rem; }
.citazione cite { font-style: normal; font-size: .76rem; color: var(--testo2); }
.citazione-nuova { padding-top: .9rem; border-top: 1px solid var(--bordo); }
.citazione-nuova .btn { width: 100%; }

.dati-blocco { padding: .9rem 0; border-bottom: 1px solid var(--bordo); }
.dati-blocco:first-child { padding-top: .3rem; }
.dati-blocco h3 { font-size: .92rem; font-weight: 600; margin-bottom: .25rem; }
.dati-blocco p { margin-bottom: .6rem; font-size: .84rem; color: var(--testo2); line-height: 1.5; }
.dati-anteprima { margin-top: .7rem; padding: .65rem .8rem; border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: var(--superficie2); font-size: .82rem; line-height: 1.5; }
.dati-anteprima span { color: var(--testo2); }
.dati-stato { display: flex; align-items: center; gap: .4rem; margin-top: .9rem; font-size: .84rem; color: var(--testo2); line-height: 1.5; }
.dati-stato.ok { color: var(--verde); }
.dati-stato.errore { color: var(--rosso); }
.dati-stato.ricerca::before { content: ''; width: 14px; height: 14px; border: 2px solid var(--bordo-forte); border-top-color: var(--nero); border-radius: 50%; animation: spin .6s linear infinite; flex-shrink: 0; }

/* scheda libro */
.velo-dettaglio { padding: 1.25rem; }
.dettaglio-pannello {
  display: flex; flex-direction: column; width: 100%; max-width: 820px; height: min(86vh, 640px);
  border-radius: var(--raggio); background: var(--superficie); box-shadow: var(--ombra-3);
  transform: translateY(10px) scale(.985); transition: transform .18s ease; overflow: hidden;
}
.velo.aperto .dettaglio-pannello { transform: none; }
.dettaglio-bar { display: flex; align-items: center; justify-content: space-between; padding: .55rem .6rem 0; flex-shrink: 0; }
.dettaglio-nav, .dettaglio-azioni { display: inline-flex; align-items: center; gap: .05rem; }
.dettaglio-conta { min-width: 3.2rem; text-align: center; font-size: .72rem; font-weight: 600; color: var(--testo3); font-variant-numeric: tabular-nums; }
.dettaglio-sep { width: 1px; height: 18px; margin: 0 .35rem; background: var(--bordo); }
.dettaglio-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dett-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.8rem; padding: .6rem 2rem 1.8rem; }
.dett-poster { align-self: start; position: sticky; top: .6rem; width: 200px; }   /* la larghezza viene ricalcolata via JS in base all'altezza della scheda */
.dett-poster .cop { border-radius: 8px; box-shadow: 0 6px 20px rgba(20,20,18,.16); }
.dett-meta .pill { height: 22px; font-size: .64rem; }
.dett-info { min-width: 0; padding-top: .15rem; }
.dett-info h2 { font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.dett-autore { display: inline-block; margin-top: .2rem; padding: 0; border: none; background: none; color: var(--testo2); font-size: 1.1rem; cursor: pointer; text-align: left; }
.dett-autore:hover { color: var(--testo); text-decoration: underline; text-underline-offset: .2em; }
.dett-voto { display: flex; align-items: center; gap: .25rem; margin: .6rem 0 .5rem; }
.dett-voto .stelle-grandi svg { width: 19px; height: 19px; }
.non-valutato { font-size: .85rem; color: var(--testo3); font-style: italic; }
.dett-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem; font-size: .92rem; color: var(--testo2); line-height: 1.5; }
.dett-meta i { font-style: normal; color: var(--testo3); }
.dett-meta .link-filtro { color: var(--testo2); }
.dett-meta .link-filtro:hover { color: var(--testo); }
.dett-possesso { display: inline-flex; align-items: center; gap: .25rem; }
.dett-possesso svg { width: 12px; height: 12px; }
.dett-sezione { margin-top: 1.3rem; }
.dett-sezione header:last-child { margin-bottom: 0; }
.dett-mostra { margin-top: .3rem; }
.dett-sezione header { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.dett-sezione h3 { flex-shrink: 0; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--testo3); }
.dett-sezione h3 b { margin-left: .3rem; font-weight: 500; color: var(--testo2); }
.dett-sezione .filo { flex: 1; height: 1px; background: var(--bordo); }
.dett-azione { display: inline-flex; align-items: center; gap: .2rem; padding: .15rem .35rem; border: none; border-radius: 5px; background: none; color: var(--testo2); font-size: .84rem; font-weight: 500; }
.dett-azione svg { width: 13px; height: 13px; }
.dett-azione:hover { color: var(--testo); background: var(--superficie2); }
.dett-testo { font-size: .96rem; line-height: 1.65; white-space: pre-wrap; }
.dett-vuoto { font-size: .82rem; color: var(--testo3); }
.dett-letture { list-style: none; margin: 0; padding: 0; }
.dett-letture li { display: grid; grid-template-columns: auto 16px 1fr auto; align-items: center; gap: .3rem .6rem; padding: .55rem 0; border-bottom: 1px solid var(--bordo); }
.dett-letture li:last-child { border-bottom: none; }
.dl-data { font-size: .94rem; font-weight: 500; white-space: nowrap; }
.dett-letture .riletto { margin: 0; color: var(--testo3); }
.dett-letture .riletto svg { width: 13px; height: 13px; }
.dl-vuoto { font-size: .76rem; color: var(--testo3); font-style: italic; }
.dl-azioni { display: flex; gap: 0; opacity: 0; transition: opacity var(--anim); }
.dett-letture li:hover .dl-azioni, .dett-letture li:focus-within .dl-azioni { opacity: 1; }
@media (hover: none) { .dl-azioni { opacity: 1; } }
.dl-azioni .btn-icona { width: 26px; height: 26px; }
.dl-azioni .btn-icona svg { width: 14px; height: 14px; }
.dl-note { grid-column: 1 / -1; margin-top: -.15rem; padding-bottom: .15rem; font-size: .9rem; line-height: 1.5; color: var(--testo2); white-space: pre-wrap; }
.dett-citazioni { display: flex; flex-direction: column; gap: .4rem; }
.dett-citazioni blockquote { margin: 0; padding: .1rem 0 .1rem .9rem; border-left: 2px solid var(--bordo-forte); font-family: var(--serif); font-size: 1.08rem; line-height: 1.45; }
.dett-citazioni cite { display: block; margin-top: .15rem; font-family: var(--sans); font-style: normal; font-size: .72rem; color: var(--testo3); }
.dett-citazioni .dett-azione { align-self: flex-start; }
.dett-liste { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---------- 13. Toast ---------- */
.toast-box { position: fixed; left: 50%; bottom: calc(1.2rem + var(--tabbar) + env(safe-area-inset-bottom)); z-index: 500; display: flex; flex-direction: column; align-items: center; gap: .4rem; transform: translateX(-50%); pointer-events: none; width: min(92vw, 30rem); }
.toast { display: flex; align-items: center; gap: .55rem; padding: .65rem .95rem; border-radius: 10px; background: var(--nero); color: var(--su-nero); font-size: .86rem; box-shadow: var(--ombra-2); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; pointer-events: auto; cursor: pointer; max-width: 100%; }
.toast svg { width: 16px; height: 16px; flex-shrink: 0; }
.toast.visibile { opacity: 1; transform: none; }
.toast-ok svg { color: #7cd19b; }
.toast-errore svg { color: #f07a6d; }
html.tema-scuro .toast-ok svg { color: #2a7f52; }
html.tema-scuro .toast-errore svg { color: #c9362a; }

/* ---------- 14. Stati vuoti ---------- */
.vuoto { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 3.5rem 1rem; text-align: center; }
.vuoto-icona { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: .5rem; border-radius: 16px; background: var(--superficie2); color: var(--testo3); }
.vuoto-icona svg { width: 26px; height: 26px; }
.vuoto h3 { font-family: var(--serif); font-size: 1.3rem; }
.vuoto p { max-width: 26rem; color: var(--testo2); font-size: .9rem; }
.vuoto .btn { margin-top: .9rem; }

@keyframes apri { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes scorri-sx { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes scorri-dx { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

/* ---------- 15. Responsive ----------
   Fasce: ≤1180 solo l'elenco perde due colonne · ≤1024 tablet (sidebar a sole icone)
   · ≤900 tablet stretto (FAB al posto dei pulsanti principali) · ≤720 telefono (tabbar, fogli dal basso)
   · ≤480 telefono stretto · ≤380 molto stretto. Sopra i 1180px nulla cambia. */
@media (max-width: 1180px) {
  .riga { grid-template-columns: 40px minmax(10rem, 2.2fr) 6rem 1.3fr 6.5rem 2rem 8.5rem; }
  .rg-anno, .rg-pagine { display: none; }
}

/* ===== Tablet: la sidebar diventa una colonna di sole icone ===== */
@media (max-width: 1024px) {
  :root { --sidebar: 76px; }
  .sidebar { padding: 1.1rem .7rem 1rem; }
  .sidebar .brand { justify-content: center; gap: 0; padding: 0 0 1.1rem; font-size: 0; }
  .sidebar .brand .monogramma { width: 36px; height: 36px; border-radius: 10px; }
  .sidebar .brand .monogramma svg { width: 19px; height: 19px; }
  .sidebar .voce { justify-content: center; gap: 0; padding: .7rem 0; font-size: 0; }
  .sidebar .voce svg { width: 22px; height: 22px; }
  .sidebar-sep { margin: .5rem .4rem; }
  /* il pulsante del tema scende in fondo alla colonna delle icone, sopra "Esci", così non copre i contatori */
  .btn-tema { top: auto; right: auto; bottom: 4.6rem; left: 18px; box-shadow: none; }
  /* nella schermata di accesso non c'è né colonna né topbar: resta in alto a destra come su desktop */
  #schermo-login:not(.nascosto) + .btn-tema { top: .9rem; right: .9rem; bottom: auto; left: auto; box-shadow: var(--ombra-1); }
  .contenuto { padding: 2.4rem 2.2rem 5rem; }
  .sel-prefisso { display: none; }
  .griglia, .lista-libri, .sk-griglia { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem .85rem; }
  .riga { grid-template-columns: 40px minmax(8rem, 2fr) 1.3fr 6.5rem 2rem 8.5rem; }
  .rg-tipologia { display: none; }
  .dash-libri { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dett-layout { gap: 1.5rem; padding: .8rem 1.6rem 1.6rem; }   /* la colonna della copertina resta "auto": la larghezza la decide il JS */
}
@media (max-width: 900px) {
  .contenuto { padding: 1.8rem 1.8rem 5.5rem; }
  .griglia, .lista-libri, .sk-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dash-due { grid-template-columns: 1fr; }
  .dash-libri, #dash-in-lettura-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* "in lettura adesso" non è più in una colonna stretta */
  .btn-nuovo, .btn-destra { display: none; }
  .fab { display: grid; }
  .riga { grid-template-columns: 40px minmax(0, 1fr) 6.5rem 2rem 8.5rem; }
  .rg-genere { display: none; }
}

/* ===== Telefono ===== */
@media (max-width: 720px) {
  :root { --tabbar: 62px; }
  /* una colonna, due righe: la topbar prende solo la sua altezza, il resto va al contenuto
     (altrimenti nelle pagine corte lo spazio in eccesso si divide tra le righe e il contenuto scende a metà schermo) */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: start; }
  .sidebar { display: none; }
  .topbar { display: flex; align-items: center; height: 66px; padding: 0 1.1rem; border-bottom: 1px solid var(--bordo); background: var(--superficie); position: sticky; top: 0; z-index: 40; }
  .topbar .brand { font-size: 1.5rem; }
  .topbar .brand .monogramma { width: 34px; height: 34px; border-radius: 9px; }
  .topbar .brand .monogramma svg { width: 18px; height: 18px; }
  .btn-tema { top: 13px; right: 1rem; bottom: auto; left: auto; box-shadow: var(--ombra-1); }
  #schermo-login:not(.nascosto) + .btn-tema { top: 1rem; right: 1rem; }
  .contenuto { padding: 1.3rem 1.1rem calc(var(--tabbar) + 3.5rem + env(safe-area-inset-bottom)); }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--bordo); background: var(--superficie);
  }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: 0; border: none; background: none; color: var(--testo3); font-size: .64rem; font-weight: 500; }
  .tab svg { width: 22px; height: 22px; }
  .tab.attiva { color: var(--testo); font-weight: 600; }

  /* niente zoom automatico di Safari iOS sui campi (scatta sotto i 16px) */
  input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="password"], textarea { font-size: 16px; }

  .intestazione h2 { font-size: 1.75rem; }
  .intestazione { margin-bottom: 1rem; }
  .contatori { justify-content: flex-start; gap: .35rem; width: 100%; }   /* vanno a capo: niente scorrimento laterale */
  .contatore { height: 28px; padding: 0 .65rem; font-size: .74rem; }

  /* toolbar: ricerca su una riga, controlli sulla successiva con la select che si allarga */
  .toolbar { gap: .5rem; }
  .campo-cerca { flex-basis: 100%; min-width: 0; }
  .ordina-wrap { flex: 1; min-width: 0; }
  .ordina-wrap .sel-btn { flex: 1; min-width: 0; max-width: none; }
  .menu-filtri { left: 0; width: min(17rem, calc(100vw - 2.2rem)); }

  .griglia, .lista-libri, .sk-griglia { gap: 1rem .7rem; }

  /* dashboard */
  /* dashboard compatta: riquadri bassi, statistiche su 3 e 4 colonne, copertine piccole */
  .dash-titolo { font-size: 1.15rem; margin: 1.1rem 0 .55rem; }
  .dash-anno-testa { margin: 1.1rem 0 .55rem; }
  .dash-anno-testa .sel-btn { font-size: 1.05rem; height: 32px; }
  .stat-griglia, .stat-griglia.quattro, #dash-libreria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin-bottom: .4rem; }
  .stat-griglia.quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat { min-height: 0; padding: .5rem .55rem .55rem; gap: .15rem; border-radius: 8px; }
  .stat strong { font-size: 1.25rem; }
  .stat-label { font-size: .64rem; line-height: 1.2; }
  .stat-label svg { display: none; }
  .stat-sotto { display: none; }
  .dash-due { gap: .4rem; margin-bottom: .4rem; }
  .pannello { padding: .75rem .85rem .8rem; border-radius: 8px; }
  .pannello-testa { margin-bottom: .45rem; }
  .pannello-testa h3 { font-size: 1.02rem; }
  .generi { gap: .1rem; }
  .genere-riga { grid-template-columns: 5.5rem 1fr 1.6rem; gap: .5rem; padding: .18rem .3rem; font-size: .78rem; }
  .genere-riga:nth-child(n+6) { display: none; }   /* solo i primi 5 generi */
  .gr-barra { height: 6px; }
  .dash-libri, #dash-in-lettura-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
  .dash-libro strong { font-size: .78rem; }
  .dash-libro small { font-size: .66rem; }
  .mesi { gap: .15rem; height: 6.5rem; }
  .mese-barra { height: 4.5rem; }
  .mese-n { font-size: .64rem; }
  .mese-nome { font-size: .56rem; }
  .obiettivo .ob-numero { margin: .1rem 0 .4rem; }
  .obiettivo .ob-numero strong { font-size: 1.8rem; }
  .ob-testo { margin-top: .35rem; font-size: .74rem; }
  .ob-form { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .6rem; }
  .ob-form label { margin: 0; }
  .ob-form input { width: 4.5rem; height: 32px; }
  .ob-form .btn { height: 32px; }
  #dash-recenti-sez { margin-bottom: 0; }

  /* liste: due colonne centrate (una lista sola resta al centro) */
  .liste-griglia { grid-template-columns: repeat(2, minmax(0, 11.5rem)); justify-content: center; gap: 1.1rem .9rem; }

  /* diario: azioni in alto a destra sulla stessa riga */
  .diario-voce { grid-template-columns: 2.2rem 3.2rem minmax(0, 1fr) auto; gap: .6rem; padding: .8rem .2rem; }
  .diario-azioni { margin: -.3rem -.3rem 0 0; opacity: 1; }
  .diario-azioni .btn-icona { width: 30px; height: 30px; }
  .diario-azioni .btn-icona svg { width: 16px; height: 16px; }
  .diario-data .g { font-size: 1.3rem; }
  .diario-titolo { font-size: 1rem; }

  /* dettaglio lista: modifica/elimina a sola icona, "aggiungi" prende lo spazio */
  .lista-testa .azioni { width: 100%; }
  .lista-testa .azioni #lista-modifica, .lista-testa .azioni #lista-elimina { flex: 0 0 38px; width: 38px; padding: 0; gap: 0; font-size: 0; }
  .lista-testa .azioni #lista-aggiungi { flex: 1; }

  /* vista elenco compatta */
  .riga { grid-template-columns: 40px minmax(0, 1fr) auto; gap: .7rem; padding: .55rem .3rem; }
  .rg-possesso, .rg-stato, .riga-testata { display: none; }
  .rg-val { gap: .1rem; }

  /* modali come fogli dal basso */
  .velo { place-items: end center; padding: 0; }
  .modale, .dettaglio-pannello { max-width: none; max-height: min(94vh, 94dvh); border-radius: 18px 18px 0 0; transform: translateY(24px); }
  .modale-testa { padding: 1.1rem 1.15rem .5rem; }
  .modale-scroll { padding: .3rem 1.15rem .9rem; }
  .modale-azioni { padding: .75rem 1.15rem calc(1rem + env(safe-area-inset-bottom)); }
  .modale-azioni .btn { flex: 1; min-width: 0; }
  .modale-cerca { margin: .2rem 1.15rem .5rem; }
  .conferma { padding: 1.2rem 1.15rem calc(1.1rem + env(safe-area-inset-bottom)); }
  .sheet-menu { padding: .7rem .7rem calc(.7rem + env(safe-area-inset-bottom)); }
  .riga-campi { grid-template-columns: 1fr; gap: 0; }
  .riga-campi-stretta { grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
  .copertina-upload { gap: .7rem; }
  .anteprima { width: 70px; height: 105px; }
  .toast-box { width: calc(100vw - 2rem); }

  /* scheda libro a tutto schermo: barra in alto (avanti/indietro, chiudi), copertina e titolo centrati,
     dati come etichette, sezioni in riquadri, azioni principali con etichetta in una barra in fondo */
  .velo-dettaglio { padding: 0; }
  .dettaglio-pannello {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100dvh; max-height: none; border-radius: 0; transform: translateY(24px);
  }
  .dettaglio-bar, .dettaglio-azioni { display: contents; }
  .dettaglio-sep { display: none; }
  .dettaglio-nav { grid-row: 1; grid-column: 1 / 4; padding: .45rem 0 .45rem .4rem; }
  .dettaglio-nav .btn-icona { width: 40px; height: 40px; }
  .dettaglio-conta { font-size: .78rem; }
  #dettaglio-chiudi { grid-row: 1; grid-column: 4; justify-self: end; align-self: center; width: 40px; height: 40px; margin-right: .5rem; }
  .dettaglio-scroll { grid-row: 2; grid-column: 1 / -1; }
  #dettaglio-modifica, #dettaglio-logga, #dettaglio-lista, #dettaglio-elimina {
    grid-row: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    width: auto; height: auto; padding: .55rem 0 calc(.55rem + env(safe-area-inset-bottom)); border-radius: 0; border-top: 1px solid var(--bordo);
    color: var(--testo2); font-size: .66rem; font-weight: 500; background: var(--superficie);
  }
  #dettaglio-modifica svg, #dettaglio-logga svg, #dettaglio-lista svg, #dettaglio-elimina svg { width: 22px; height: 22px; }
  #dettaglio-modifica::after, #dettaglio-logga::after, #dettaglio-lista::after, #dettaglio-elimina::after { content: attr(title); }
  #dettaglio-elimina { color: var(--rosso); }
  .dett-layout { display: block; padding: .4rem 1.1rem 1.6rem; }
  .dett-poster { position: static; width: 52%; max-width: 190px; margin: 0 auto .9rem; }
  .dett-poster .cop { height: auto; aspect-ratio: 2 / 3; border-radius: 10px; box-shadow: 0 12px 28px rgba(20,20,18,.22); }
  .dett-info { padding: 0; text-align: center; }
  .dett-info h2 { font-size: 1.6rem; line-height: 1.15; }
  .dett-autore { display: block; margin: .25rem auto 0; font-size: 1rem; }
  .dett-voto { justify-content: center; margin: .6rem 0 .8rem; }
  .dett-meta { justify-content: center; gap: .4rem; font-size: .8rem; }
  .dett-meta i { display: none; }
  .dett-meta > span, .dett-meta > button.link-filtro {
    display: inline-flex; align-items: center; height: 26px; padding: 0 .65rem;
    border: 1px solid var(--bordo); border-radius: 999px; background: var(--superficie); color: var(--testo2); font-size: .76rem; font-weight: 500;
  }
  .dett-meta .pill { height: 26px; padding: 0 .65rem; font-size: .64rem; }
  .dett-meta .virgola { display: none; }
  .dett-meta > span .virgola + .link-filtro::before { content: '·'; margin: 0 .35rem; color: var(--testo3); }
  .dettaglio-scroll:focus-visible { outline: none; }
  .dett-layout.entra-da-destra { animation: scorri-sx .22s ease; }
  .dett-layout.entra-da-sinistra { animation: scorri-dx .22s ease; }
  .dett-possesso svg { width: 12px; height: 12px; margin-right: .1rem; }
  .dett-sezione { margin-top: .75rem; padding: .85rem 1rem .9rem; border: 1px solid var(--bordo); border-radius: 12px; background: var(--superficie); text-align: left; }
  .dett-sezione:first-of-type { margin-top: 1.4rem; }
  .dett-sezione header { margin-bottom: .4rem; }
  .dett-sezione .filo { display: none; }
  .dett-sezione h3 { flex: 1; }
  .dett-letture li { grid-template-columns: auto 16px 1fr auto; gap: .3rem .5rem; padding: .5rem 0; }
  .dett-letture li:first-of-type { padding-top: .2rem; }
  .dl-data { font-size: .9rem; }
  .dett-testo { font-size: .93rem; }
  .dett-citazioni blockquote { font-size: 1rem; }

  /* menu "Altro": foglio stile action sheet, voci raggruppate in un riquadro e "Chiudi" separato */
  #velo-altro .sheet-menu { max-width: none; padding: 0 .75rem calc(.75rem + env(safe-area-inset-bottom)); gap: 0; background: transparent; box-shadow: none; }
  #velo-altro .voce { justify-content: flex-start; gap: .85rem; padding: 0 1.1rem; height: 54px; border-radius: 0; background: var(--superficie); color: var(--testo); font-size: .95rem; font-weight: 500; }
  #velo-altro .voce svg { width: 20px; height: 20px; color: var(--testo2); }
  #velo-altro .voce + .voce { border-top: 1px solid var(--bordo); }
  #velo-altro .voce:first-child { border-radius: 14px 14px 0 0; }
  #velo-altro .voce:nth-last-child(2) { border-radius: 0 0 14px 14px; }
  #velo-altro .voce.btn-esci { color: var(--rosso); }
  #velo-altro .voce.btn-esci svg { color: var(--rosso); }
  #velo-altro .btn { height: 50px; margin-top: .6rem; border: none; border-radius: 14px; background: var(--superficie); font-size: .95rem; font-weight: 600; }
}
@media (max-width: 480px) {
  .griglia, .lista-libri, .sk-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem .5rem; }
  .carta-sotto { padding-top: .3rem; padding-right: 0; }
  .stelle-carta { gap: 0; }
  .stelle-carta svg { width: 11px; height: 11px; }
  .carta-sotto .btn-cuore { width: 24px; height: 24px; }
  .carta-sotto .btn-cuore svg { width: 14px; height: 14px; }
  .segnalibro { font-size: .5rem; padding: .14rem .38rem; top: .3rem; left: .3rem; letter-spacing: .03em; }
  .cop-segnaposto span { display: none; }
  .lista-libro-corpo .t { font-size: .78rem; }
  .lista-libro-corpo .a { font-size: .64rem; }
  .rank { min-width: 21px; height: 21px; font-size: .64rem; top: .3rem; left: .3rem; }
  .lista-libro .btn-rimuovi, .lista-libro .maniglia { width: 24px; height: 24px; }
  .lista-carta-corpo { flex-direction: column; align-items: flex-start; gap: .05rem; }
  .lc-titolo { font-size: .95rem; max-width: 100%; }
  /* "Filtra" a sola icona (resta il contatore, che è in rem e non risente del font-size 0) */
  #btn-filtra { padding: 0 .6rem; gap: .2rem; font-size: 0; }
  #btn-filtra > span:first-of-type { display: none; }
  .login-card { max-width: 100%; }
  .dett-info h2 { font-size: 1.45rem; }
}

@media (max-width: 380px) {
  .tab span { font-size: .58rem; }
  .contenuto { padding-left: .9rem; padding-right: .9rem; }
  .griglia, .lista-libri, .sk-griglia { gap: .8rem .5rem; }
}
/* telefono in orizzontale: i fogli usano tutta l'altezza */
@media (max-width: 1024px) and (max-height: 500px) {
  .modale, .dettaglio-pannello { max-height: 100dvh; height: auto; border-radius: 0; }
  .dettaglio-pannello { height: 100dvh; }
}