/* Librarium · design "Biblioteca Mia" — carta, inchiostro, verde bosco, legno di noce.
   Una sola azione forte per schermata (terracotta). Ombre calde e lunghe, mai grigie.
   Gettoni in un solo posto: chiaro (valori esatti del concept) e scuro (caldo, contrasto ≥ 4.5:1 testo, ≥ 3:1 controlli).
   Le pagine (libro, scansione, libreria, trova, amici) hanno CSS propri che usano questi gettoni. */

/* --- caratteri ------------------------------------------------------------------------
   DM Serif Display (titoli, numeri) e Manrope 500/700/800 (interfaccia), serviti dallo stesso sito.
   Le regole @font-face stanno in /static/fonts/fonts.css, scritto da tools/fetch_fonts.sh solo per i file
   davvero scaricati: così senza i caratteri non parte nessuna richiesta a vuoto (404) e si usano
   le riserve qui sotto (Lora/Georgia, Inter/system-ui). */
:root {
  /* palette del concept (valori esatti) */
  --carta: #F5EFE4;            /* sfondo */
  --avorio: #FFFDF8;           /* card */
  --pergamena: #EDE4D3;        /* campi, chip, pulsanti secondari */
  --inchiostro: #231A14;       /* testo */
  --seppia: #5E5248;           /* testo secondario */
  --verde: #1E4434;            /* primario: conferma, naviga, barra */
  --verde-2: #123024;
  --verde-ink: #F6EFE4;        /* testo su verde */
  --terracotta: #C25A2E;       /* l'unica azione forte della schermata */
  --terracotta-2: #AE4C23;
  --terracotta-ink: #FFFFFF;
  --terracotta-btn: #B9552B;   /* fondo dei pulsanti con testo: bianco ≥ 4.5:1 (#C25A2E dà 4.4:1) */
  --terracotta-text: #A4491F;  /* numeri e occhielli in terracotta: ≥ 4.5:1 su avorio, carta, pergamena e tinte tenui */
  --albicocca: #F2B98C;        /* accento su scuro */
  --albicocca-ink: #3B2219;
  --noce: #6E4529;             /* solo legno degli scaffali */
  /* stati: sempre colore + pallino + testo */
  --ok-bg: #DCE7DD;    --ok-ink: #1F4F38;      /* Disponibile */
  --order-bg: #F6E6CF; --order-ink: #7A4410;   /* Da ordinare */
  --no-bg: #F4DFDA;    --no-ink: #7E2A1F;      /* Non disponibile */
  /* tinte tenui delle azioni rapide */
  --q-peach: #F3DED0; --q-peach-ink: #A8481F;
  --q-sage: #DCE7DD;  --q-sage-ink: #1E4434;
  --q-sky: #DDE3EA;   --q-sky-ink: #2C4A6B;
  --q-wheat: #F1E4C4; --q-wheat-ink: #6E4D0F;
  --q-rose: #F4DFDA;  --q-rose-ink: #7E2A1F;
  --line: rgb(35 26 20 / .08);
  --line-2: rgb(35 26 20 / .14);
  --field-border: #8E7F6D;     /* bordi dei campi: ≥ 3:1 su avorio */
  --link: #1E4434;
  --focus: #231A14;
  --focus-ring: #F2B98C;
  /* raggi */
  --r-ctl: 14px;
  --r-card: 22px;
  --r-card-l: 28px;
  --r-cover: 3px 7px 7px 3px;
  /* ombre calde e lunghe */
  --shadow: 0 1px 0 rgb(35 26 20 / .03), 0 14px 30px -22px rgb(35 26 20 / .45);
  --shadow-card: var(--shadow);
  --shadow-lift: 0 2px 0 rgb(35 26 20 / .03), 0 26px 44px -24px rgb(35 26 20 / .55);
  --shadow-field: 0 8px 20px -14px rgb(35 26 20 / .4);
  --shadow-verde: 0 24px 40px -22px rgb(30 68 52 / .8);
  --shadow-action: 0 12px 24px -12px rgb(194 90 46 / .9);
  --shadow-cover: 0 1px 0 rgb(0 0 0 / .08), 0 14px 24px -12px rgb(35 26 20 / .6);
  /* movimento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-enter: .7s;
  /* caratteri */
  --serif: "DM Serif Display", "Lora", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.4375rem;
  --step-2: 1.625rem;
  --step-3: 2.125rem;
  --tabbar: 72px;
  --tabbar-gap: 22px;
  --bottom-space: calc(var(--tabbar) + var(--tabbar-gap) + 36px + env(safe-area-inset-bottom));
  --nav-clear: calc(var(--tabbar) + var(--tabbar-gap) + 10px + env(safe-area-inset-bottom)); /* spazio occupato dalla barra in basso */
  --side-w: 248px;
  --row-h: 132px;

  /* --- nomi storici (usati da pagine e CSS esistenti): restano validi --- */
  --paper: var(--carta);
  --surface: var(--avorio);
  --surface-2: var(--pergamena);
  --ink: var(--inchiostro);
  --ink-2: var(--seppia);
  --cloth: var(--verde);
  --cloth-ink: var(--verde-ink);
  --accent: var(--verde);
  --accent-ink: var(--verde-ink);
  --accent-soft: var(--ok-bg);
  --brown: var(--noce);
  --tape: var(--albicocca);
  --tape-ink: var(--albicocca-ink);
  --shared: #2C4A6B;
  --danger: #A3341F;
  --ok: #1F4F38;
  --warn: #7A4410;
  --toast-ok-bg: var(--verde); --toast-ok-ink: var(--verde-ink);
  --toast-err-bg: #8F2D1C; --toast-err-ink: #FFFFFF;
  --wood: #9A7550; --wood-2: #7E5D3D; --wood-back: #EFE6D8;
  --t-sage: var(--q-sage);   --t-sage-ink: var(--q-sage-ink);
  --t-sky: var(--q-sky);     --t-sky-ink: var(--q-sky-ink);
  --t-rose: var(--q-rose);   --t-rose-ink: var(--q-rose-ink);
  --t-peach: var(--q-peach); --t-peach-ink: var(--q-peach-ink);
  --t-lilac: #E7E0EC;        --t-lilac-ink: #5A3E6E;
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  /* grafici: verde bosco, terracotta, blu, ocra, prugna (distinguibili anche con daltonismo) + "Altro" */
  --viz-1: #1E4434; --viz-2: #C25A2E; --viz-3: #3F6E9A; --viz-4: #C9973F; --viz-5: #7A4B6E; --viz-other: #B5A894;
  --viz-bar: #1E4434; --viz-track: #EDE4D3; --viz-grid: #E6DCCB;
  color-scheme: light;
}
/* tema scuro: carta bruciata e noce, non grigio; il verde resta il colore della barra */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --carta: #16120E; --avorio: #211B16; --pergamena: #2E2620; --inchiostro: #F3EBDD; --seppia: #C4B5A3;
    --verde: #1E4434; --verde-2: #275A45; --verde-ink: #F6EFE4;
    --terracotta: #E07A4A; --terracotta-2: #EA8C5F; --terracotta-ink: #1A120C; --terracotta-btn: #E07A4A; --terracotta-text: #EE9468;
    --albicocca: #F2B98C; --albicocca-ink: #2A1810; --noce: #6E4529;
    --ok-bg: #1F3A2C; --ok-ink: #A9D9BC; --order-bg: #3D2C17; --order-ink: #F0C48A; --no-bg: #43231D; --no-ink: #F2A797;
    --q-peach: #3A2418; --q-peach-ink: #F2A27A; --q-sage: #1F3A2C; --q-sage-ink: #A9D9BC; --q-sky: #1F2A36; --q-sky-ink: #A9C4E4;
    --q-wheat: #372D17; --q-wheat-ink: #E9C77B; --q-rose: #43231D; --q-rose-ink: #F2A797;
    --line: rgb(243 235 221 / .09); --line-2: rgb(243 235 221 / .16); --field-border: #8A7B6A;
    --link: #9CCFB4; --focus: #F2B98C; --focus-ring: #F2B98C;
    --shadow: 0 1px 0 rgb(0 0 0 / .25), 0 16px 32px -20px rgb(0 0 0 / .7);
    --shadow-lift: 0 2px 0 rgb(0 0 0 / .3), 0 26px 44px -22px rgb(0 0 0 / .8);
    --shadow-field: 0 8px 20px -14px rgb(0 0 0 / .7);
    --shadow-verde: 0 24px 40px -22px rgb(0 0 0 / .85);
    --shadow-action: 0 12px 24px -12px rgb(224 122 74 / .55);
    --shadow-cover: 0 1px 0 rgb(0 0 0 / .2), 0 14px 24px -12px rgb(0 0 0 / .8);
    --shared: #A9C4E4; --danger: #F2A797; --ok: #A9D9BC; --warn: #F0C48A;
    --toast-ok-bg: #A9D9BC; --toast-ok-ink: #0E1A12; --toast-err-bg: #F2A797; --toast-err-ink: #2A0B08;
    --wood: #6E5238; --wood-2: #574029; --wood-back: #2A231C;
    --t-lilac: #2E2738; --t-lilac-ink: #C6AEE6;
    --viz-1: #6FB894; --viz-2: #E07A4A; --viz-3: #7FA8D6; --viz-4: #D9AE55; --viz-5: #C08AB4; --viz-other: #6E655A;
    --viz-bar: #6FB894; --viz-track: #2E2620; --viz-grid: #352C24;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --carta: #16120E; --avorio: #211B16; --pergamena: #2E2620; --inchiostro: #F3EBDD; --seppia: #C4B5A3;
  --verde: #1E4434; --verde-2: #275A45; --verde-ink: #F6EFE4;
  --terracotta: #E07A4A; --terracotta-2: #EA8C5F; --terracotta-ink: #1A120C; --terracotta-btn: #E07A4A; --terracotta-text: #EE9468;
  --albicocca: #F2B98C; --albicocca-ink: #2A1810; --noce: #6E4529;
  --ok-bg: #1F3A2C; --ok-ink: #A9D9BC; --order-bg: #3D2C17; --order-ink: #F0C48A; --no-bg: #43231D; --no-ink: #F2A797;
  --q-peach: #3A2418; --q-peach-ink: #F2A27A; --q-sage: #1F3A2C; --q-sage-ink: #A9D9BC; --q-sky: #1F2A36; --q-sky-ink: #A9C4E4;
  --q-wheat: #372D17; --q-wheat-ink: #E9C77B; --q-rose: #43231D; --q-rose-ink: #F2A797;
  --line: rgb(243 235 221 / .09); --line-2: rgb(243 235 221 / .16); --field-border: #8A7B6A;
  --link: #9CCFB4; --focus: #F2B98C; --focus-ring: #F2B98C;
  --shadow: 0 1px 0 rgb(0 0 0 / .25), 0 16px 32px -20px rgb(0 0 0 / .7);
  --shadow-lift: 0 2px 0 rgb(0 0 0 / .3), 0 26px 44px -22px rgb(0 0 0 / .8);
  --shadow-field: 0 8px 20px -14px rgb(0 0 0 / .7);
  --shadow-verde: 0 24px 40px -22px rgb(0 0 0 / .85);
  --shadow-action: 0 12px 24px -12px rgb(224 122 74 / .55);
  --shadow-cover: 0 1px 0 rgb(0 0 0 / .2), 0 14px 24px -12px rgb(0 0 0 / .8);
  --shared: #A9C4E4; --danger: #F2A797; --ok: #A9D9BC; --warn: #F0C48A;
  --toast-ok-bg: #A9D9BC; --toast-ok-ink: #0E1A12; --toast-err-bg: #F2A797; --toast-err-ink: #2A0B08;
  --wood: #6E5238; --wood-2: #574029; --wood-back: #2A231C;
  --t-lilac: #2E2738; --t-lilac-ink: #C6AEE6;
  --viz-1: #6FB894; --viz-2: #E07A4A; --viz-3: #7FA8D6; --viz-4: #D9AE55; --viz-5: #C08AB4; --viz-other: #6E655A;
  --viz-bar: #6FB894; --viz-track: #2E2620; --viz-grid: #352C24;
  color-scheme: dark;
}
/* dimensione del testo scelta in Profilo › Preferenze */
html[data-text="large"] { font-size: 112.5%; }
html[data-text="xlarge"] { font-size: 125%; --row-h: 150px; }
html[data-text="xlarge"] body { line-height: 1.6; }

/* --- base -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: 150px; scroll-padding-top: 76px; background: var(--carta); }
body { margin: 0; background: var(--carta); color: var(--inchiostro); font: 500 var(--step-0)/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-wrap: break-word; }
/* leggibilità: nessun testo tagliato o fuori dallo schermo. Le parole lunghe (titoli, nomi, email, indirizzi)
   vanno a capo invece di allargare la pagina; in italiano con la sillabazione (lang="it"). */
:is(p, li, dd, dt, td, th, figcaption, legend, label, summary, small, .lead, .meta, h1, h2, h3, h4) { hyphens: auto; -webkit-hyphens: auto; }
code, .secret, kbd { overflow-wrap: anywhere; word-break: break-word; }
/* titoli e righe di riepilogo dentro flex/grid: una parola lunghissima (titolo, email, nome di file) va a capo invece di uscire */
:is(h1, h2, h3, h4, summary, dd) { overflow-wrap: anywhere; }
.title { overflow-wrap: break-word; }
a { color: var(--link); font-weight: 700; text-underline-offset: 3px; }
a:hover { color: var(--verde-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a:not(.button):hover { color: var(--inchiostro); } }
:root[data-theme="dark"] a:not(.button):hover { color: var(--inchiostro); }
h1, h2, h3, .title, .brand, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
h1 { font-size: clamp(1.75rem, 6vw + .5rem, 2.75rem); line-height: 1.04; margin: .15em 0 .35em; text-wrap: balance; }
h2 { font-size: var(--step-1); line-height: 1.1; margin: 1.3em 0 .5em; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 1.2rem; line-height: 1.15; margin: 1em 0 .4em; }
h1:focus, h1:focus-visible { outline: none; box-shadow: none; }
p { max-width: 68ch; }
b, strong { font-weight: 800; }
.lead { color: var(--seppia); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.muted { color: var(--seppia); }
.small { font-size: var(--step--1); }
.error { color: var(--danger); font-weight: 700; }
.eyebrow { font: 800 .75rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta-text); margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* una tabella nascosta alla vista (dati dei grafici per i lettori di schermo): la didascalia sta fuori dalla tabella e va nascosta a parte */
table.visually-hidden > caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
table.visually-hidden { table-layout: fixed; }   /* una tabella non si stringe sotto il suo contenuto: così non allarga la pagina */
table.visually-hidden :is(th, td, caption) { white-space: normal; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--avorio); padding: 10px 14px; z-index: 50; border-radius: var(--r-ctl); }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--focus-ring) 60%, transparent); border-radius: 6px; }
::placeholder { color: var(--seppia); opacity: .85; }
::selection { background: color-mix(in srgb, var(--albicocca) 60%, transparent); color: var(--inchiostro); }
[hidden] { display: none !important; }
.noscroll { scrollbar-width: none; }
.noscroll::-webkit-scrollbar { display: none; }

/* --- icone (sprite, tratto 1.8) -------------------------------------------------------- */
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; }
h2 .icon { width: 1em; height: 1em; color: var(--verde); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) h2 .icon { color: var(--link); } }
:root[data-theme="dark"] h2 .icon { color: var(--link); }

/* --- movimento --------------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-6px); } }
@keyframes spine-glow { 0%, 100% { box-shadow: 0 0 0 2px var(--albicocca), 0 0 16px 2px rgb(242 185 140 / .55); } 50% { box-shadow: 0 0 0 2px var(--albicocca), 0 0 30px 8px rgb(242 185 140 / .8); } }
.rise { animation: rise var(--t-enter) var(--ease) both; }
.rise.d1 { animation-delay: .06s; } .rise.d2 { animation-delay: .12s; } .rise.d3 { animation-delay: .18s; } .rise.d4 { animation-delay: .24s; } .rise.d5 { animation-delay: .3s; }

/* --- guscio ------------------------------------------------------------------------ */
#app { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); }
header.top { display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 20px 6px; flex-wrap: wrap; position: sticky; top: 0; z-index: 12;
  min-height: 64px; background: color-mix(in srgb, var(--carta) 88%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px); }
.brand { color: var(--inchiostro); text-decoration: none; font-size: min(1.375rem, 7vw); line-height: 1; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400; }
.brand:hover { color: var(--inchiostro); }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--albicocca); color: var(--verde); flex: none; }
.brand-mark .icon { width: 20px; height: 20px; stroke-width: 1.9; }
.who { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; min-width: 0; }
.who-name { font-size: var(--step--1); color: var(--seppia); font-weight: 700; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1023px) { .who-name { display: none; } }
/* l'avatar con l'iniziale porta al Profilo */
.avatar-btn { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; text-decoration: none; flex: none;
  background: #E8B48A; color: #3B2219; font: 800 1rem/1 var(--sans); letter-spacing: .02em; }
.avatar-btn:hover { color: #3B2219; filter: brightness(1.04); }
.avatar-btn .tab-dot { top: 0; right: 0; }
.avatar { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #E8B48A; color: #3B2219; font: 800 1.4rem/1 var(--sans); flex: none; }
.tab-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 2px var(--carta); }
.netstatus { flex-basis: 100%; display: flex; align-items: center; gap: 8px; font-size: var(--step--1); font-weight: 700; background: var(--pergamena); color: var(--inchiostro);
  padding: 6px 14px; border-radius: 12px; }
.netstatus::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-ink); flex: none; }
html[data-online="false"] .netstatus { background: var(--order-bg); color: var(--order-ink); }
html[data-online="false"] .netstatus::before { background: var(--order-ink); }
/* sulla Home (telefono) il saluto fa da testata: qui resta solo l'eventuale stato della rete */
@media (max-width: 1023px) {
  header.top.on-home { position: static; min-height: 0; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  header.top.on-home > .brand, header.top.on-home > .who { display: none; }
  header.top.on-home:has(.netstatus) { padding: max(10px, env(safe-area-inset-top)) 20px 0; }
}

/* barra delle sezioni: fluttuante in basso, verde bosco, Scansiona al centro */
nav.tabs { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabbar-gap) + env(safe-area-inset-bottom)); z-index: 20; height: var(--tabbar);
  display: flex; align-items: center; justify-content: space-around; padding: 0 6px; border-radius: 28px; background: var(--verde); color: var(--verde-ink);
  box-shadow: 0 20px 40px -14px rgb(30 68 52 / .7); max-width: 560px; margin: 0 auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) nav.tabs { box-shadow: 0 0 0 1px rgb(246 239 228 / .06), 0 20px 40px -14px rgb(0 0 0 / .9); } }
:root[data-theme="dark"] nav.tabs { box-shadow: 0 0 0 1px rgb(246 239 228 / .06), 0 20px 40px -14px rgb(0 0 0 / .9); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 56px; padding: 0 2px; border-radius: 18px;
  color: rgb(246 239 228 / .78); text-decoration: none; font: 700 clamp(12px, .75rem, 13px)/1.2 var(--sans); letter-spacing: 0; flex: 1 1 0; max-width: 92px; }
.tab:hover { color: #F6EFE4; }
.tab .icon { width: 22px; height: 22px; transition: transform .3s var(--ease); }
.tab-pill { display: contents; }
/* l'etichetta non si taglia mai: corpo fisso tra 12 e 13 px (la barra non cresce con «Testo grande»), e sotto i 360 px la barra si allarga */
.tab-label { white-space: nowrap; }
@media (max-width: 359px) { nav.tabs { left: 8px; right: 8px; padding: 0 4px; } .tab { font-size: 12px; } }
.tab[aria-current="page"] { color: #F6EFE4; }
.tab[aria-current="page"] .icon { color: var(--albicocca); }
.tab:focus-visible { outline-color: var(--albicocca); box-shadow: none; }
/* il pulsante Scansiona: rialzato, terracotta, con l'anello del colore della carta */
.tab.tab-scansiona { flex: 0 0 62px; min-width: 62px; width: 62px; height: 62px; border-radius: 22px; background: var(--terracotta); color: var(--terracotta-ink);
  margin-top: -38px; padding: 0; box-shadow: 0 12px 24px -8px rgb(194 90 46 / .7), 0 0 0 6px var(--carta); transition: transform .25s var(--ease), background .2s; }
.tab.tab-scansiona .icon { width: 26px; height: 26px; stroke-width: 2; color: inherit; }
.tab.tab-scansiona .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tab.tab-scansiona:hover { background: var(--terracotta-2); color: var(--terracotta-ink); }
.tab.tab-scansiona:active { transform: scale(.95); }
.tab.tab-scansiona[aria-current="page"] { color: var(--terracotta-ink); }
.tab.tab-scansiona[aria-current="page"] .icon { color: inherit; }
/* barra laterale del computer (nascosta su telefono e tablet) */
.side-brand, .side-links, .side-foot { display: none; }

main { grid-row: 2; padding: 8px 20px var(--bottom-space); width: 100%; max-width: 1268px; margin: 0 auto; min-width: 0; }
main.center, .center { display: grid; place-items: center; min-height: 80dvh; }

@media (min-width: 600px) { main { padding-inline: 28px; } header.top { padding-inline: 28px; } }

/* computer: barra laterale verde bosco come nel concept */
@media (min-width: 1024px) {
  #app { grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: auto 1fr; background: linear-gradient(90deg, var(--verde) var(--side-w), transparent 0); }
  header.top { display: none; }
  nav.tabs { position: sticky; top: 0; left: auto; right: auto; bottom: auto; grid-row: 1 / -1; grid-column: 1; height: 100dvh; max-width: none; margin: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 28px; padding: 28px 18px 22px; border-radius: 0; box-shadow: none; overflow-y: auto; }
  nav.tabs > .tab { display: none; }
  .side-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; color: #F6EFE4; text-decoration: none; font: 400 1.5rem/1 var(--serif); }
  .side-brand:hover { color: #F6EFE4; }
  .side-brand .brand-mark { width: 42px; height: 42px; border-radius: 14px; }
  .side-brand .brand-mark .icon { width: 22px; height: 22px; }
  .side-links { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .side-link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 14px; color: rgb(246 239 228 / .78); text-decoration: none;
    font: 700 .875rem/1.2 var(--sans); transition: background .2s, color .2s; }
  .side-link .icon { width: 20px; height: 20px; }
  .side-link:hover { color: #F6EFE4; background: rgb(246 239 228 / .06); }
  .side-link[aria-current="page"] { background: rgb(246 239 228 / .1); color: #F6EFE4; }
  .side-link[aria-current="page"] .icon { color: var(--albicocca); }
  .side-link:focus-visible { outline-color: var(--albicocca); box-shadow: none; }
  .side-foot { display: grid; gap: 8px; margin-top: auto; }
  .side-me { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; color: #F6EFE4; text-decoration: none; font: 700 .875rem/1.2 var(--sans); position: relative; }
  .side-me:hover { color: #F6EFE4; background: rgb(246 239 228 / .06); }
  .side-me[aria-current="page"] { background: rgb(246 239 228 / .1); }
  .side-me .avatar-btn { width: 38px; height: 38px; font-size: .875rem; }
  .side-me small { display: block; font-weight: 500; font-size: .75rem; color: rgb(246 239 228 / .7); }
  .side-me .tab-dot { top: 6px; left: 38px; box-shadow: 0 0 0 2px var(--verde); }
  .side-me span:last-child { min-width: 0; overflow-wrap: anywhere; }   /* nomi lunghi: vanno a capo, non escono dalla barra */
  .side-sync { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; background: rgb(246 239 228 / .07); font-size: .8125rem; font-weight: 600; color: rgb(246 239 228 / .85); }
  .side-sync i { width: 10px; height: 10px; border-radius: 50%; background: #8FD1A8; flex: none; }
  .side-sync.off i { background: var(--albicocca); }
  :root { --nav-clear: 0px; }
  main { grid-column: 2; grid-row: 1 / -1; padding: clamp(20px, 3vw, 44px); padding-bottom: 56px; }
  .page { max-width: 1180px; margin-inline: auto; }
  .shelf-page { max-width: none; }
}
/* tastiera del telefono aperta: la barra delle sezioni lascia spazio */
html.kbd-open nav.tabs { display: none; }
html.kbd-open .actions.sticky { bottom: 0; }
/* telefono in orizzontale: barra più bassa */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  header.top { position: static; padding-block: 4px; min-height: 0; }
  :root { --tabbar: 56px; --tabbar-gap: 8px; }
  .tab { height: 48px; flex-direction: row; gap: 6px; }
  .tab.tab-scansiona { margin-top: 0; width: 48px; height: 48px; flex-basis: 48px; min-width: 48px; border-radius: 16px; }
}

/* --- controlli ------------------------------------------------------------------- */
button, .button { font: 800 0.9375rem/1.2 var(--sans); border: 0; background: var(--pergamena); color: var(--inchiostro); border-radius: var(--r-ctl);
  padding: 10px 18px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  transition: background .2s, box-shadow .2s, transform .2s var(--ease), filter .2s; -webkit-tap-highlight-color: transparent; }
button:hover, .button:hover { background: color-mix(in srgb, var(--pergamena) 82%, var(--inchiostro)); color: var(--inchiostro); }
button:active:not(:disabled), .button:active { transform: translateY(1px) scale(.99); }
button .icon, .button .icon { width: 1.2em; height: 1.2em; }
/* primario: conferma e naviga (verde bosco) */
button.primary, .button.primary { background: var(--verde); color: var(--verde-ink); box-shadow: 0 10px 20px -12px rgb(30 68 52 / .9); }
button.primary:hover, .button.primary:hover { background: var(--verde-2); color: var(--verde-ink); }
/* l'azione forte: una sola per schermata (terracotta) */
button.action, .button.action { background: var(--terracotta-btn); color: var(--terracotta-ink); box-shadow: var(--shadow-action); }
button.action:hover, .button.action:hover { background: var(--terracotta-2); color: var(--terracotta-ink); }
/* secondario: pergamena */
button.ghost, .button.ghost, button.secondary, .button.secondary { background: var(--pergamena); color: var(--inchiostro); }
button.outline, .button.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
button.outline:hover, .button.outline:hover { background: var(--pergamena); }
button.danger, .button.danger { background: var(--no-bg); color: var(--no-ink); }
button.danger:hover, .button.danger:hover { background: color-mix(in srgb, var(--no-bg) 80%, var(--no-ink)); color: var(--no-ink); }
button.big, .button.big { min-height: 56px; font-size: 1rem; padding-inline: 24px; border-radius: 16px; }
button.small, .button.small { padding: 6px 14px; min-height: 44px; font-size: var(--step--1); border-radius: 12px; }
button.linkish { background: none; text-align: left; padding: 8px 4px; min-height: 44px; color: var(--link); text-decoration: underline; text-underline-offset: 3px;
  justify-content: flex-start; font-weight: 700; box-shadow: none; }
button.linkish:hover { background: none; color: var(--verde-2); }
button.icon-btn, .button.icon-btn { width: 48px; padding: 0; }
button.small.icon-btn { width: 44px; }
button.wide { width: 100%; justify-content: flex-start; }
button:disabled, .button[aria-disabled="true"] { opacity: .4; cursor: not-allowed; box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.primary, :root:not([data-theme="light"]) .button.primary { background: #2F6A50; } :root:not([data-theme="light"]) button.primary:hover, :root:not([data-theme="light"]) .button.primary:hover { background: #377A5C; } }
:root[data-theme="dark"] button.primary, :root[data-theme="dark"] .button.primary { background: #2F6A50; }
input, select, textarea { font: 500 var(--step-0)/1.4 var(--sans); text-overflow: ellipsis; color: var(--inchiostro); background: var(--avorio); border: 1px solid var(--field-border); border-radius: var(--r-ctl);
  padding: 11px 14px; width: 100%; min-height: 48px; transition: border-color .2s, box-shadow .2s; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--verde); outline: 2px solid var(--verde); outline-offset: 0; box-shadow: 0 0 0 5px color-mix(in srgb, var(--focus-ring) 45%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(input, select, textarea):focus-visible { border-color: var(--albicocca); outline-color: var(--albicocca); } }
:root[data-theme="dark"] :is(input, select, textarea):focus-visible { border-color: var(--albicocca); outline-color: var(--albicocca); }
input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
textarea { resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--seppia) 50%), linear-gradient(135deg, var(--seppia) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field label { font-size: var(--step--1); color: var(--seppia); font-weight: 800; }
.field small { color: var(--seppia); }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; min-height: 44px; cursor: pointer; }
.check input { width: 24px; height: 24px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--verde); }
/* interruttore grande, comodo anche con i guanti */
input.switch { appearance: none; -webkit-appearance: none; width: 52px; height: 32px; border-radius: 16px; background: var(--pergamena); border: 1px solid var(--field-border);
  position: relative; cursor: pointer; transition: background .25s var(--ease); padding: 0; margin-top: 0; min-height: 0; }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--avorio); box-shadow: 0 2px 4px rgb(35 26 20 / .3); transition: transform .25s var(--ease); }
input.switch:checked { background: var(--verde); border-color: var(--verde); }
input.switch:checked::after { transform: translateX(20px); background: #F6EFE4; }
.switch-row { align-items: center; }
.row, .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.actions.sticky { position: sticky; bottom: var(--nav-clear); background: color-mix(in srgb, var(--carta) 94%, transparent);
  padding: 10px 0; z-index: 5; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (min-width: 1024px) { .actions.sticky { bottom: 0; } }
form.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin: 12px 0; }
form.inline input, form.inline select { flex: 1 1 180px; width: auto; min-width: 0; }
form.inline .field { flex: 1 1 160px; margin: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
legend { font-family: var(--serif); font-size: var(--step-1); margin-bottom: 8px; }
.form-grid { display: grid; gap: 4px 20px; }
.form-grid .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (min-width: 700px) { .form-grid fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .form-grid legend { grid-column: 1 / -1; } }
details.more { margin-top: 4px; }
summary { cursor: pointer; font-weight: 800; padding: 10px 0; min-height: 44px; display: flex; align-items: center; gap: 8px; }
/* campo di ricerca come nel concept: avorio, angoli morbidi, ombra calda */
.search { position: relative; flex: 1; min-width: 0; }
.search > .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--seppia); pointer-events: none; width: 20px; height: 20px; }
.search > input { padding-left: 46px; border-radius: 18px; background: var(--avorio); border: 1px solid var(--line-2); box-shadow: var(--shadow-field); min-height: 52px; }

/* barra a segmenti: Elenco / Per posizione / Scaffale, schede delle Statistiche */
.seg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--pergamena); border-radius: 16px; padding: 4px; margin: 8px 0 14px; overflow-x: auto; scrollbar-width: none; }
.seg a, .seg .seg-opt { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: 12px;
  text-decoration: none; color: var(--seppia); font-weight: 800; font-size: var(--step--1); cursor: pointer; transition: background .25s var(--ease), color .2s; }
.seg a:hover, .seg .seg-opt:hover { color: var(--inchiostro); }
.seg a[aria-current="page"], .seg .seg-opt:has(input:checked) { background: var(--verde); color: var(--verde-ink); box-shadow: 0 8px 16px -10px rgb(30 68 52 / .9); }
.seg .seg-opt:has(input:focus-visible) { outline: 3px solid var(--focus); }
.seg-size .aa { font-family: var(--serif); font-weight: 400; }
.size-normal .aa { font-size: 1rem; } .size-large .aa { font-size: 1.25rem; } .size-xlarge .aa { font-size: 1.5rem; }
.prefs .pref-label { font-weight: 800; margin: 8px 0 0; }

.card { background: var(--avorio); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; width: min(440px, 100%); box-shadow: var(--shadow); min-width: 0; }
.card.privacy { width: min(720px, 100%); }
.login h1 { font-size: var(--step-3); margin-top: 0; }
pre.policy { white-space: pre-wrap; font: 500 var(--step--1)/1.6 var(--sans); max-height: 50dvh; overflow: auto; background: var(--carta); padding: 14px; border-radius: var(--r-ctl); }
code.secret { display: block; font-size: 1.2rem; letter-spacing: .08em; background: var(--pergamena); padding: 12px 14px; border-radius: var(--r-ctl); word-break: break-all; user-select: all; }

/* --- la porta d'ingresso (accesso) ---------------------------------------------- */
main.login-door { grid-row: 1 / -1; grid-column: 1 / -1; padding: 0; max-width: none; min-height: 100dvh; background: var(--carta); }
.door-hero { height: min(40dvh, 320px); background: var(--verde); position: relative; overflow: hidden; border-radius: 0 0 36px 36px; }
.door-hero::before, .door-hero::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgb(246 239 228 / .09); }
.door-hero::before { right: -70px; top: -90px; width: 300px; height: 300px; }
.door-hero::after { right: -20px; top: -40px; width: 200px; height: 200px; }
.door-hero .tape { position: absolute; width: 150px; height: 28px; padding: 0; opacity: .9; }
.door-hero .t1 { top: 22%; left: 6%; transform: rotate(-6deg); }
.door-hero .t2 { top: 9%; right: 9%; transform: rotate(5deg); }
.door-card { width: min(460px, calc(100% - 32px)); margin: -170px auto 32px; position: relative; animation: rise var(--t-enter) var(--ease) both; }
.door-brand { color: var(--verde-ink); font-size: min(2.75rem, 11vw); display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding-left: 4px; }
.door-brand .icon { color: var(--albicocca); }
.door-sub { color: var(--verde-ink); opacity: .92; margin: 0 0 16px; font-family: var(--serif); font-style: italic; font-size: 1.15rem; padding-left: 4px; }
.door-card .card { width: 100%; box-shadow: var(--shadow-lift); border-radius: var(--r-card-l); }
.door-card .card button.primary { width: 100%; min-height: 52px; }

/* --- il nastro: posizione del libro --------------------------------------------- */
.tape { display: inline-block; min-width: 0; background: var(--albicocca); color: var(--albicocca-ink); font-size: var(--step--1); font-weight: 800; padding: 3px 12px;
  transform: rotate(-1.5deg); clip-path: polygon(2% 4px, 98% 0, 100% calc(100% - 4px), 0 100%); max-width: 100%; overflow-wrap: anywhere; line-height: 1.35;
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .14) 0 2px, transparent 2px 9px); }

/* --- liste di libri -------------------------------------------------------------- */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head h1 { margin-bottom: .2em; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0 4px; }
.chip { border-radius: 13px; min-height: 44px; padding: 6px 16px; background: var(--pergamena); color: var(--inchiostro); white-space: nowrap; font: 700 var(--step--1)/1.2 var(--sans); box-shadow: none; }
.chip:hover { background: color-mix(in srgb, var(--pergamena) 82%, var(--inchiostro)); }
.chip[aria-pressed="true"], .chip[aria-current="true"], .chip.on { background: var(--verde); color: var(--verde-ink); }
html[data-simple="1"] .chip.adv { display: none; }
.summary { color: var(--seppia); font-size: var(--step--1); margin: 4px 0 8px; font-variant-numeric: tabular-nums; font-weight: 600; }
ul.books, ul.plain, ul.mini { list-style: none; margin: 0; padding: 0; }
ul.books { background: var(--avorio); border-radius: var(--r-card); box-shadow: var(--shadow); border: 1px solid var(--line); padding: 4px 14px; }
ul.books > li { border-bottom: 1px solid var(--line); }
ul.books > li:last-child { border-bottom: 0; }
.book { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 4px; text-decoration: none; color: inherit; border-radius: var(--r-ctl); font-weight: 500; }
a.book { position: relative; }
a.book:hover { background: color-mix(in srgb, var(--pergamena) 50%, transparent); color: inherit; }
a.book:hover .title { text-decoration: underline; text-decoration-thickness: 1px; }
.book-main { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.book .title { font-size: 1.15rem; line-height: 1.2; }
.meta { color: var(--seppia); font-size: var(--step--1); font-variant-numeric: tabular-nums; font-weight: 600; }
.book .meta { overflow-wrap: anywhere; }   /* autore, anno, editore, posizione: vanno a capo, mai tagliati */
.note { font-size: var(--step--1); font-style: italic; }
@media (max-width: 520px) { .book > .tape { grid-column: 2; justify-self: start; margin-top: -6px; } }

/* copertine come oggetti: dorso a sinistra (3/7 px), ombra calda, tela con l'iniziale quando manca */
.cover, .cover-wrap { width: 48px; height: 72px; flex: none; }
.cover-wrap { position: relative; display: block; border-radius: var(--r-cover); overflow: hidden; box-shadow: var(--shadow-cover); }
.cover-wrap img.cover { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--pergamena); }
.cover-wrap::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 9%; background: linear-gradient(90deg, rgb(0 0 0 / .3), rgb(255 255 255 / .14) 60%, transparent); pointer-events: none; }
.cover-wrap.large, .cover.large { width: 120px; height: 180px; }
.cover-gen { display: grid; place-items: center; border-radius: var(--r-cover); position: relative; overflow: hidden; color: rgb(255 255 255 / .9); box-shadow: var(--shadow-cover); }
.cover-gen::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 9%; background: linear-gradient(90deg, rgb(0 0 0 / .3), rgb(255 255 255 / .14) 60%, transparent); }
.cover-gen::after { content: ""; position: absolute; inset: 7% 8% 7% 15%; border: 1px solid currentColor; opacity: .3; border-radius: 2px; }
.cover-initial { font: 400 1.45rem var(--serif); line-height: 1; }
.cover-rule { position: absolute; left: 22%; right: 14%; bottom: 18%; height: 1px; background: #E9C77B; opacity: .8; }
.cover-gen.large .cover-initial { font-size: 3.4rem; }
.c0 { background-color: #1E4434; color: #E9D9B4; } .c1 { background-color: #6B2D2A; color: #F0DCC4; } .c2 { background-color: #1D2B45; color: #E9C77B; } .c3 { background-color: #C2672E; color: #2A1608; }
.c4 { background-color: #3F5C6E; color: #F3E9D8; } .c5 { background-color: #A8281E; color: #F3E9D8; } .c6 { background-color: #5A3E5D; color: #EEDFC9; } .c7 { background-color: #2F5D4A; color: #F0E2C0; }

/* pill di stato: colore + pallino + testo */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.badge, .pill, .status { display: inline-flex; align-items: center; gap: 6px; font: 800 .75rem/1.3 var(--sans); padding: 4px 10px; border-radius: 9px; max-width: 100%; overflow-wrap: anywhere; text-align: left;
  background: var(--pergamena); color: var(--seppia); }
.badge .icon { width: 14px; height: 14px; }
.status::before, .pill.dot::before, .badge.ok::before, .badge.dup::before, .badge.todo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status.ok, .pill.ok, .badge.ok { background: var(--ok-bg); color: var(--ok-ink); }
.status.order, .pill.order, .badge.ed, .badge.todo, .badge.wish { background: var(--order-bg); color: var(--order-ink); }
.status.no, .pill.no, .badge.dup { background: var(--no-bg); color: var(--no-ink); }
.badge.shared, .badge.partner { background: var(--q-sky); color: var(--q-sky-ink); }
.badge.lent { background: var(--q-peach); color: var(--q-peach-ink); }
.group h2 { display: flex; align-items: center; gap: 10px; }
.group h2 .tape { font-size: 1rem; font-family: var(--sans); }
.group .count, h2 .count { font-family: var(--sans); font-size: var(--step--1); color: var(--seppia); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.empty { padding: 32px 0; text-align: center; display: grid; justify-items: center; gap: 6px; }
.empty p { margin: 4px auto; }
.hero-empty { padding: 40px 18px; background: var(--avorio); border: 1px solid var(--line); border-radius: var(--r-card-l); box-shadow: var(--shadow); animation: rise var(--t-enter) var(--ease) both; }
.hero-empty h2 { font-size: 1.6rem; margin: 8px 0 0; justify-content: center; }
.empty-art { width: 160px; height: 96px; color: var(--noce); opacity: .55; stroke-width: 1.5; }
.empty-ico { width: 44px; height: 44px; color: var(--seppia); opacity: .7; }
li.empty { border: 0 !important; }
li.taken .title { text-decoration: line-through; }
ul.plain li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
ul.plain.scroll { max-height: 60dvh; overflow: auto; }
ul.activity li.highlight { background: color-mix(in srgb, var(--albicocca) 22%, transparent); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.banners { display: grid; gap: 10px; margin: 4px 0 10px; }
.banner { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; background: var(--q-sky); border-radius: var(--r-card); padding: 16px 18px;
  animation: rise var(--t-enter) var(--ease) both; }
.banner > .icon { color: var(--q-sky-ink); width: 28px; height: 28px; margin-top: 2px; }
.banner p { margin: 0; }
.banner .row { grid-column: 2; margin: 6px 0 0; }

/* --- scansione e verdetto -------------------------------------------------------- */
.scanbar { display: flex; gap: 8px; margin: 8px 0; }
.scanbar input { font-size: 1.25rem; min-height: 60px; letter-spacing: .02em; border-radius: 18px; }
.scanbar button { min-height: 60px; border-radius: 18px; }
.scan-page.scanned .lead { display: none; }
.camera-wrap { position: relative; border-radius: var(--r-card-l); overflow: hidden; background: #000; margin: 8px 0; box-shadow: var(--shadow-lift); }
video.camera { width: 100%; height: max(45dvh, 240px); display: block; object-fit: cover; }
.camera-guide { position: absolute; left: 15%; right: 15%; top: 35%; bottom: 35%; border: 3px solid rgb(255 255 255 / .9); border-radius: 16px; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .35); }
.camera-guide::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--albicocca); box-shadow: 0 0 10px var(--albicocca);
  animation: laser 2.6s var(--ease) infinite alternate; }
@keyframes laser { from { transform: translateY(-14px); } to { transform: translateY(14px); } }
.camera-hint { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0 auto; text-align: center; color: #fff; font-weight: 700; text-shadow: 0 1px 3px #000; }
.cam-torch[aria-pressed="true"] { background: var(--albicocca); color: var(--albicocca-ink); }

.verdict { --kind: var(--seppia); --kind-bg: var(--avorio); background: var(--kind-bg); border: 1px solid color-mix(in srgb, var(--kind) 22%, transparent);
  border-radius: var(--r-card); padding: 20px; margin: 16px 0; box-shadow: var(--shadow); }
.verdict.owned { --kind: var(--no-ink); --kind-bg: color-mix(in srgb, var(--no-bg) 55%, var(--avorio)); }
.verdict.edition, .verdict.todo { --kind: var(--order-ink); --kind-bg: color-mix(in srgb, var(--order-bg) 55%, var(--avorio)); }
.verdict.partner { --kind: var(--q-sky-ink); --kind-bg: color-mix(in srgb, var(--q-sky) 55%, var(--avorio)); }
.verdict.new, .verdict.added { --kind: var(--ok-ink); --kind-bg: color-mix(in srgb, var(--ok-bg) 55%, var(--avorio)); }
.verdict-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.verdict-disc { width: 48px; height: 48px; border-radius: 16px; background: var(--kind); color: var(--avorio); display: grid; place-items: center; flex: none; }
.verdict-disc .icon { width: 26px; height: 26px; stroke-width: 2.2; }
.verdict-head { font-family: var(--serif); font-size: clamp(1.6rem, 6.5vw, 2.1rem); font-weight: 400; margin: 0; line-height: 1.05; color: var(--kind); }
.verdict.stamp { animation: stamp 320ms var(--ease); }
@keyframes stamp { 0% { transform: scale(1.04) rotate(-1.2deg); opacity: 0; } 70% { transform: scale(.995); opacity: 1; } 100% { transform: none; } }
.verdict-book { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
.verdict-book .cover, .verdict-book .cover-wrap { width: 64px; height: 96px; }
.verdict-book .title { margin: 0; font-size: var(--step-1); }
.verdict .actions { margin-bottom: 0; }
.verdict .main-action { margin: 14px 0 0; }
.verdict-head:focus { outline: none; }
.verdict .main-action .primary { width: 100%; }
.verdict .actions .primary { flex: 1 1 100%; }
ul.mini li { padding: 4px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
details.move { margin: 12px 0; border: 1px solid var(--line); border-radius: var(--r-card); padding: 4px 16px 12px; background: var(--avorio); }
.search-results { margin-top: 10px; }

/* --- dove metterlo ---------------------------------------------------------------- */
.place { margin: 14px 0 4px; padding: 14px 16px; border-radius: var(--r-card); background: var(--avorio); border: 1px dashed color-mix(in srgb, var(--terracotta) 45%, transparent); }
.place p { margin: 2px 0; }
.place-head { display: flex; align-items: center; gap: 8px; font: 800 .75rem/1.2 var(--sans); color: var(--terracotta-text); text-transform: uppercase; letter-spacing: .14em; }
.place-where { font-family: var(--serif); font-size: 1.35rem; }
.place-between { color: var(--seppia); }
/* anteprima del ripiano (.shelf-preview) e scaffale: vedi la sezione «Scaffale: stili e dorsi leggibili» in fondo */

/* --- scheda libro --------------------------------------------------------------- */
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; text-decoration: none; }
.book-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; margin: 4px 0 8px; }
.book-hero h1 { margin: 0; font-size: clamp(1.75rem, 6.5vw, 2.5rem); overflow-wrap: anywhere; }
.book-hero .subtitle { margin: 4px 0 0; color: var(--seppia); }
.byline { font-family: var(--serif); font-style: italic; font-size: 1.15rem; margin: 6px 0 8px; }
@media (max-width: 520px) { .book-hero { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; } .book-hero .cover-wrap.large, .book-hero .cover.large { width: 96px; height: 144px; } }
.hero-actions .primary { min-width: 160px; }
.cards { display: grid; gap: 14px; margin: 8px 0 16px; }
@media (min-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
.card-sec { background: var(--avorio); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; min-width: 0; box-shadow: var(--shadow); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-head h2 { margin: 0 0 6px; font-size: 1.3rem; }
.card-edit { min-height: 44px; }
dl.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px 16px; margin: 8px 0 0; }
dl.facts dt { font: 800 .75rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--seppia); }
dl.facts dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.notes { white-space: pre-wrap; margin: 4px 0; }
.story { font-family: var(--serif); font-size: 1.15rem; margin: 4px 0; }
.danger-zone { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; }
.edit-title { margin-top: 8px; }
.notice { border-left: 4px solid var(--q-sky-ink); padding: 12px 16px; background: var(--avorio); margin: 12px 0; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.notice .icon { margin-right: 4px; }
.notice.warn { border-color: var(--order-ink); background: color-mix(in srgb, var(--order-bg) 45%, var(--avorio)); }
.notice.ok { border-color: var(--ok-ink); background: color-mix(in srgb, var(--ok-bg) 45%, var(--avorio)); }
.photos { display: flex; flex-wrap: wrap; gap: 10px; }
.photos figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.photos img { width: 110px; height: 110px; object-fit: cover; border-radius: var(--r-ctl); }
.add-photo { width: 110px; height: 110px; border: 2px dashed var(--field-border); border-radius: var(--r-ctl); display: grid; place-items: center; align-content: center; gap: 4px; text-align: center;
  cursor: pointer; color: var(--seppia); font-size: var(--step--1); padding: 8px; }
.add-photo .icon { width: 28px; height: 28px; }

.panel { border-top: 1px solid var(--line); padding: 4px 0 12px; }
.subtabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line-2); margin-bottom: 16px; scrollbar-width: none; }
.subtabs a { padding: 10px 12px; text-decoration: none; color: var(--seppia); white-space: nowrap; border-bottom: 3px solid transparent; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.subtabs a[aria-current="page"] { color: var(--inchiostro); border-color: var(--terracotta); font-weight: 800; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--seppia); font-weight: 800; }
tr.denied td { color: var(--danger); }
.actions-cell { display: flex; flex-wrap: wrap; gap: 6px; min-width: 240px; }
/* le parole restano intere (la tabella non stringe le colonne a una lettera); email e indirizzi vanno a capo ovunque */
td { overflow-wrap: break-word; }
td :is(a[href^="mailto:"], .email, code), td.email { overflow-wrap: anywhere; }
/* tabelle strette (telefono, tablet con testo grande): una scheda per riga, ogni valore con il nome della
   colonna (dom.js › cardTable). Misura la larghezza vera della tabella (container query, in rem: cresce con il testo). */
.table-wrap:has(> table.rtable) { container: tablewrap / inline-size; }
@container tablewrap (max-width: 50rem) {
  table.rtable, table.rtable tbody, table.rtable tr { display: block; width: 100%; }
  table.rtable thead, table.rtable caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.rtable tr { background: var(--avorio); border: 1px solid var(--line); border-radius: 18px; padding: 8px 14px; margin: 0 0 10px; }
  table.rtable td, table.rtable th[scope="row"] { display: grid; grid-template-columns: minmax(5.5rem, 36%) minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 6px 0;
    border: 0; border-bottom: 1px solid var(--line); min-width: 0; text-align: left; }
  table.rtable tr > :last-child { border-bottom: 0; }
  table.rtable td::before, table.rtable th[scope="row"]::before { content: attr(data-label); font: 800 .75rem/1.35 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--seppia); }
  table.rtable td:not([data-label])::before, table.rtable td[data-label=""]::before { content: none; }
  table.rtable td:not([data-label]), table.rtable td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  table.rtable th[scope="row"] { font-size: 1rem; color: var(--inchiostro); }
  table.rtable td.actions-cell { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; padding-top: 10px; }
  table.rtable td.actions-cell::before { flex-basis: 100%; }
  table.rtable td.num { white-space: normal; }
  table.rtable td > * { min-width: 0; }
  table.rtable td > :is(input, select) { width: 100%; }
}
@container tablewrap (max-width: 24rem) {
  table.rtable td, table.rtable th[scope="row"] { display: block; }
  table.rtable td::before, table.rtable th[scope="row"]::before { display: block; margin-bottom: 2px; }
}
.menu-list { display: grid; gap: 8px; }
dl.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(7.5rem, 100%), 1fr)); gap: 10px; margin: 0 0 16px; }
dl.stats div { background: var(--avorio); border: 1px solid var(--line); border-radius: 20px; padding: 14px; display: flex; flex-direction: column-reverse; }
dl.stats dt { color: var(--seppia); font-size: var(--step--1); font-weight: 700; margin-top: 6px; }
dl.stats dd { margin: 0; font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; overflow-wrap: normal; }
dl.stats div { container-type: inline-size; min-width: 0; }
@container (max-width: 12rem) { dl.stats dd { font-size: 1.5rem; } }
@container (max-width: 8.5rem) { dl.stats dd { font-size: 1.25rem; } }

dialog.modal { border: 1px solid var(--line); border-radius: var(--r-card-l); padding: 24px; width: min(640px, calc(100vw - 20px)); max-height: 90dvh; overflow: auto; overscroll-behavior: contain; background: var(--avorio); color: var(--inchiostro);
  box-shadow: 0 30px 60px -24px rgb(35 26 20 / .55); }
dialog.modal::backdrop { background: rgb(35 26 20 / .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.modal h2 { margin-top: 0; font-size: var(--step-2); }
/* i pulsanti restano sempre visibili in fondo alla finestra, anche quando il contenuto scorre */
dialog.modal > .actions { justify-content: flex-end; margin: 12px -24px -24px; padding: 12px 24px calc(14px + env(safe-area-inset-bottom)); position: sticky; bottom: -24px; z-index: 2;
  background: var(--avorio); border-top: 1px solid var(--line); }
dialog.modal > .actions > button { flex: 1 1 auto; max-width: 100%; white-space: normal; }
@media (min-width: 600px) { dialog.modal > .actions > button { flex: 0 1 auto; } }
@media (max-width: 420px) { dialog.modal { padding: 20px 16px; } dialog.modal > .actions { margin: 12px -16px -20px; padding-inline: 16px; bottom: -20px; } }
dialog.modal[open] { animation: rise 320ms var(--ease) both; }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + var(--tabbar-gap) + 24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--inchiostro); color: var(--carta);
  padding: 12px 16px; border-radius: 16px; opacity: 0; transition: opacity .25s, transform .35s var(--ease); z-index: 300; width: max-content; max-width: min(560px, calc(100vw - 24px)); pointer-events: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; box-shadow: 0 18px 34px -14px rgb(35 26 20 / .6); font-weight: 700; }
.toast > span { flex: 1 1 12em; min-width: 0; }
.toast > .icon { flex: none; }
/* sopra le barre d'azione fisse in basso (scheda del libro, Riordina, modulo con «Salva»): l'avviso non le copre mai */
body:has(.book-actions, .actions.sticky, .reorder-bar, .spine-card) .toast { bottom: calc(var(--nav-clear) + 4.5rem + 48px); }
@media (min-width: 1024px) { body:has(.book-actions, .actions.sticky, .reorder-bar, .spine-card) .toast { bottom: calc(4.5rem + 100px); } }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.has-action.show { pointer-events: auto; }
.toast.error { background: var(--toast-err-bg); color: var(--toast-err-ink); }
.toast.ok { background: var(--toast-ok-bg); color: var(--toast-ok-ink); }
.toast.ok .icon { color: var(--albicocca); }
.toast-action { min-height: 44px; margin-left: auto; padding: 6px 14px; background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; font-weight: 800; white-space: nowrap; }
.toast-action:hover { background: rgb(255 255 255 / .12); color: inherit; }
@media (min-width: 1024px) { .toast { bottom: 28px; left: calc(50% + var(--side-w) / 2); } }
main.guest { padding-bottom: 40px; }
main.guest .page { max-width: 760px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  /* restano solo le dissolvenze */
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .rise, .hero-empty, .banner, dialog.modal[open], .door-card { animation-name: fade !important; animation-duration: .3s !important; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* schermi grandi: si usa lo spazio invece di una colonna stretta al centro */
@media (min-width: 1400px) {
  .page:not(.book-page):not(.scan-page) ul.books:not(.wish):not(.loose) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .page:not(.book-page):not(.scan-page) ul.books:not(.wish):not(.loose) > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .cards { grid-template-columns: 1fr 1fr 1fr; }
  .scan-page { max-width: 900px; }
}

/* ==================================================================================
   Home ("Panoramica"), Statistiche, Profilo, Prestiti
   ================================================================================== */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; margin: 0 0 14px; }
.sec-head h2 { margin: 0; font-size: 1.4375rem; min-width: 0; }
.sec-head a { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-size: var(--step--1); font-weight: 800; text-decoration: none; white-space: nowrap; }
.card-l { background: var(--avorio); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; box-shadow: var(--shadow); min-width: 0; }

/* copertina "oggetto": dorso a sinistra, cornice sottile, titolo stampato quando manca l'immagine */
.cv { --cv-bg: #1D2B45; --cv-fg: #E9C77B; position: relative; display: block; flex: none; overflow: hidden; border-radius: var(--r-cover); background: var(--cv-bg); color: var(--cv-fg);
  box-shadow: var(--shadow-cover); width: 100px; height: 150px; }
.cv::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 9%; z-index: 2; background: linear-gradient(90deg, rgb(0 0 0 / .3), rgb(255 255 255 / .14) 60%, transparent); }
.cv:not(.has-img)::after { content: ""; position: absolute; inset: 7% 8% 7% 15%; border: 1px solid currentColor; opacity: .3; border-radius: 2px; }
.cv-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cv-gen { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 14% 10% 12% 16%; }
.cv-t { font: 400 1rem/1.02 var(--serif); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.cv-a { font: 700 .75rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-o { width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; align-self: center; opacity: .8; }
.cv-hero { width: 92px; height: 138px; }
/* telefono stretto o testo grande: copertina più piccola, il titolo ha spazio per stare intero */
.hero-read { container-type: inline-size; }
/* (selettori più specifici delle regole per computer più sotto: la scheda stretta vince anche nella griglia larga) */
@container (max-width: 21rem) { .hero-read .cv.cv-hero { width: 64px; height: 96px; } .hero-read .hero-body .hero-title { font-size: 1.3rem; } }
@container (max-width: 13rem) { .hero-read .cv.cv-hero { width: 48px; height: 72px; } .hero-read .hero-body .hero-title { font-size: 1.15rem; } }
.cv-hero .cv-t { font-size: .9375rem; }
.cv-sm { width: 44px; height: 66px; }
.cv-xs { width: 40px; height: 60px; }
.cv-xs .cv-gen { padding: 0; }
.cv-blank { --cv-bg: rgb(246 239 228 / .1); --cv-fg: var(--albicocca); box-shadow: none; outline: 1px dashed rgb(246 239 228 / .35); outline-offset: -1px; }
.cv-blank .cv-gen { align-items: center; justify-content: center; }
.cv-blank .icon { width: 34px; height: 34px; }

.home { display: flex; flex-direction: column; gap: 14px; max-width: 1180px; }
/* testata: avatar, saluto, campanella; ricerca + scansione */
.home-head { display: flex; flex-direction: column; gap: 20px; order: 1; padding-top: max(18px, env(safe-area-inset-top)); }
.hello { display: flex; align-items: center; gap: 12px; }
.hello-av { width: 46px; height: 46px; font-size: 1.0625rem; }
.hello-text { flex: 1; min-width: 0; }
.hello-time { margin: 0; font-size: .8125rem; color: var(--seppia); font-weight: 700; }
.hello h1 { margin: 0; font-size: 1.625rem; line-height: 1.05; overflow-wrap: anywhere; }
.hello .h-desk { display: none; }
.hello-sub { display: none; margin: 10px 0 0; font-size: 1rem; color: var(--seppia); line-height: 1.5; text-wrap: pretty; }
.hello-sub b { color: var(--ok-ink); }
.bell:not(.badge) { position: relative; width: 46px; height: 46px; flex: none; border-radius: 16px; border: 1px solid var(--line-2); background: var(--avorio); color: var(--inchiostro); display: grid; place-items: center; }
.bell:not(.badge):hover { color: var(--inchiostro); background: var(--pergamena); }
.bell:not(.badge) .icon { width: 22px; height: 22px; }   /* «.badge.bell» (Promemoria nei desideri) è una pastiglia normale */
.bell-dot { position: absolute; top: 10px; right: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 2px var(--avorio); }
.home-tools { display: flex; gap: 10px; align-items: center; }
.home-search { flex: 1; min-width: 0; margin: 0; }
.field-search { position: relative; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--avorio); border: 1px solid var(--line-2);
  border-radius: 18px; box-shadow: var(--shadow-field); color: var(--seppia); cursor: text; transition: box-shadow .2s, border-color .2s; }
.field-search .icon { width: 20px; height: 20px; }
.field-search input { border: 0; outline: 0; background: transparent; padding: 0; min-height: 0; height: 100%; font: 500 .9375rem var(--sans); color: var(--inchiostro); box-shadow: none; }
.field-search input:focus-visible { outline: 0; box-shadow: none; }
.field-search:focus-within { border-color: var(--verde); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus-ring) 50%, transparent), var(--shadow-field); }
.field-search input::-webkit-search-cancel-button { cursor: pointer; }
.scan-btn { width: 52px; height: 52px; border-radius: 18px; background: var(--inchiostro); color: var(--carta); display: grid; place-items: center; flex: none; }
.scan-btn:hover { color: var(--carta); filter: brightness(1.25); }
.scan-btn .icon { width: 22px; height: 22px; }
.add-book { display: none; }
.home-banners { order: 2; }
.home-banners:empty { display: none; }

/* contenitori: sul telefono spariscono (display: contents) e i pezzi seguono l'ordine del concept */
.home-top, .home-row3 { display: contents; }
.hero-read { order: 3; } .home-kpis { order: 4; } .quick { order: 5; } .home-recent { order: 6; } .loan-strip { order: 7; } .goal-card { order: 8; }
.onboard { order: 4; }
.home-shelf, .home-shelf-slot, .shop-card, .loans-card, .gift-card { display: none; }

/* "Stai leggendo": il libro è l'eroe */
.hero-read { position: relative; display: flex; gap: 18px; margin-top: 8px; padding: 22px; border-radius: var(--r-card-l); background: var(--verde); color: #F6EFE4; text-decoration: none;
  overflow: hidden; box-shadow: var(--shadow-verde); font-weight: 500; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.hero-read:hover { color: #F6EFE4; transform: translateY(-2px); }
.hero-read:focus-visible { outline-color: var(--albicocca); }
.hero-ring, .hero-ring::after { position: absolute; border-radius: 50%; border: 1px solid rgb(246 239 228 / .09); pointer-events: none; z-index: -1; }
.hero-ring { right: -70px; top: -90px; width: 260px; height: 260px; }
.hero-ring::after { content: ""; right: 10px; top: 10px; width: 180px; height: 180px; transform: translate(-30px, 30px); }
.hero-read .cv { transform: rotate(-4deg); animation: floaty 6s ease-in-out infinite; }
.hero-body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hero-read .eyebrow { color: var(--albicocca); }
/* il titolo intero, anche lungo: va a capo (niente puntini) */
.hero-title { display: block; font: 400 1.5rem/1.15 var(--serif); margin-top: 8px; overflow-wrap: break-word; hyphens: auto; }
.hero-author { font-size: .8125rem; opacity: .82; margin-top: 4px; }
.hero-progress { margin-top: auto; padding-top: 14px; display: block; }
.hero-nums { display: flex; justify-content: space-between; font-size: .75rem; font-weight: 700; margin-bottom: 8px; }
.hero-bar { display: block; height: 6px; border-radius: 6px; background: rgb(246 239 228 / .16); overflow: hidden; }
.hero-bar > span { display: block; height: 100%; width: calc(var(--v, 0) * 1%); border-radius: 6px; background: var(--albicocca); transition: width .9s var(--ease); }
.hero-more { position: absolute; right: 14px; top: 14px; font: 800 .75rem/1 var(--sans); padding: 5px 8px; border-radius: 8px; background: rgb(246 239 228 / .12); }
.hero-read.no-book .hero-author { opacity: .85; line-height: 1.45; }
.hero-cta { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .875rem; color: var(--albicocca); }
.hero-cta .icon { width: 18px; height: 18px; }

/* numeri della libreria: grandi, in DM Serif */
.home-kpis ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.home-kpis .k-read { display: none; }
.stat { display: block; height: 100%; background: var(--avorio); border: 1px solid var(--line); border-radius: 20px; padding: 14px; color: var(--inchiostro); text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.stat:hover { color: var(--inchiostro); transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-num { display: block; font: 400 1.875rem/1 var(--serif); }
.stat-label { display: block; font-size: .75rem; color: var(--seppia); font-weight: 700; margin-top: 6px; line-height: 1.2; }
.k-wish .stat-num { color: var(--terracotta-text); }

/* azioni rapide: tondi pastello */
.quick { margin-top: 10px; container-type: inline-size; width: 100%; }
.quick ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.qa { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--inchiostro); font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.2; padding: 2px; border-radius: 16px; }
.qa:hover { color: var(--inchiostro); }
.qa-ico { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; background: var(--bg); color: var(--fg); transition: transform .3s var(--ease); }
.qa-ico .icon { width: 24px; height: 24px; }
.qa:hover .qa-ico { transform: translateY(-3px); }
.qa.peach { --bg: var(--q-peach); --fg: var(--q-peach-ink); } .qa.sage { --bg: var(--q-sage); --fg: var(--q-sage-ink); }
.qa.sky { --bg: var(--q-sky); --fg: var(--q-sky-ink); } .qa.wheat { --bg: var(--q-wheat); --fg: var(--q-wheat-ink); }
/* telefono stretto o testo grande: 2 × 2, icona accanto all'etichetta (le parole non si spezzano mai) */
@container (max-width: 19rem) {
  .quick ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick .qa { flex-direction: row; justify-content: flex-start; text-align: left; gap: 10px; padding: 4px; background: var(--avorio); border-radius: 18px; box-shadow: var(--shadow); }
  .quick .qa-ico { width: 48px; height: 48px; border-radius: 15px; flex: none; }
  .quick .qa-label { min-width: 0; font-size: .8125rem; }
}
@container (max-width: 16.5rem) {
  .quick .qa { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 8px 4px; }
}

/* aggiunti di recente: copertine in fila */
.home-recent { margin-top: 16px; }
.carousel { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 20px 10px; margin: 0 -20px; list-style: none; scroll-padding-inline: 20px; }
.carousel > li { flex: none; width: 6.5rem; scroll-snap-align: start; min-width: 0; }
.rc { display: flex; flex-direction: column; text-decoration: none; color: var(--inchiostro); font-weight: 500; }
.rc:hover { color: var(--inchiostro); }
.rc .cv { transition: transform .35s var(--ease); }
.rc:hover .cv { transform: translateY(-4px) rotate(-1deg); }
.rc-title { font-size: .8125rem; font-weight: 700; margin-top: 10px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rc-author { font-size: .75rem; color: var(--seppia); margin-top: 2px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* le pagine che usano ancora le copertine classiche nel carosello */
.rc .cover, .rc .cover-wrap { width: 100px; height: 150px; }
.rc .cover-gen .cover-initial { font-size: 2.6rem; }

/* il prestito che torna a casa */
.loan-strip { display: flex; align-items: center; gap: 14px; padding: 14px; margin-top: 10px; border-radius: 22px; background: var(--avorio); border: 1px solid var(--line); }
.loan-strip-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; color: var(--inchiostro); text-decoration: none; font-weight: 500; }
.loan-strip-link:hover { color: var(--inchiostro); }
.loan-strip-text { min-width: 0; display: flex; flex-direction: column; }
.loan-strip .eyebrow { letter-spacing: .12em; color: var(--q-peach-ink); }
.loan-strip.late .eyebrow { color: var(--no-ink); }
.loan-strip-title { font-size: .9375rem; font-weight: 700; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-btn { width: 44px; height: 44px; border-radius: 14px; background: var(--q-peach); color: var(--q-peach-ink); display: grid; place-items: center; flex: none; }
.bell-btn:hover { color: var(--q-peach-ink); filter: brightness(.96); }
.bell-btn .icon { width: 20px; height: 20px; }

/* obiettivo di lettura: anello */
.goal-card { display: flex; align-items: center; gap: 20px; background: var(--avorio); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; margin-top: 10px; min-width: 0; }
.ring { --p: 0; position: relative; width: 112px; height: 112px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--terracotta) calc(var(--p) * 1%), var(--pergamena) 0); transition: --p 1s var(--ease); }
.ring-in { position: absolute; inset: 12px; border-radius: 50%; background: var(--avorio); display: grid; place-content: center; text-align: center; }
.ring-num { font: 400 1.875rem/1 var(--serif); }
.ring-of { font-size: .75rem; font-weight: 700; color: var(--seppia); }
.goal-text { min-width: 0; }
.goal-text h2 { margin: 6px 0 0; font-size: 1.375rem; line-height: 1.1; }
.goal-sub { margin: 6px 0 0; font-size: .8125rem; color: var(--seppia); line-height: 1.45; }
.goal-set { min-height: 40px; padding: 4px 0; font-size: .8125rem; }
.goal-card .eyebrow { color: var(--q-peach-ink); }

/* primi passi (libreria vuota) */
.onboard { background: var(--avorio); border: 1px solid var(--line); border-radius: var(--r-card-l); padding: 24px 20px; box-shadow: var(--shadow); }
.onboard h2 { margin: 6px 0 4px; font-size: 1.75rem; }
.onboard > p:not(.eyebrow) { margin: 0 0 16px; color: var(--seppia); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px; border-radius: 20px; background: var(--carta); color: var(--inchiostro);
  text-decoration: none; min-height: 76px; font-weight: 500; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.step:hover { color: var(--inchiostro); transform: translateY(-2px); box-shadow: var(--shadow); }
.step-ico { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: var(--bg); color: var(--fg); }
.step-ico .icon { width: 24px; height: 24px; }
.step b { display: block; font: 400 1.2rem/1.2 var(--serif); }
.step small { color: var(--seppia); font-size: .8125rem; }
.step .chev { color: var(--seppia); width: 20px; height: 20px; }
.step.sage { --bg: var(--q-sage); --fg: var(--q-sage-ink); } .step.sky { --bg: var(--q-sky); --fg: var(--q-sky-ink); } .step.peach { --bg: var(--q-peach); --fg: var(--q-peach-ink); }
.step-n { font: 800 .75rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }

/* scaffale in miniatura (computer e tablet) */
.home-shelf .shelf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.home-shelf h2 { margin: 0; font-size: 1.875rem; line-height: 1; }
.home-shelf .shelf-head p { margin: 4px 0 0; font-size: .875rem; }
.room-chips { padding: 0; }
.room-chips .chip { min-height: 44px; }
.wood { display: block; margin-top: 18px; padding: 14px; border-radius: 20px; background: var(--noce); box-shadow: 0 30px 40px -26px rgb(35 26 20 / .8); text-decoration: none; }
.wood-back { display: flex; flex-direction: column; gap: 8px; border-radius: 12px; padding: 10px 14px 0; background: radial-gradient(70% 70% at 70% 0%, #5A3E2B 0%, #2E2018 75%); }
.wood-row { display: block; --shelf-h: 140px; }
.wood-books { display: flex; align-items: flex-end; gap: 2px; height: 150px; overflow: hidden; padding: 0 6px; }
.wood-books .spine { cursor: pointer; flex: none; }
.wood-books .spine.found { z-index: 2; animation: spine-glow 2.2s ease-in-out infinite; transform: translateY(-2px); }
.plank { display: block; height: 14px; border-radius: 2px; background: linear-gradient(#B07D50, #7A4F2E); box-shadow: 0 10px 14px -6px rgb(0 0 0 / .6); }
.wood-label { display: block; font: 700 .75rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgb(246 239 228 / .72); padding: 6px; }
.wood:focus-visible { outline-color: var(--terracotta); }
.found-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0 0; font-size: .875rem; }
.home-pin { width: 34px; height: 34px; border-radius: 12px; background: var(--q-peach); color: var(--q-peach-ink); display: grid; place-items: center; flex: none; }
.home-pin .icon { width: 18px; height: 18px; }

/* card della riga bassa: lista acquisti, prestiti, idea regalo */
.home-card { background: var(--avorio); border: 1px solid var(--line); border-radius: 26px; padding: 24px; min-width: 0; }
.home-card .sec-head { margin-bottom: 8px; }
.home-card .sec-head h2 { font-size: 1.625rem; }
.card-empty { margin: 8px 0 0; font-size: .875rem; }
.shop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.shop-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.shop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.shop-main b { font-size: .9375rem; font-weight: 800; overflow-wrap: anywhere; }
.shop-main .meta { font-size: .75rem; margin-top: 2px; font-weight: 500; }
.shop-main .status { margin-top: 6px; }
.bell-toggle { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--inchiostro); flex: none; }
.bell-toggle:hover { background: var(--pergamena); }
.bell-toggle .icon { width: 18px; height: 18px; }
.bell-toggle.on { background: var(--verde); color: var(--albicocca); box-shadow: none; }
.bell-toggle.on .icon { fill: currentColor; }
.loan-mini { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.loan-mini li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--carta); }
.loan-mini li.hot { background: var(--q-peach); }
.loan-mini li.late { background: var(--no-bg); }
.who-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: none; background: #E3B9A0; color: #3B2219; }
.loan-mini li.hot .who-dot, .loan-mini li.late .who-dot { background: var(--ok-bg); color: var(--verde); }
.loan-mini-main { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; text-decoration: none; color: var(--inchiostro); }
.loan-mini-main:hover { color: var(--inchiostro); }
.loan-mini-main b { font-size: .875rem; line-height: 1.3; overflow-wrap: anywhere; }
.loan-mini-main span { font-size: .75rem; color: var(--seppia); font-weight: 700; }
.loan-mini li.hot .loan-mini-main span { color: #6B3317; }
.loan-mini li.late .loan-mini-main span { color: var(--no-ink); }
.remind { background: var(--inchiostro); color: var(--carta); min-height: 40px; border-radius: 12px; padding: 0 14px; }
.remind:hover { background: var(--inchiostro); color: var(--carta); filter: brightness(1.3); }
.gift-card { background: var(--verde); color: #F6EFE4; border-color: var(--verde); }
.gift-card .eyebrow { display: flex; align-items: center; gap: 8px; color: var(--albicocca); }
.gift-card .eyebrow .icon { width: 16px; height: 16px; }
.gift-card h2 { margin: 10px 0 0; font-size: 1.625rem; line-height: 1.1; color: #F6EFE4; }
.gift-card p:not(.eyebrow) { margin: 8px 0 0; font-size: .875rem; line-height: 1.5; color: rgb(246 239 228 / .85); }
.gift-card p b { color: #F6EFE4; }
.gift-btn { margin-top: 16px; min-height: 46px; background: var(--albicocca); color: #3B2219; }
.gift-btn:hover { background: #F5C7A2; color: #3B2219; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gift-card, :root:not([data-theme="light"]) .hero-read { box-shadow: 0 0 0 1px rgb(246 239 228 / .06), var(--shadow-verde); }
  :root:not([data-theme="light"]) .loan-mini li.hot .loan-mini-main span { color: var(--q-peach-ink); }
}
:root[data-theme="dark"] .loan-mini li.hot .loan-mini-main span { color: var(--q-peach-ink); }

/* tablet: stessa barra in basso, due colonne */
@media (min-width: 600px) {
  .home { gap: 18px; }
  .home-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; order: 3; }
  .home-top > .hero-read, .home-top > .home-kpis, .home-top > .goal-card { grid-column: 1 / -1; }
  .home-row3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; order: 9; }
  .home-row3 > .gift-card { grid-column: 1 / -1; }
  .home-kpis, .goal-card, .hero-read { margin-top: 0; }
  .home-shelf, .shop-card, .loans-card, .gift-card { display: block; }
  .home-shelf { order: 8; }
  .quick { order: 4; } .home-recent { order: 5; }
  .loan-strip { display: none; }
  .carousel { margin: 0; padding-inline: 2px; }
  .onboard .steps { grid-template-columns: repeat(3, 1fr); }
  .is-empty .home-top > .onboard { grid-column: 1 / -1; }
}
/* computer: la "Panoramica" del concept */
@media (min-width: 1024px) {
  .home { gap: 22px; }
  .home-head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; padding-top: 0; }
  .hello { flex: 1 1 380px; min-width: 0; }
  .hello-av, .bell, .hello-time, .hello .h-mob, .scan-btn { display: none; }
  .hello .h-desk { display: inline; }
  .hello h1 { font-size: clamp(34px, 4vw, 48px); line-height: 1; }
  .hello-sub { display: block; }
  .home-tools { flex: 1 1 380px; justify-content: flex-end; }
  .home-search { flex: 1 1 240px; max-width: 360px; }
  .field-search { border-radius: 16px; box-shadow: none; }
  .add-book { display: inline-flex; height: 52px; border-radius: 16px; padding: 0 20px; }
  .home-top { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; }
  .home-top > .hero-read, .home-top > .home-kpis, .home-top > .goal-card { grid-column: auto; }
  .home-kpis ul { height: 100%; }
  .hero-read { padding: 26px; border-radius: 26px; gap: 22px; }
  .hero-read .cv { width: 104px; height: 156px; transform: rotate(-3deg); }
  .hero-title { font-size: 1.625rem; }
  .home-kpis ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .home-kpis .k-read { display: block; }
  .stat { padding: 18px; border-radius: 22px; }
  .stat-num { font-size: 2.375rem; }
  .stat-label { font-size: .8125rem; }
  .goal-card { padding: 24px; gap: 22px; border-radius: 26px; }
  .ring { width: 136px; height: 136px; }
  .ring-in { inset: 14px; }
  .ring-num { font-size: 2.125rem; }
  .goal-text h2 { font-size: 1.5rem; }
  .quick, .loan-strip { display: none; }
  .home-shelf { order: 4; }
  .home-row3 { order: 5; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px; }
  .home-row3 > .gift-card { grid-column: auto; }
  .home-recent { order: 6; }
  .carousel > li { width: 112px; }
  .rc .cv { width: 112px; height: 168px; }
}

/* --- Statistiche ---------------------------------------------------------------- */
.stats-page, .profile, .loans-page { max-width: 980px; }
.stats-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.stats-head h1 { margin-bottom: .1em; }
/* tre schede in una riga quando c'è posto; su telefono stretto o con testo grande vanno a capo, mai tagliate */
.seg.tabs3 { flex-wrap: wrap; overflow: visible; }
.seg.tabs3 a { flex: 1 1 auto; text-align: center; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; padding: 0; list-style: none; }
@media (max-width: 699px) { .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } }
.kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "val ico" "label label"; gap: 6px 10px; align-items: start; background: var(--avorio); border: 1px solid var(--line);
  border-radius: 22px; padding: 16px; animation: rise var(--t-enter) var(--ease) both; }
.kpi:nth-child(2) { animation-delay: .05s; } .kpi:nth-child(3) { animation-delay: .1s; } .kpi:nth-child(4) { animation-delay: .15s; } .kpi:nth-child(5) { animation-delay: .2s; }
.kpi .kpi-ico { grid-area: ico; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--bg, var(--q-sage)); color: var(--fg, var(--q-sage-ink)); }
.kpi .kpi-ico .icon { width: 20px; height: 20px; }
.kpi-val { grid-area: val; font: 400 clamp(1.25rem, 17cqi, 2rem)/1.05 var(--serif); white-space: nowrap; min-width: 0; }
/* numeri grandi (1.234 copie, 16.229 €): il corpo segue la larghezza della scheda e, se la scheda è stretta,
   l'icona sale sopra il numero invece di coprirlo */
.kpi { container-type: inline-size; }
@container (max-width: 13rem) { .kpi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ico" "val" "label"; } }
.kpi-label { grid-area: label; font-size: .75rem; color: var(--seppia); font-weight: 700; line-height: 1.25; }
.kpi.sage { --bg: var(--q-sage); --fg: var(--q-sage-ink); } .kpi.sky { --bg: var(--q-sky); --fg: var(--q-sky-ink); } .kpi.rose { --bg: var(--q-rose); --fg: var(--q-rose-ink); }
.kpi.peach { --bg: var(--q-peach); --fg: var(--q-peach-ink); } .kpi.lilac { --bg: var(--q-wheat); --fg: var(--q-wheat-ink); }
.kpi.rose .kpi-val, .kpi.peach .kpi-val { color: var(--terracotta-text); }
.viz-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 1000px) { .viz-grid.two { grid-template-columns: 1fr 1fr; align-items: start; } }
.viz { background: var(--avorio); border: 1px solid var(--line); border-radius: 26px; padding: 20px 20px 14px; min-width: 0; margin: 0; position: relative; animation: rise var(--t-enter) var(--ease) both; }
.viz-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.viz-head h2 { margin: 0; font-size: 1.5rem; }
.viz-head select { width: auto; min-height: 44px; padding: 6px 38px 6px 14px; border-radius: 13px; background-color: var(--pergamena); border-color: transparent; font-weight: 800; font-size: var(--step--1); }
.viz-sub { margin: 0 0 10px; color: var(--seppia); font-size: var(--step--1); }
.viz-plot { position: relative; width: 100%; }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz text { fill: var(--seppia); font: 600 .75rem var(--sans); font-variant-numeric: tabular-nums; }
.viz text.v-strong { fill: var(--inchiostro); font-weight: 800; }
.viz .v-grid { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; stroke-dasharray: 2 4; }
.viz .v-axis { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.viz .v-bar { fill: var(--viz-bar); transition: opacity .2s, fill .2s; }
.viz .v-bar.dim { fill: color-mix(in srgb, var(--viz-bar) 30%, var(--avorio)); }
.viz .v-hit { fill: transparent; cursor: default; }
.viz .v-hit:hover + .v-bar, .viz .v-bar.hot { fill: var(--terracotta); }
.viz .s1 { fill: var(--viz-1); } .viz .s2 { fill: var(--viz-2); } .viz .s3 { fill: var(--viz-3); } .viz .s4 { fill: var(--viz-4); } .viz .s5 { fill: var(--viz-5); } .viz .s0 { fill: var(--viz-other); }
.viz .v-seg { stroke: var(--avorio); stroke-width: 3; transition: opacity .2s; }
.viz .v-seg.fade { opacity: .3; }
/* centro della ciambella: misure nelle unità del disegno (160×160), che cresce con il testo (sotto): mai sovrapposte */
.viz text.v-center { fill: var(--inchiostro); font: 400 28px var(--serif); }
.viz text.v-center-sub { fill: var(--seppia); font: 700 12.5px var(--sans); }
.donut-wrap { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 18px; align-items: center; }
figure.viz { container: viz / inline-size; }
@container viz (max-width: 24rem) { .donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; } .donut-wrap .viz-plot { max-width: 10.5rem; } .donut-wrap .legend { width: 100%; } }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; width: 100%; }
.legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 34px; font-size: var(--step--1); font-weight: 600; border-radius: 10px; padding: 0 8px; }
.legend li.hot { background: var(--pergamena); }
.legend .sw { width: 10px; height: 10px; border-radius: 50%; background: var(--viz-other); }
.legend .sw.s1 { background: var(--viz-1); } .legend .sw.s2 { background: var(--viz-2); } .legend .sw.s3 { background: var(--viz-3); } .legend .sw.s4 { background: var(--viz-4); } .legend .sw.s5 { background: var(--viz-5); }
.legend .lv { font-weight: 800; font-variant-numeric: tabular-nums; }
.legend .ln { overflow-wrap: anywhere; line-height: 1.25; }
.viz-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--inchiostro); color: var(--carta); font-size: .75rem; font-weight: 800; padding: 7px 11px; border-radius: 10px;
  white-space: nowrap; transform: translate(-50%, calc(-100% - 8px)); box-shadow: 0 10px 20px -10px rgb(35 26 20 / .6); }
.viz-tip small { display: block; font-weight: 500; opacity: .85; }
/* classifiche: barre orizzontali in HTML, leggibili e accessibili come una lista */
ol.rank { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
ol.rank li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
ol.rank .rk-name { overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.3; font-weight: 700; }
ol.rank a.rk-name { display: inline-flex; align-items: center; min-height: 44px; }   /* bersaglio di tocco ≥ 44 px */
ol.rank .rk-val { font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--step--1); color: var(--seppia); }
ol.rank .rk-bar { grid-column: 1 / -1; height: 8px; border-radius: 6px; background: var(--viz-track); overflow: hidden; }
ol.rank .rk-bar > span { display: block; height: 100%; width: calc(var(--v, 0) * 1%); min-width: 4px; background: var(--viz-bar); border-radius: 6px; transition: width .9s var(--ease); }
ol.rank li:first-child .rk-bar > span { background: var(--terracotta); }
.viz-empty { color: var(--seppia); margin: 8px 0; font-size: var(--step--1); }
.viz-table summary { font-size: var(--step--1); color: var(--link); font-weight: 800; padding: 4px 0; min-height: 44px; }
.viz-table table { margin-bottom: 4px; }
.viz-table td.num, .viz-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.reading-now { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.reading-now a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; text-decoration: none; color: var(--inchiostro); min-height: 60px; font-weight: 500; }
.reading-now a:hover { color: var(--inchiostro); }
.reading-now .cover, .reading-now .cover-wrap { width: 40px; height: 60px; }
.reading-now .cover-gen .cover-initial { font-size: 1.1rem; }
.reading-now b { font: 400 1.1rem/1.25 var(--serif); display: block; }
.reading-now span { font-size: var(--step--1); color: var(--seppia); }
.stars { display: inline-flex; gap: 1px; color: var(--q-peach-ink); vertical-align: -2px; }
.stars .icon { width: 16px; height: 16px; }

/* --- Profilo: scheda con avatar e righe come le impostazioni del telefono ------------------ */
.profile h1 { margin-bottom: .2em; }
.me-card { position: relative; display: flex; align-items: center; gap: 16px; background: var(--verde); color: #F6EFE4; border-radius: var(--r-card-l); padding: 22px; box-shadow: var(--shadow-verde);
  margin: 8px 0 22px; overflow: hidden; isolation: isolate; animation: rise var(--t-enter) var(--ease) both; }
.me-card::before, .me-card::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgb(246 239 228 / .09); z-index: -1; }
.me-card::before { right: -70px; top: -90px; width: 260px; height: 260px; }
.me-card::after { right: -30px; top: -50px; width: 180px; height: 180px; }
.me-card b { font: 400 1.6rem/1.1 var(--serif); display: block; overflow-wrap: anywhere; }
.me-who { min-width: 0; flex: 1; }
.me-card { container: me / inline-size; }
@container me (max-width: 15rem) { .me-card .avatar { width: 44px; height: 44px; font-size: 1rem; } .me-card b { font-size: 1.35rem; } }
.me-who > span { color: rgb(246 239 228 / .82); font-size: var(--step--1); overflow-wrap: anywhere; }
.me-card .avatar { background: var(--albicocca); color: #3B2219; box-shadow: 0 0 0 4px rgb(246 239 228 / .12); }
.me-card .badge { margin-top: 8px; background: rgb(246 239 228 / .12); color: #F6EFE4; }
.me-card a { color: var(--albicocca); }
.set-group-title { font: 800 .75rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--terracotta-text); margin: 26px 6px 10px; }
.set-list { background: var(--avorio); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; animation: rise var(--t-enter) var(--ease) both; }
.set-row { border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row > summary, a.set-link, button.set-link { list-style: none; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 16px;
  min-height: 66px; font: 800 .9375rem/1.25 var(--sans); color: var(--inchiostro); text-decoration: none; width: 100%; background: none; border: 0; border-radius: 0; text-align: left; box-shadow: none; transform: none; }
.set-row > summary::-webkit-details-marker { display: none; }
.set-row > summary:hover, a.set-link:hover, button.set-link:hover { background: color-mix(in srgb, var(--pergamena) 45%, transparent); color: var(--inchiostro); }
.set-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--bg, var(--q-sage)); color: var(--fg, var(--q-sage-ink)); }
.set-ico .icon { width: 20px; height: 20px; }
.set-text { min-width: 0; display: flex; flex-direction: column; }
.set-text small { font-weight: 500; color: var(--seppia); font-size: .8125rem; line-height: 1.35; margin-top: 2px; }
.set-row .chev, .set-link .chev { color: var(--seppia); width: 20px; height: 20px; transition: transform .3s var(--ease); }
.set-row[open] > summary .chev { transform: rotate(90deg); }
.set-row[open] > summary { background: color-mix(in srgb, var(--pergamena) 35%, transparent); }
.set-body { padding: 6px 18px 18px 70px; }
@media (max-width: 520px) { .set-body { padding-left: 18px; } }
.set-body > :first-child { margin-top: 8px; }
.set-pill { font: 800 .75rem/1.3 var(--sans); padding: 4px 10px; border-radius: 9px; background: var(--ok-bg); color: var(--ok-ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.set-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.set-pill.off { background: var(--pergamena); color: var(--seppia); }
.set-pill.warn { background: var(--order-bg); color: var(--order-ink); }
.set-ico.sage { --bg: var(--q-sage); --fg: var(--q-sage-ink); } .set-ico.sky { --bg: var(--q-sky); --fg: var(--q-sky-ink); } .set-ico.rose { --bg: var(--q-rose); --fg: var(--q-rose-ink); }
.set-ico.peach { --bg: var(--q-peach); --fg: var(--q-peach-ink); } .set-ico.lilac { --bg: var(--q-wheat); --fg: var(--q-wheat-ink); }
.set-prefs { padding: 16px 18px 8px; }
.set-prefs .switch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); margin: 0; }
.set-prefs .switch-row .set-text { font-weight: 800; }
.set-prefs .seg-size { flex-wrap: nowrap; }
.set-prefs .seg-size .seg-opt { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 0; text-align: center; line-height: 1.2; padding: 8px 6px; min-height: 64px; }
.set-prefs .pref-label { margin-top: 0; }
.set-prefs .seg { margin-bottom: 14px; }
button.set-link.danger-row { color: var(--no-ink); }
button.set-link.danger-row .set-ico { --bg: var(--no-bg); --fg: var(--no-ink); }
.profile .panel { border: 0; padding: 0; }
@media (min-width: 1024px) { .profile .set-group { display: block; } }

/* --- Prestiti: card calde, stato a colpo d'occhio (colore + icona + testo) ---------------- */
.loans-page .page-head h1 { margin-bottom: 0; }
.loans-page > .lead { margin: 2px 0 10px; font-weight: 700; font-size: .9375rem; }
.loans-page .loan-group { margin-top: 10px; }
.loans-page .loan-group h2 { font-size: 1.5rem; margin: 22px 0 12px; }
.loans-page .loan-group h2 .count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 9px; background: var(--pergamena); color: var(--inchiostro); font-weight: 800; }
.loans-page .loan-group.overdue h2, .loans-page .loan-group.overdue h2 .icon { color: var(--no-ink); }
.loans-page .loan-group.overdue h2 .count { background: var(--no-bg); color: var(--no-ink); }
.loans-page .loan-group.due_soon h2 .icon { color: var(--order-ink); }
.loans-page .loan-group.due_soon h2 .count { background: var(--order-bg); color: var(--order-ink); }
.loans-page ul.loans { display: grid; gap: 12px; }
@media (min-width: 900px) { .loans-page ul.loans { grid-template-columns: 1fr 1fr; } }
.loans-page .loan-item { background: var(--avorio); border: 1px solid var(--line); border-left: 0; border-radius: 24px; padding: 16px; box-shadow: none; animation: rise var(--t-enter) var(--ease) both;
  display: flex; flex-direction: column; gap: 4px; }
.loans-page .loan-item.soon { background: color-mix(in srgb, var(--q-peach) 55%, var(--avorio)); }
.loans-page .loan-item.late { background: color-mix(in srgb, var(--no-bg) 60%, var(--avorio)); border-color: color-mix(in srgb, var(--no-ink) 18%, transparent); }
.loans-page .loan-book { grid-template-columns: 52px minmax(0, 1fr); }
.loans-page .loan-book .cover, .loans-page .loan-book .cover-wrap { width: 52px; height: 78px; }
.loans-page .loan-book .title { font: 400 1.3rem/1.1 var(--serif); }
.loans-page .loan-who { font-weight: 700; color: var(--inchiostro); }
.loans-page .loan-due { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; width: fit-content; margin-top: 8px; padding: 4px 10px; border-radius: 9px; font: 800 .75rem/1.3 var(--sans);
  background: var(--ok-bg); color: var(--ok-ink); }
.loans-page .loan-due.soon { background: var(--order-bg); color: var(--order-ink); }
.loans-page .loan-due.late { background: var(--no-bg); color: var(--no-ink); }
.loans-page .loan-actions { margin-top: 10px; }
.loans-page .loans-privacy { color: var(--seppia); background: var(--pergamena); border-radius: 18px; padding: 14px 16px; max-width: none; }
.loans-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; padding: 0; list-style: none; }
.loans-kpis li { background: var(--avorio); border: 1px solid var(--line); border-radius: 20px; padding: 14px; }
.loans-kpis b { display: block; font: 400 1.875rem/1 var(--serif); }
.loans-kpis span { display: block; margin-top: 6px; font-size: .75rem; font-weight: 700; color: var(--seppia); }
.loans-kpis .late b { color: var(--no-ink); }
.loans-kpis .soon b { color: var(--terracotta-text); }

/* pagina "In arrivo" (moduli non ancora disponibili) */
.soon-page .hero-empty { max-width: 560px; }
/* ==================================================================================
   Scaffale: stili e dorsi leggibili
   Ogni mobile ha uno stile (data-style): classico, gotico, antico, moderno, futuristico.
   Gli stili sono solo "gettoni" (variabili CSS) usati da mobile, ripiani, dorsi, copertine,
   cartellino, anteprima e finestra di modifica. Il testo dei dorsi resta ≥ 4.5:1.
   ================================================================================== */
:root {
  --shelf-h: 10rem;       /* altezza utile di un ripiano (dorsi) — letta anche da shelf.js */
  --shelf-hc: 9.25rem;    /* ripiano in vista Copertine */
  --preview-h: 8rem;      /* anteprima "Mettilo qui" */
  --spine-fs: .8125rem;   /* corpo del titolo sul dorso (≥ 12 px) */
}
@media (min-width: 900px) { :root { --shelf-h: 12.5rem; --shelf-hc: 13rem; --spine-fs: .9375rem; } }

/* --- gettoni: Classico (anche il predefinito) --- */
:root, [data-style="classico"] {
  --gilt: #D9B26A;
  --p0: #1E4D43; --p1: #6B2430; --p2: #22385E; --p3: #7A531A; --p4: #3F4A52; --p5: #8A3B24; --p6: #4F2D4F; --p7: #4E5829;
  --spine-ink: #F3EEE2;
  --spine-font: var(--serif); --spine-w: 600; --spine-ls: .01em; --spine-caps: normal; --spine-tt: none;
  --case-bg:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 7px, rgb(0 0 0 / .045) 7px 8px, transparent 8px 13px),
    repeating-linear-gradient(90deg, transparent 0 37px, rgb(0 0 0 / .06) 37px 39px, transparent 39px 61px),
    linear-gradient(180deg, var(--wood), var(--wood-2));
  --case-shadow: inset 0 0 0 1px rgb(0 0 0 / .18), inset 0 1px 0 rgb(255 255 255 / .12), var(--shadow);
  --case-radius: 8px;
  --back:
    linear-gradient(180deg, rgb(0 0 0 / .22), rgb(0 0 0 / .06) 16px, transparent 34px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .018) 0 1px, transparent 1px 9px, rgb(255 255 255 / .03) 9px 10px, transparent 10px 23px),
    var(--wood-back);
  --board: linear-gradient(180deg, #B98F62 0 2px, var(--wood) 2px 60%, var(--wood-2));
  --board-h: 12px;
  --board-shadow: 0 5px 6px -3px rgb(0 0 0 / .35);
  --label: #5B4631; --label-font: 650 .9rem var(--sans);
  --frame-solid: var(--wood);
  --fade: rgb(40 26 14 / .55);
  --hi: var(--tape);
  --lp-bg: var(--ink); --lp-ink: var(--paper); --lp-ink-2: color-mix(in srgb, var(--paper) 82%, var(--ink)); --lp-font: var(--serif); --lp-line: transparent;
}
@media (prefers-color-scheme: dark) { :root, [data-style="classico"] { --label: #D3C0A4; --board: linear-gradient(180deg, #8A6A48 0 2px, var(--wood) 2px 60%, var(--wood-2)); } }

/* --- Gotico: ebano, arco a sesto acuto, pinnacoli, luce di candela, cuoio e oro --- */
[data-style="gotico"], .shelf-preview:has(.spine[data-style="gotico"]) {
  --gilt: #D9B46A;
  --p0: #4E151B; --p1: #1D3527; --p2: #141217; --p3: #2B1E16; --p4: #1A2135; --p5: #36192F; --p6: #3D1016; --p7: #283420;
  --spine-ink: #E9CB85;
  --spine-font: var(--serif); --spine-w: 600; --spine-ls: .03em; --spine-caps: small-caps; --spine-tt: none;
  --ebony: linear-gradient(90deg, #0E0907, #2C1E16 7%, #1A120E 22%, #22170F 50%, #1A120E 78%, #2C1E16 93%, #0E0907);
  --case-bg:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .02) 0 1px, transparent 1px 5px, rgb(0 0 0 / .08) 5px 6px, transparent 6px 11px),
    var(--ebony);
  --case-shadow: inset 0 0 0 1px rgb(217 180 106 / .18), inset 0 0 0 4px #120C09, inset 0 0 0 5px rgb(217 180 106 / .22), 0 18px 30px -16px rgb(0 0 0 / .7), var(--shadow);
  --case-radius: 0 0 6px 6px;
  --back:
    radial-gradient(ellipse 60% 120% at 50% -18%, rgb(255 176 92 / .30), rgb(255 150 70 / .10) 45%, transparent 72%),
    linear-gradient(180deg, rgb(0 0 0 / .6), transparent 28px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgb(0 0 0 / .22) 46px 48px, rgb(255 210 150 / .04) 48px 49px),
    #24170F;
  --board: linear-gradient(180deg, #5A4030 0 1px, #2E2018 1px 3px, #1C130E 3px 70%, #0E0907);
  --board-h: 13px;
  --board-shadow: 0 6px 8px -3px rgb(0 0 0 / .7);
  --label: #E2C27A; --label-font: 600 .95rem var(--serif);
  --frame-solid: #1A120E;
  --fade: rgb(10 6 4 / .75);
  --hi: #E8C477;
  --lp-bg: linear-gradient(180deg, #2A1C14, #160F0B); --lp-ink: #F1DDA8; --lp-ink-2: #D2B98A; --lp-font: var(--serif); --lp-line: #8A6A35;
}
/* --- Antico: noce, cornice dorata, targhette in ottone, cuoio con nervi --- */
[data-style="antico"], .shelf-preview:has(.spine[data-style="antico"]) {
  --gilt: #DDBA62;
  --p0: #6E3F1F; --p1: #7A3E17; --p2: #561B21; --p3: #22402E; --p4: #1E2C44; --p5: #53311D; --p6: #45431F; --p7: #5E3B1E;
  --spine-ink: #F0D48C;
  --spine-font: var(--serif); --spine-w: 600; --spine-ls: .02em; --spine-caps: normal; --spine-tt: none;
  --walnut: linear-gradient(90deg, #2E1A0E, #5A3820 9%, #4A2D18 30%, #553420 50%, #4A2D18 70%, #5A3820 91%, #2E1A0E);
  --case-bg:
    repeating-linear-gradient(92deg, rgb(255 230 190 / .03) 0 2px, transparent 2px 9px, rgb(0 0 0 / .07) 9px 10px, transparent 10px 17px),
    var(--walnut);
  --case-shadow: inset 0 0 0 2px #2A170B, inset 0 0 0 3px #C9A24A, inset 0 0 0 5px #3A2414, inset 0 0 0 6px rgb(221 186 98 / .55), 0 16px 28px -14px rgb(0 0 0 / .6), var(--shadow);
  --case-radius: 2px;
  --back:
    radial-gradient(ellipse 80% 140% at 50% 20%, rgb(255 205 140 / .14), transparent 55%, rgb(0 0 0 / .42) 100%),
    linear-gradient(180deg, rgb(0 0 0 / .5), transparent 26px),
    repeating-linear-gradient(90deg, rgb(255 220 170 / .02) 0 1px, transparent 1px 6px),
    #3A2416;
  --board: linear-gradient(180deg, #E2C06A 0 1px, #8A5A32 1px 3px, #64401F 3px 65%, #3E2512);
  --board-h: 13px;
  --board-shadow: 0 6px 7px -3px rgb(0 0 0 / .6);
  --label: #2E1E08; --label-font: 700 .78rem var(--serif);
  --frame-solid: #4A2D18;
  --fade: rgb(30 16 8 / .7);
  --hi: #F0D48C;
  --lp-bg: linear-gradient(180deg, #F7ECD2, #EADBB6); --lp-ink: #33210F; --lp-ink-2: #5A4026; --lp-font: var(--serif); --lp-line: #B38B3A;
}
/* --- Moderno: mensole sospese, nessuna cornice, colori nordici --- */
[data-style="moderno"], .shelf-preview:has(.spine[data-style="moderno"]) {
  --p0: #9DB39A; --p1: #E2D3B6; --p2: #C96F4A; --p3: #26323D; --p4: #D8A73B; --p5: #93AABD; --p6: #E3B9A6; --p7: #3E5B4C;
  --q0: #1A2620; --q1: #2B2418; --q2: #1E0F08; --q3: #F1EDE4; --q4: #2A1E05; --q5: #132230; --q6: #3A1D12; --q7: #EEF2EC;
  --spine-ink: #1E2428;
  --spine-font: var(--sans); --spine-w: 600; --spine-ls: .01em; --spine-caps: normal; --spine-tt: none;
  --case-bg: transparent;
  --case-shadow: none;
  --case-radius: 0;
  --back: transparent;
  --board: linear-gradient(180deg, #F1E6D2 0 1px, #DCC8A6 1px 55%, #CDB68F);
  --board-h: 8px;
  --board-shadow: 0 12px 16px -10px rgb(60 45 25 / .45), 0 2px 3px -1px rgb(0 0 0 / .18);
  --label: var(--ink-2); --label-font: 500 .8125rem var(--sans);
  --frame-solid: var(--paper);
  --fade: color-mix(in srgb, var(--paper) 92%, transparent);
  --hi: #C96F4A;
  --lp-bg: #FFFFFF; --lp-ink: #1E2428; --lp-ink-2: #4E575E; --lp-font: var(--sans); --lp-line: #D9DEE2;
}
@media (prefers-color-scheme: dark) {
  [data-style="moderno"], .shelf-preview:has(.spine[data-style="moderno"]) {
    --board: linear-gradient(180deg, #5A6067 0 1px, #3B4046 1px 55%, #2F3338);
    --board-shadow: 0 12px 18px -10px rgb(0 0 0 / .8), 0 2px 3px -1px rgb(0 0 0 / .5);
    --p0: #8FA68C; --p1: #CDBF9F; --p2: #C46A45; --p3: #3A4A58; --p4: #CF9E35; --p5: #879FB2; --p6: #D7AE9B; --p7: #4A6B5A;
    --lp-bg: #262B30; --lp-ink: #EEF1F3; --lp-ink-2: #B8C0C6; --lp-line: #3B4249;
  }
}
/* --- Futuristico: vetro scuro, griglia, luci al neon, lastre di vetro luminose --- */
[data-style="futuristico"], .shelf-preview:has(.spine[data-style="futuristico"]) {
  --p0: #22E5F5; --p1: #FF4FD8; --p2: #A6FF4D; --p3: #9A7BFF; --p4: #FFC247; --p5: #4DA3FF; --p6: #FF6B6B; --p7: #4DFFC3;
  --spine-ink: #EAFBFF;
  --spine-font: var(--sans); --spine-w: 600; --spine-ls: .07em; --spine-caps: normal; --spine-tt: uppercase;
  --case-bg:
    linear-gradient(180deg, rgb(255 255 255 / .07), transparent 30%),
    repeating-linear-gradient(0deg, rgb(34 229 245 / .07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgb(34 229 245 / .07) 0 1px, transparent 1px 22px),
    linear-gradient(160deg, #0A1020, #111C36 60%, #0A0E1C);
  --case-shadow: inset 0 0 0 1px rgb(34 229 245 / .55), inset 0 0 24px rgb(34 229 245 / .08), 0 0 18px -4px rgb(34 229 245 / .5), 0 0 44px -12px rgb(255 79 216 / .55), var(--shadow);
  --case-radius: 14px;
  --back: linear-gradient(180deg, rgb(34 229 245 / .06), transparent 40%), rgb(255 255 255 / .015);
  --board: linear-gradient(180deg, rgb(200 240 255 / .28) 0 1px, rgb(160 220 255 / .10) 1px 4px, transparent 4px), linear-gradient(90deg, #22E5F5, #9A7BFF 50%, #FF4FD8);
  --board-h: 6px;
  --board-shadow: 0 0 10px rgb(34 229 245 / .6), 0 8px 18px -6px rgb(255 79 216 / .5);
  --label: #9FEAF5; --label-font: 600 .8rem var(--sans);
  --frame-solid: #0B1222;
  --fade: rgb(8 12 26 / .85);
  --hi: #22E5F5;
  --lp-bg: rgb(10 16 32 / .94); --lp-ink: #EAFBFF; --lp-ink-2: #A9DDE6; --lp-font: var(--sans); --lp-line: rgb(34 229 245 / .7);
}

/* --- pagina --- */
.shelf-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin: 2px 0 6px; }
.shelf-tools .hint { margin: 0; flex: 1 1 260px; }
.seg.shelf-mode { margin: 0; flex: 0 0 auto; flex-wrap: nowrap; border: 0; padding: 4px; min-width: 0; }
.seg.shelf-mode .seg-opt { flex: 0 0 auto; padding-inline: 14px; }
.bookcase { margin: 22px 0 36px; }
.case-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.case-head h2 { margin: 0; }
.case-head .meta { margin: 2px 0 0; }
.case-head .row { margin: 0; }

/* --- il mobile --- */
.case-body { position: relative; width: fit-content; min-width: min(100%, 360px); max-width: 100%; margin-top: 14px; --crown-h: 0px; --base-h: 0px; }
@media (min-width: 900px) { .case-body { min-width: min(100%, 620px); } }
.case-frame { position: relative; overflow-x: auto; overscroll-behavior-x: contain; padding: 12px 12px 14px; border-radius: var(--case-radius); background: var(--case-bg);
  box-shadow: var(--case-shadow); scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--label) 60%, transparent) transparent; }
.case-crown, .case-base { display: none; position: relative; pointer-events: none; }
.case-fade { position: absolute; top: var(--crown-h); bottom: var(--base-h); width: 36px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .2s; display: grid; align-items: center; }
.case-fade.l { left: 0; background: linear-gradient(90deg, var(--fade), transparent); justify-items: start; }
.case-fade.r { right: 0; background: linear-gradient(270deg, var(--fade), transparent); justify-items: end; }
.case-fade::after { content: "‹"; font: 700 1.4rem/1 var(--sans); color: #FFF; text-shadow: 0 1px 3px rgb(0 0 0 / .7); padding: 0 6px; }
.case-fade.r::after { content: "›"; }
.case-body.can-l .case-fade.l, .case-body.can-r .case-fade.r { opacity: 1; }

.shelf-row { position: relative; display: grid; grid-template-columns: 30px minmax(calc(var(--cap) * var(--unit, 34px)), 1fr) 46px; align-items: end; gap: 6px;
  padding: 10px 6px var(--board-h) 4px; background: var(--back); box-shadow: inset 0 0 0 0 transparent; }
.shelf-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--board-h); background: var(--board); box-shadow: var(--board-shadow); z-index: 1; pointer-events: none; }
.shelf-row.over { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--danger) 75%, transparent); }
.shelf-row.over .shelf-count { color: var(--danger); font-weight: 700; }
.shelf-no { align-self: center; justify-self: center; font: var(--label-font); color: var(--label); text-align: center; position: relative; z-index: 2; }
.shelf-count { align-self: center; font: var(--label-font); font-size: .8125rem; color: var(--label); font-variant-numeric: tabular-nums; text-align: right; z-index: 2; }
.shelf-books { display: flex; align-items: flex-end; gap: 2px; height: var(--shelf-h); min-width: 0; position: relative; z-index: 2; }
.shelf-empty { align-self: center; color: var(--label); font: italic 500 var(--step--1) var(--spine-font); padding-left: 8px; }
.spine-slot { display: contents; }

/* --- il dorso --- */
.spine.c0, .sw-book.c0 { --sp: var(--p0); --sp-ink: var(--q0, var(--spine-ink)); }
.spine.c1, .sw-book.c1 { --sp: var(--p1); --sp-ink: var(--q1, var(--spine-ink)); }
.spine.c2, .sw-book.c2 { --sp: var(--p2); --sp-ink: var(--q2, var(--spine-ink)); }
.spine.c3, .sw-book.c3 { --sp: var(--p3); --sp-ink: var(--q3, var(--spine-ink)); }
.spine.c4, .sw-book.c4 { --sp: var(--p4); --sp-ink: var(--q4, var(--spine-ink)); }
.spine.c5, .sw-book.c5 { --sp: var(--p5); --sp-ink: var(--q5, var(--spine-ink)); }
.spine.c6, .sw-book.c6 { --sp: var(--p6); --sp-ink: var(--q6, var(--spine-ink)); }
.spine.c7, .sw-book.c7 { --sp: var(--p7); --sp-ink: var(--q7, var(--spine-ink)); }
.spine { --w: 30px; --hh: .9; position: relative; width: var(--w); height: calc(var(--shelf-h, 100px) * var(--hh)); min-height: 0; flex: none; margin: 0;
  padding: var(--pt, 14px) 0 var(--pb, 12px); border: 0; border-radius: 2px 2px 1px 1px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  overflow: hidden; color: var(--sp-ink); cursor: grab; touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background:
    linear-gradient(180deg, transparent 5px, var(--gilt) 5px 6px, transparent 6px 8px, var(--gilt) 8px 9px, transparent 9px),
    linear-gradient(0deg, transparent 4px, var(--gilt) 4px 5px, transparent 5px 7px, var(--gilt) 7px 8px, transparent 8px),
    linear-gradient(90deg, rgb(0 0 0 / .26), rgb(255 255 255 / .09) 18%, rgb(255 255 255 / .03) 42%, rgb(0 0 0 / .05) 72%, rgb(0 0 0 / .3)),
    var(--sp);
  box-shadow: 0 1px 1px rgb(0 0 0 / .3), 1px 0 0 rgb(0 0 0 / .18);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s; font-weight: 500; }
.spine:hover { transform: translateY(-3px); }
.spine-t { writing-mode: vertical-rl; transform: rotate(180deg); margin: auto 0; text-align: center; overflow: hidden; max-height: 100%; flex: 0 1 auto;
  font: var(--spine-w) var(--fs, 13px)/var(--lh, 15px) var(--spine-font); letter-spacing: var(--spine-ls); font-variant-caps: var(--spine-caps); text-transform: var(--spine-tt); }
.spine-t .ln { display: block; white-space: nowrap; }
.spine-t.clip .ln { overflow: hidden; text-overflow: ellipsis; }
.spine-a { writing-mode: vertical-rl; transform: rotate(180deg); flex: none; margin-top: 10px; white-space: nowrap;
  font: 500 var(--afs, 11.5px)/1.2 var(--spine-font); font-variant-caps: small-caps; letter-spacing: .04em; opacity: 1; }
.spine-mark { display: none; }
.spine.mini { --shelf-h: 60px; height: 60px; padding: 4px 0; cursor: default; }
.spine.mini .spine-t { font-size: .75rem; line-height: 1.1; }
.spine.mini .spine-t .ln { overflow: hidden; text-overflow: ellipsis; max-height: 52px; }
ul.loose .book { grid-template-columns: 24px minmax(0, 1fr) auto; }

/* Gotico: oro in alto e in basso, quadrilobo sul dorso */
.spine[data-style="gotico"] {
  background:
    linear-gradient(180deg, transparent 3px, var(--gilt) 3px 5px, transparent 5px),
    linear-gradient(0deg, transparent 4px, var(--gilt) 4px 5px, transparent 5px 8px, var(--gilt) 8px 10px, transparent 10px),
    repeating-linear-gradient(17deg, rgb(255 255 255 / .025) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgb(0 0 0 / .45), rgb(255 220 170 / .10) 20%, rgb(255 220 170 / .03) 45%, rgb(0 0 0 / .1) 75%, rgb(0 0 0 / .5)),
    var(--sp);
  box-shadow: 0 1px 1px rgb(0 0 0 / .6), 1px 0 0 rgb(0 0 0 / .5); }
.spine[data-style="gotico"] .spine-mark { display: block; position: absolute; top: 8px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; opacity: .95;
  background: radial-gradient(circle at 50% 22%, var(--gilt) 0 1.6px, transparent 2px), radial-gradient(circle at 50% 78%, var(--gilt) 0 1.6px, transparent 2px),
    radial-gradient(circle at 22% 50%, var(--gilt) 0 1.6px, transparent 2px), radial-gradient(circle at 78% 50%, var(--gilt) 0 1.6px, transparent 2px); }
.spine[data-style="gotico"] .spine-t { text-shadow: 0 1px 0 rgb(0 0 0 / .6); }
/* Antico: nervi in rilievo e fregi dorati */
.spine[data-style="antico"] {
  --ridge: linear-gradient(180deg, rgb(0 0 0 / .45), rgb(255 230 180 / .28) 45%, rgb(0 0 0 / .5));
  --tool: linear-gradient(var(--gilt), var(--gilt));
  background:
    var(--tool) 0 3px / 100% 1px no-repeat, var(--ridge) 0 6px / 100% 4px no-repeat, var(--tool) 0 12px / 100% 1px no-repeat,
    var(--ridge) 0 14px / 100% 4px no-repeat, var(--tool) 0 20px / 100% 1px no-repeat,
    var(--tool) 0 calc(100% - 3px) / 100% 1px no-repeat, var(--ridge) 0 calc(100% - 6px) / 100% 4px no-repeat, var(--tool) 0 calc(100% - 12px) / 100% 1px no-repeat,
    var(--ridge) 0 calc(100% - 14px) / 100% 4px no-repeat,
    radial-gradient(ellipse at 30% 30%, rgb(255 220 170 / .10), transparent 60%),
    linear-gradient(90deg, rgb(0 0 0 / .42), rgb(255 230 190 / .12) 22%, rgb(255 230 190 / .04) 45%, rgb(0 0 0 / .12) 75%, rgb(0 0 0 / .45)),
    var(--sp);
  border-radius: 3px 3px 2px 2px; box-shadow: 0 1px 1px rgb(0 0 0 / .55), 1px 0 0 rgb(0 0 0 / .4); }
.spine[data-style="antico"] .spine-t { text-shadow: 0 1px 0 rgb(0 0 0 / .45); }
/* Moderno: colori pieni, niente fregi, angoli morbidi */
.spine[data-style="moderno"] {
  background: linear-gradient(90deg, rgb(0 0 0 / .07), transparent 22%, transparent 78%, rgb(0 0 0 / .09)), var(--sp);
  border-radius: 3px; box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 6px 10px -8px rgb(0 0 0 / .45); }
.spine[data-style="moderno"] .spine-mark { display: block; position: absolute; top: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: .55; }
/* Futuristico: lastre di vetro con testo luminoso e una striscia di luce */
.spine[data-style="futuristico"] {
  background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / .05) 26%, rgb(255 255 255 / .02) 70%, rgb(255 255 255 / .06)),
    color-mix(in srgb, var(--sp) 20%, #0B1424);
  border: 1px solid color-mix(in srgb, var(--sp) 60%, transparent); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 0 8px -2px color-mix(in srgb, var(--sp) 60%, transparent); color: var(--spine-ink); }
.spine[data-style="futuristico"]::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--sp);
  box-shadow: 0 0 6px var(--sp), 0 0 12px color-mix(in srgb, var(--sp) 60%, transparent); }
.spine[data-style="futuristico"] .spine-t, .spine[data-style="futuristico"] .spine-a { text-shadow: 0 0 6px color-mix(in srgb, var(--sp) 75%, transparent), 0 0 1px #FFF; }
.spine[data-style="futuristico"] .spine-a { font-variant-caps: normal; text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--afs, 11.5px) * .9); }
.spine[data-style="futuristico"]:hover, .spine[data-style="futuristico"]:focus-visible {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 14px 1px color-mix(in srgb, var(--sp) 75%, transparent), 0 0 28px -4px var(--sp); filter: brightness(1.15); }

/* stati: sfilato, segnaposto, spostato, fantasma del trascinamento */
.spine.pulled { transform: translateY(-16px) rotate(-3deg); box-shadow: 0 12px 18px -8px rgb(0 0 0 / .6); outline: 3px solid var(--hi); outline-offset: 1px; z-index: 4; }
.spine[data-style="futuristico"].pulled { box-shadow: 0 0 18px 2px color-mix(in srgb, var(--sp) 70%, transparent), 0 14px 22px -10px #000; outline-color: var(--sp); }
.spine[data-style="gotico"].pulled, .spine[data-style="antico"].pulled { box-shadow: 0 -10px 24px -6px rgb(255 190 110 / .45), 0 12px 18px -8px rgb(0 0 0 / .7); }
.spine.placeholder { opacity: .22; outline: 2px dashed var(--hi); outline-offset: -2px; }
.spine.moved { animation: glow 1.4s ease-in-out 3; outline: 3px solid var(--hi); }
@keyframes glow { 50% { transform: translateY(-8px); } }
.spine.drag-ghost { position: fixed; z-index: 200; pointer-events: none; cursor: grabbing; box-shadow: 0 22px 30px -12px rgb(0 0 0 / .6); transition: none; margin: 0; }
.spine.drag-ghost[data-style="futuristico"] { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--sp) 70%, transparent), 0 22px 30px -12px #000; }
.spine.drag-ghost[data-style="gotico"], .spine.drag-ghost[data-style="antico"] { box-shadow: 0 0 0 1px var(--gilt), 0 22px 30px -12px rgb(0 0 0 / .75); }
.spine.drag-ghost[data-style="moderno"] { box-shadow: 0 24px 34px -14px rgb(0 0 0 / .45); }
html.dragging, html.dragging * { cursor: grabbing !important; }

/* --- cornici: cimasa, pinnacoli, zoccolo --- */
.bookcase[data-style="classico"] .case-body { --base-h: 10px; }
.bookcase[data-style="classico"] .case-base { display: block; height: 10px; margin: 0 6px; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, var(--wood-2), color-mix(in srgb, var(--wood-2) 70%, #000)); box-shadow: 0 6px 10px -6px rgb(0 0 0 / .5); }

.bookcase[data-style="gotico"] .case-body { --crown-h: 84px; --base-h: 16px; }
.bookcase[data-style="gotico"] .case-crown { display: block; height: 84px; margin-bottom: -1px; }
.bookcase[data-style="gotico"] .case-crown::before { content: ""; position: absolute; inset: 0 14px;
  background:
    radial-gradient(circle at 50% 32px, rgb(255 196 120 / .95) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(50% - 6px) 41px, rgb(255 176 92 / .85) 0 5px, transparent 5.5px),
    radial-gradient(circle at calc(50% + 6px) 41px, rgb(255 176 92 / .85) 0 5px, transparent 5.5px),
    radial-gradient(circle at 50% 30px, rgb(255 176 92 / .85) 0 5px, transparent 5.5px),
    radial-gradient(circle at 50% 38px, rgb(255 150 60 / .35) 0 16px, transparent 22px),
    linear-gradient(180deg, transparent 62px, rgb(217 180 106 / .55) 62px 63px, transparent 63px 66px, rgb(0 0 0 / .5) 66px 68px, transparent 68px 78px, rgb(217 180 106 / .35) 78px 79px, transparent 79px),
    var(--ebony);
  clip-path: polygon(0 100%, 0 58px, calc(50% - 40px) 58px, calc(50% - 37px) 38.9px, calc(50% - 33px) 29.4px, calc(50% - 28px) 21.3px, calc(50% - 22px) 14.3px,
    calc(50% - 15px) 8.3px, calc(50% - 8px) 3.7px, 50% 0, calc(50% + 8px) 3.7px, calc(50% + 15px) 8.3px, calc(50% + 22px) 14.3px, calc(50% + 28px) 21.3px,
    calc(50% + 33px) 29.4px, calc(50% + 37px) 38.9px, calc(50% + 40px) 58px, 100% 58px, 100% 100%); }
.bookcase[data-style="gotico"] .case-crown::after { content: ""; position: absolute; left: 14px; right: 14px; top: 58px; height: 26px;
  background: radial-gradient(ellipse 9px 14px at 50% 100%, rgb(0 0 0 / .55) 0 70%, transparent 72%) 0 4px / 22px 22px repeat-x; opacity: .7;
  clip-path: polygon(0 0, calc(50% - 44px) 0, calc(50% - 44px) 100%, calc(50% + 44px) 100%, calc(50% + 44px) 0, 100% 0, 100% 100%, 0 100%); }
.bookcase[data-style="gotico"] .crown-l, .bookcase[data-style="gotico"] .crown-r { position: absolute; bottom: 0; width: 24px; height: 84px; z-index: 1;
  background: linear-gradient(90deg, #0E0907, #3A2A1E 40%, #1A120E);
  clip-path: polygon(50% 0, 60% 16%, 56% 16%, 68% 34%, 62% 34%, 76% 52%, 100% 52%, 100% 100%, 0 100%, 0 52%, 24% 52%, 38% 34%, 32% 34%, 44% 16%, 40% 16%); }
.bookcase[data-style="gotico"] .crown-l { left: 0; }
.bookcase[data-style="gotico"] .crown-r { right: 0; }
.bookcase[data-style="gotico"] .case-base { display: block; height: 16px; margin: 0 -4px; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, rgb(217 180 106 / .45) 0 1px, #2C1E16 1px 4px, #140D0A 4px 10px, #24170F 10px); box-shadow: 0 10px 18px -8px rgb(0 0 0 / .7); }

.bookcase[data-style="antico"] .case-body { --crown-h: 34px; --base-h: 22px; }
.bookcase[data-style="antico"] .case-crown { display: block; height: 34px; margin: 0 -10px -1px; }
.bookcase[data-style="antico"] .case-crown::before { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #2A170B 0 3px, #E2C06A 3px 5px, #6B4426 5px 9px, transparent 9px 18px, #C9A24A 18px 19px, transparent 19px 27px, #E2C06A 27px 28px, #3A2414 28px),
    repeating-linear-gradient(90deg, #8A5E34 0 6px, #C9A24A 6px 8px, #5A3820 8px 12px) 0 10px / 100% 7px no-repeat,
    linear-gradient(180deg, #6B4426, #4A2D18);
  clip-path: polygon(0 0, 100% 0, 100% 9px, calc(100% - 6px) 18px, calc(100% - 10px) 100%, 10px 100%, 6px 18px, 0 9px);
  box-shadow: 0 6px 10px -6px #000; }
.bookcase[data-style="antico"] .crown-l { position: absolute; left: 50%; top: -10px; width: 46px; height: 20px; margin-left: -23px; border-radius: 50% 50% 4px 4px / 100% 100% 4px 4px;
  background: radial-gradient(ellipse at 50% 70%, #F3D98C, #C9A24A 55%, #8A6420); box-shadow: 0 1px 2px rgb(0 0 0 / .5); }
.bookcase[data-style="antico"] .case-base { display: block; height: 22px; margin: -1px -6px 0;
  background: linear-gradient(180deg, #E2C06A 0 1px, #6B4426 1px 5px, #3A2414 5px 12px, transparent 12px),
    radial-gradient(ellipse 14px 10px at 22px 12px, #4A2D18 0 98%, transparent) 0 0 / 100% 100% no-repeat,
    radial-gradient(ellipse 14px 10px at calc(100% - 22px) 12px, #4A2D18 0 98%, transparent) 0 0 / 100% 100% no-repeat; }
.bookcase[data-style="antico"] .shelf-no { padding: 1px 5px 2px; min-width: 24px; border-radius: 2px; line-height: 1.2;
  background: radial-gradient(circle at 3px 50%, #6B4E1A 0 1px, transparent 1.5px), radial-gradient(circle at calc(100% - 3px) 50%, #6B4E1A 0 1px, transparent 1.5px),
    linear-gradient(180deg, #F2D98E, #D2AE55 50%, #B08A36);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 1px 2px rgb(0 0 0 / .6); text-shadow: 0 1px 0 rgb(255 240 200 / .5); }
.bookcase[data-style="antico"] .shelf-count, .bookcase[data-style="antico"] .shelf-empty { color: #E9CF8E; }

.bookcase[data-style="moderno"] .case-frame { padding: 4px 0 6px; overflow-y: visible; }
.bookcase[data-style="moderno"] .shelf-row { margin-bottom: 26px; padding-left: 0; padding-right: 0; }
.bookcase[data-style="moderno"] .shelf-row:last-child { margin-bottom: 14px; }
.bookcase[data-style="moderno"] .shelf-row::after { left: 30px; right: 4px; border-radius: 2px; }
.bookcase[data-style="moderno"] .shelf-no { font-weight: 300; font-size: 1.1rem; }

.bookcase[data-style="futuristico"] .case-body { --crown-h: 0px; }
.bookcase[data-style="futuristico"] .case-crown, .bookcase[data-style="futuristico"] .case-base { display: block; position: absolute; left: 22px; right: 22px; height: 2px; z-index: 4; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #22E5F5 20%, #9A7BFF 50%, #FF4FD8 80%, transparent); box-shadow: 0 0 10px #22E5F5, 0 0 18px rgb(255 79 216 / .6); }
.bookcase[data-style="futuristico"] .case-crown { top: 0; }
.bookcase[data-style="futuristico"] .case-base { bottom: 0; }
.bookcase[data-style="futuristico"] .case-frame { padding: 16px 12px 16px; }
.bookcase[data-style="futuristico"] .shelf-row { margin-bottom: 6px; }
.bookcase[data-style="futuristico"] .shelf-row::after { left: 6px; right: 6px; border-radius: 3px; }
.bookcase[data-style="futuristico"] .case-fade::after, .bookcase[data-style="futuristico"] .shelf-no { text-shadow: 0 0 6px rgb(34 229 245 / .8); }
@media (prefers-reduced-motion: no-preference) {
  .bookcase[data-style="futuristico"] .case-crown, .bookcase[data-style="futuristico"] .case-base { background-size: 200% 100%; animation: neon-run 6s linear infinite; }
  @keyframes neon-run { from { background-position: 0 0; } to { background-position: 200% 0; } }
}

/* --- la lente: titolo e autore interi sopra il dorso --- */
.spine-loupe { position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none; max-width: min(340px, calc(100vw - 16px)); width: max-content;
  padding: 8px 14px 9px; border-radius: 10px; background: var(--lp-bg); color: var(--lp-ink); border: 1px solid var(--lp-line);
  box-shadow: 0 14px 30px -10px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .2); display: flex; flex-direction: column; gap: 2px; text-align: center;
  animation: loupe-in .14s ease-out; }
.spine-loupe::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -7px; width: 12px; height: 12px; background: var(--lp-bg); border: 1px solid var(--lp-line);
  border-width: 0 1px 1px 0; transform: translateX(-50%) rotate(45deg); }
.spine-loupe.below::after { bottom: auto; top: -7px; border-width: 1px 0 0 1px; }
.spine-loupe .lt { font: 650 1.0625rem/1.25 var(--lp-font); overflow-wrap: anywhere; }
.spine-loupe .la { font-size: .875rem; color: var(--lp-ink-2); }
.spine-loupe .la:empty { display: none; }
.spine-loupe[data-style="gotico"] .lt { font-variant-caps: small-caps; letter-spacing: .03em; }
.spine-loupe[data-style="futuristico"] { box-shadow: 0 0 18px -4px rgb(34 229 245 / .7), 0 14px 30px -10px #000; }
.spine-loupe[data-style="futuristico"] .lt { text-transform: uppercase; letter-spacing: .06em; font-size: .95rem; text-shadow: 0 0 8px rgb(34 229 245 / .6); }
@keyframes loupe-in { from { opacity: 0; transform: translateY(4px) scale(.97); } }

/* --- vista Copertine: libri di faccia --- */
.bookcase[data-mode="covers"] { --shelf-h: var(--shelf-hc); }
.bookcase[data-mode="covers"] .shelf-books { gap: 8px; }
.spine.face { padding: 0; border-radius: 2px 5px 5px 2px; background: var(--sp); justify-content: stretch; align-items: stretch;
  box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 16px -10px rgb(0 0 0 / .6), 4px 0 8px -6px rgb(0 0 0 / .4); }
.spine.face::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, rgb(0 0 0 / .28) 0 3px, rgb(255 255 255 / .16) 3px 4px, transparent 4px 12%, transparent 85%, rgb(255 255 255 / .06)); box-shadow: none; }
.spine.face:hover { transform: translateY(-4px) rotate(-1deg); }
.face-img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.face-gen { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 16% 10% 11% 15%; text-align: left; color: var(--sp-ink);
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 4px), var(--sp); }
.face-title { font: 650 clamp(.75rem, calc(var(--w) * .135), 1.05rem)/1.15 var(--spine-font); letter-spacing: var(--spine-ls); text-transform: var(--spine-tt); font-variant-caps: var(--spine-caps);
  overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.face-author { font: 500 .75rem/1.2 var(--spine-font); font-variant-caps: small-caps; letter-spacing: .03em; border-top: 1px solid currentColor; padding-top: 5px; }
.spine.face[data-style="gotico"] .face-gen, .spine.face[data-style="antico"] .face-gen { box-shadow: inset 0 0 0 5px var(--sp), inset 0 0 0 6px var(--gilt), inset 0 0 0 9px var(--sp), inset 0 0 0 10px color-mix(in srgb, var(--gilt) 60%, transparent); }
.spine.face[data-style="gotico"] .face-title, .spine.face[data-style="antico"] .face-title { text-align: center; }
.spine.face[data-style="gotico"] .face-gen, .spine.face[data-style="antico"] .face-gen { padding-inline: 13%; text-align: center; }
.spine.face[data-style="futuristico"] { background: color-mix(in srgb, var(--sp) 18%, #0B1424); border: 1px solid color-mix(in srgb, var(--sp) 65%, transparent); border-radius: 6px; }
.spine.face[data-style="futuristico"] .face-gen { background: linear-gradient(160deg, rgb(255 255 255 / .14), transparent 40%), color-mix(in srgb, var(--sp) 18%, #0B1424); }
.spine.face[data-style="futuristico"] .face-title { text-shadow: 0 0 8px color-mix(in srgb, var(--sp) 70%, transparent); }
.spine.face[data-style="futuristico"]::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 5px; height: 3px; border-radius: 2px; z-index: 1; background: var(--sp); box-shadow: 0 0 8px var(--sp); }
.spine.face[data-style="moderno"] { border-radius: 3px; }
.spine.face[data-style="moderno"]::after { background: linear-gradient(90deg, rgb(0 0 0 / .12) 0 2px, transparent 2px); }

/* --- scheda "Libro scelto" --- */
.spine-card { position: sticky; bottom: calc(var(--tabbar) + 8px + env(safe-area-inset-bottom)); z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; margin-top: 14px; padding: 14px 16px;
  background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); border: 1px solid var(--line); animation: stamp 250ms ease-out; }
.spine-card .title { margin: 0; font-size: 1.2rem; }
.spine-card p { margin: 2px 0; }
.spine-card-moves { display: grid; grid-template-columns: repeat(2, 48px); gap: 6px; }
.spine-card .row { grid-column: 1 / -1; margin: 4px 0 0; }
.spine-card > .muted { grid-column: 1 / -1; }
.loose-wrap { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 10px; }
@media (min-width: 900px) { .spine-card { bottom: 8px; } }
@media (max-width: 520px) { .spine-card { grid-template-columns: 1fr; } .spine-card-moves { grid-template-columns: repeat(4, 48px); } }

/* --- anteprima del ripiano ("Mettilo qui", scheda del libro) --- */
.shelf-preview { margin: 10px 0 6px; padding: 12px 12px 0; background: var(--back); border-radius: 6px 6px 0 0; overflow: hidden; box-shadow: inset 0 0 0 6px var(--frame-solid); }
.shelf-preview .shelf-books { --shelf-h: var(--preview-h); display: flex; align-items: flex-end; gap: 3px; height: var(--preview-h); justify-content: center; }
.shelf-preview .shelf-board { height: var(--board-h); margin: 0 -12px; background: var(--board); box-shadow: var(--board-shadow); position: relative; z-index: 3; }
.shelf-preview:is([data-style="moderno"], :has(.spine[data-style="moderno"])) { box-shadow: none; background: transparent; }
.shelf-preview:is([data-style="futuristico"], :has(.spine[data-style="futuristico"])) { background: var(--case-bg); box-shadow: inset 0 0 0 1px rgb(34 229 245 / .5); border-radius: 10px 10px 0 0; }
.shelf-preview .spine { cursor: default; }
.shelf-preview .spine.incoming { animation: slide-in 900ms cubic-bezier(.3,.7,.2,1) 250ms both; outline: 3px solid var(--hi); outline-offset: 1px; }
.shelf-preview .spine.here { outline: 3px solid var(--hi); outline-offset: 1px; transform: translateY(-6px); }
.shelf-preview .spine:has(+ .incoming) { animation: lean-left 900ms ease 250ms both; }
.shelf-preview .incoming + .spine { animation: lean-right 900ms ease 250ms both; }
@keyframes slide-in { 0% { transform: translateY(-120%) rotate(-8deg); opacity: 0; } 60% { transform: translateY(-6%) rotate(2deg); opacity: 1; } 100% { transform: none; } }
@keyframes lean-left { 0%, 30% { transform: none; } 55% { transform: translateX(-4px) rotate(-3deg); } 100% { transform: none; } }
@keyframes lean-right { 0%, 30% { transform: none; } 55% { transform: translateX(4px) rotate(3deg); } 100% { transform: none; } }

/* --- finestra "Modifica mobile": scelta dello stile --- */
.form-grid fieldset.style-pick { display: block; margin: 4px 0 8px; }
.style-pick legend { font: 550 var(--step--1) var(--sans); color: var(--ink-2); margin-bottom: 6px; }
.style-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.style-opt { display: grid; justify-items: center; gap: 2px; padding: 8px 6px 8px; border: 1px solid var(--line); border-radius: var(--r-m); cursor: pointer; text-align: center; background: var(--surface); min-height: 44px; }
.style-opt:hover { border-color: var(--field-border); }
.style-opt:has(input:checked) { border: 2px solid var(--accent); padding: 7px 5px 7px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.style-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.style-name { font-weight: 650; font-size: var(--step--1); }
.style-desc { font-size: .75rem; color: var(--ink-2); line-height: 1.25; }
.style-swatch { position: relative; display: grid; width: 74px; height: 56px; padding: 5px 6px 6px; margin: 12px 0 4px; align-content: end; border-radius: var(--case-radius);
  background: var(--case-bg); box-shadow: var(--case-shadow); }
.sw-row { display: flex; align-items: flex-end; gap: 1px; height: 30px; padding: 0 3px var(--sw-b, 4px); background: var(--back); position: relative; }
.sw-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--board); }
.sw-book { width: 8px; height: 22px; border-radius: 1px; background: var(--sp); position: relative; z-index: 1;
  background-image: linear-gradient(180deg, transparent 3px, var(--gilt, transparent) 3px 4px, transparent 4px); }
.sw-book:nth-child(2) { height: 25px; width: 10px; } .sw-book:nth-child(3) { height: 19px; } .sw-book:nth-child(4) { height: 24px; width: 7px; } .sw-book:nth-child(5) { height: 21px; width: 9px; }
.sw-crown { display: none; position: absolute; left: 0; right: 0; }
.style-swatch[data-style="gotico"] { border-radius: 0 0 3px 3px; }
.style-swatch[data-style="gotico"] .sw-crown { display: block; top: -12px; height: 13px; background: var(--ebony);
  clip-path: polygon(0 100%, 0 40%, 6px 0, 12px 40%, calc(50% - 12px) 40%, calc(50% - 9px) 18%, 50% 0, calc(50% + 9px) 18%, calc(50% + 12px) 40%, calc(100% - 12px) 40%, calc(100% - 6px) 0, 100% 40%, 100% 100%); }
.style-swatch[data-style="antico"] .sw-crown { display: block; top: -7px; left: -4px; right: -4px; height: 8px; background: linear-gradient(180deg, #2A170B 0 2px, #E2C06A 2px 3px, #6B4426 3px); clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 4px 100%); }
.style-swatch[data-style="moderno"] { box-shadow: none; }
.style-swatch[data-style="moderno"] .sw-row::after { height: 3px; border-radius: 1px; box-shadow: 0 4px 5px -3px rgb(0 0 0 / .35); }
.style-swatch[data-style="moderno"] .sw-book { background-image: none; border-radius: 2px; }
.style-swatch[data-style="futuristico"] .sw-row::after { height: 2px; box-shadow: 0 0 5px #22E5F5; }
.style-swatch[data-style="futuristico"] .sw-book { background: color-mix(in srgb, var(--sp) 25%, #0B1424); border: 1px solid var(--sp); box-shadow: 0 0 4px var(--sp); }

@media (max-width: 520px) {
  .shelf-row { grid-template-columns: 24px minmax(calc(var(--cap) * var(--unit, 34px)), 1fr) 38px; gap: 4px; }
  .case-frame { padding-inline: 8px; }
}

/* ==================================================================================
   Fogli (scheda breve dello scaffale, prestito): dal basso sul telefono, pannello a lato sul computer.
   <dialog> nativo: Esc, focus intrappolato; lo sfondo resta leggero per vedere il libro sfilato.
   ================================================================================== */
dialog.sheet { position: fixed; inset: auto 0 0 0; margin: 0; padding: 0; width: 100%; max-width: 100%; max-height: min(88dvh, 760px); border: 0;
  border-radius: 28px 28px 0 0; background: var(--avorio); color: var(--inchiostro); box-shadow: 0 -18px 50px -20px rgb(35 26 20 / .55); overflow: hidden; }
dialog.sheet[open] { display: flex; flex-direction: column; animation: sheet-up .38s var(--ease) both; }
dialog.sheet::backdrop { background: rgb(35 26 20 / .28); }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-inner { display: flex; flex-direction: column; min-height: 0; max-height: inherit; padding: 8px 20px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.sheet .sheet-grip { display: block; width: 44px; height: 5px; border-radius: 4px; background: rgb(35 26 20 / .2); margin: 0 auto 10px; flex: none; }
.sheet-head { display: flex; align-items: flex-start; gap: 14px; }
.sheet-head .sheet-cover { flex: none; }
.sheet-head .sheet-cover .cover, .sheet-head .sheet-cover .cover-wrap { width: 52px; height: 78px; }
.sheet-head .sheet-cover .cover-initial { font-size: 1.3rem; }
.sheet-titles { flex: 1; min-width: 0; padding-top: 4px; }
.sheet-title { margin: 0; font-size: 1.45rem; line-height: 1.12; overflow-wrap: anywhere; }
button.sheet-x { flex: none; width: 44px; min-height: 44px; border-radius: 14px; margin: -2px -6px 0 0; }
.sheet-body { min-width: 0; }
.sheet-sub { margin: 4px 0 0; color: var(--seppia); font-weight: 600; font-size: .875rem; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sheet-actions > * { flex: 1 1 140px; }
.sheet-actions > .ghost:last-child { flex: 0 1 auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) dialog.sheet::backdrop { background: rgb(0 0 0 / .5); } :root:not([data-theme="light"]) .sheet .sheet-grip { background: rgb(243 235 221 / .22); } }
:root[data-theme="dark"] dialog.sheet::backdrop { background: rgb(0 0 0 / .5); }
:root[data-theme="dark"] .sheet .sheet-grip { background: rgb(243 235 221 / .22); }
@media (min-width: 1024px) {
  dialog.sheet { inset: 24px 24px auto auto; width: 420px; max-height: calc(100dvh - 48px); border-radius: 28px; box-shadow: var(--shadow-lift), 0 0 0 1px var(--line); }
  dialog.sheet[open] { animation-name: sheet-side; }
  .sheet .sheet-grip { display: none; }
  .sheet-inner { padding: 20px 22px 22px; }
  dialog.sheet::backdrop { background: rgb(35 26 20 / .12); }
}
@keyframes sheet-side { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: fade .2s both !important; } }

/* stato del prestito: chi, fino a quando; scaduto in rosso con icona e testo */
.loan-status { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 600; line-height: 1.35; }
.loan-status .ls-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--q-peach); color: var(--q-peach-ink); }
.loan-status .ls-ico .icon { width: 18px; height: 18px; }
.loan-status .ls-txt { padding-top: 5px; }
.loan-status.soon .ls-due { color: var(--order-ink); font-weight: 800; }
.loan-status.late .ls-ico { background: var(--no-bg); color: var(--no-ink); }
.loan-status.late .ls-due { color: var(--no-ink); font-weight: 800; }

/* foglio «Prestito» */
.ln-form { margin-top: 8px; }
.ln-form .loan-status.ln-now { margin: 12px 0 4px; padding: 10px 12px; border-radius: 16px; background: var(--pergamena); }
.ln-form .field { margin: 14px 0 0; }
.ln-form input:not(.switch), .ln-form textarea { width: 100%; }
.ln-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ln-people[hidden] { display: none; }
button.ln-person { min-height: 40px; padding: 4px 12px; gap: 6px; }
button.ln-person .icon { width: 15px; height: 15px; }
.ln-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.ln-due-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ln-due-chips .chip { min-height: 44px; padding: 4px 14px; }
.ln-remind { margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--pergamena); align-items: center; }
.ln-remind > span { display: grid; gap: 2px; }
.ln-remind small { color: var(--seppia); font-size: .7812rem; line-height: 1.35; }
.ln-remind.off b { color: var(--seppia); }
.ln-history { margin-top: 10px; }
.ln-history ul { margin: 0; padding-left: 18px; color: var(--seppia); }

/* --- Home più leggera: contatori compatti e «Da ricordare» ------------------------------------------- */
.home-remind-slot { display: none; }
.home-kpis.compact { order: 4; }
.home-kpis.compact ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.home-kpis.compact .k-read { display: block; }
.home-kpis.compact .stat { padding: 10px 8px 9px; border-radius: 16px; text-align: center; }
.home-kpis.compact .stat-num { font-size: 1.375rem; }
.home-kpis.compact .stat-label { font-size: .75rem; margin-top: 3px; }
.home-remind { order: 3; background: var(--avorio); border: 1px solid var(--line); border-radius: 22px; padding: 14px 14px 6px; }
.hero-read { order: 2; }
.home-remind h2.eyebrow { margin: 0 0 4px; font: 800 .75rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta-text); }
.rm-list { list-style: none; margin: 0; padding: 0; }
.rm-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; }
.rm-item + .rm-item { border-top: 1px solid var(--line); }
.rm-ico { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--bg); color: var(--fg); }
.rm-ico .icon { width: 19px; height: 19px; }
.rm-ico.sky { --bg: var(--q-sky); --fg: var(--q-sky-ink); } .rm-ico.peach { --bg: var(--q-peach); --fg: var(--q-peach-ink); }
.rm-ico.rose { --bg: var(--q-rose); --fg: var(--q-rose-ink); } .rm-ico.sage { --bg: var(--q-sage); --fg: var(--q-sage-ink); }
.rm-ico.wheat { --bg: var(--q-wheat); --fg: var(--q-wheat-ink); }
.rm-txt { flex: 1 1 11rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }   /* se non c'è posto, il pulsante va sotto */
.rm-txt b { font-size: .875rem; line-height: 1.3; overflow-wrap: anywhere; }
.rm-txt small { font-size: .7812rem; color: var(--seppia); line-height: 1.35; }
.rm-act { flex: none; min-height: 44px; padding: 8px 14px; margin-left: auto; }
.quick { margin-top: 0; }
.qa-ico { width: 50px; height: 50px; border-radius: 17px; }
@media (min-width: 600px) {
  .home-top { order: 2; }
  .home-remind { order: 3; }
  .home-kpis.compact ul { height: auto; }
}
@media (min-width: 1024px) {
  .home-remind { order: 3; padding: 18px 22px 10px; border-radius: 24px; }
  .home-remind .rm-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); column-gap: 24px; }
  .home-remind .rm-item + .rm-item { border-top: 0; }
  .home-kpis.compact ul { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 100%; }
  .home-kpis.compact .stat { text-align: left; padding: 16px; }
  .home-kpis.compact .stat-num { font-size: 2rem; }
  .home-kpis.compact .stat-label { font-size: .8125rem; margin-top: 6px; }
  .home-top { order: 2; }
}

/* --- Ricerca globale ------------------------------------------------------------------------------------ */
.top-search { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 14px; display: grid; place-items: center; color: var(--inchiostro); background: transparent; }
.top-search .icon { width: 21px; height: 21px; }
.side-search { display: none; }
@media (min-width: 1024px) {
  .side-search:not([hidden]) { display: flex; align-items: center; gap: 8px; margin: -10px 4px 0; padding: 0 12px; height: 44px; border-radius: 14px; background: rgb(246 239 228 / .08);
    color: rgb(246 239 228 / .75); }
  .side-search:focus-within { background: rgb(246 239 228 / .14); outline: 2px solid var(--albicocca); }
  .side-search .icon { width: 18px; height: 18px; flex: none; }
  .side-search input { flex: 1; min-width: 0; min-height: 0; height: 100%; border: 0; background: transparent; color: #F6EFE4; font: 600 .875rem var(--sans); padding: 0; box-shadow: none; outline: 0; }
  .side-search input::placeholder { color: rgb(246 239 228 / .6); }
}
.sr-page { max-width: 860px; }
.sr-head h1 { margin-bottom: 10px; }
.sr-hint { margin: 8px 2px 0; }
@media (max-width: 1023px) { .sr-hint { display: none; } }
.sr-status { margin: 12px 2px 4px; }
.sr-group { margin-top: 18px; }
.sr-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sr-group-head h2 { margin: 0; font-size: 1.3125rem; }
.sr-count { font: 700 .875rem var(--sans); color: var(--seppia); }
.sr-list { display: flex; flex-direction: column; background: var(--avorio); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.sr-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; text-align: left; color: var(--inchiostro); text-decoration: none;
  background: transparent; border-radius: 0; font: inherit; font-weight: 500; width: 100%; justify-content: flex-start; }
.sr-item + .sr-item { border-top: 1px solid var(--line); }
.sr-item:hover, .sr-item:focus-visible { background: var(--pergamena); color: var(--inchiostro); }
.sr-item:focus-visible { outline-offset: -3px; }
.sr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-txt b { font-size: .9375rem; overflow-wrap: anywhere; }
.sr-txt small { font-size: .7812rem; color: var(--seppia); line-height: 1.35; }
.sr-where { display: inline-flex; align-items: center; gap: 4px; color: var(--ok-ink) !important; font-weight: 700; }
.sr-where .icon { width: 13px; height: 13px; }
.sr-txt mark, .sr-item mark { background: color-mix(in srgb, var(--albicocca) 55%, transparent); color: var(--inchiostro); border-radius: 3px; padding: 0 1px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.sr-txt, .sr-item) mark { background: color-mix(in srgb, var(--albicocca) 26%, transparent); } }
:root[data-theme="dark"] :is(.sr-txt, .sr-item) mark { background: color-mix(in srgb, var(--albicocca) 26%, transparent); }
.sr-pill { flex: none; font-size: .75rem; }
.sr-side-act { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 800; color: var(--link); flex: none; }
.sr-side-act .icon { width: 15px; height: 15px; }
.sr-empty { margin: 0; padding: 9px 14px; background: var(--avorio); border: 1px dashed var(--line-2); border-radius: 16px; }
.sr-have .fr-av { width: 34px; height: 34px; font-size: .875rem; }
.sr-online-go { width: 100%; justify-content: flex-start; }

/* --- La mia attività ---------------------------------------------------------------------------------------- */
.jr-page { max-width: 760px; }
.jr-head h1 { margin: 2px 0 0; }
.jr-head .fd-where a { color: inherit; }
.jr-lead { display: flex; gap: 10px; align-items: flex-start; font-size: .9062rem; color: var(--seppia); }
.jr-lead .icon { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--ok-ink); }
.jr-day { margin-top: 18px; }
.jr-day-h { margin: 0 0 6px; font: 800 .75rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--terracotta-text); }
.jr-day-h::first-letter { text-transform: uppercase; }
.jr-list { list-style: none; margin: 0; padding: 4px 14px; background: var(--avorio); border: 1px solid var(--line); border-radius: 20px; }
.jr-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; position: relative; }
.jr-item + .jr-item { border-top: 1px solid var(--line); }
.jr-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--bg); color: var(--fg); }
.jr-ico .icon { width: 17px; height: 17px; }
.jr-ico.sage { --bg: var(--q-sage); --fg: var(--q-sage-ink); } .jr-ico.sky { --bg: var(--q-sky); --fg: var(--q-sky-ink); } .jr-ico.rose { --bg: var(--q-rose); --fg: var(--q-rose-ink); }
.jr-ico.peach { --bg: var(--q-peach); --fg: var(--q-peach-ink); } .jr-ico.wheat { --bg: var(--q-wheat); --fg: var(--q-wheat-ink); }
.jr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jr-kind { font: 800 .75rem/1.2 var(--sans); color: var(--seppia); text-transform: uppercase; letter-spacing: .06em; }
.jr-txt b { font-size: .9062rem; overflow-wrap: anywhere; }
.jr-txt b a { color: inherit; text-decoration-color: var(--line-2); display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.jr-txt small { font-size: .7812rem; color: var(--seppia); overflow-wrap: anywhere; }
.jr-item time { font: 700 .75rem var(--sans); color: var(--seppia); flex: none; align-self: flex-start; padding-top: 2px; }
.jr-item.undone b { text-decoration: line-through; opacity: .7; }
.jr-undo { align-self: flex-start; min-height: 44px; margin-top: 6px; }
.jr-more { margin-top: 16px; }
.jr-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 26px; }

/* --- Profilo › Notifiche ------------------------------------------------------------------------ */
.notice.nt-warn { border-color: var(--order-ink); background: color-mix(in srgb, var(--order-bg) 45%, var(--avorio)); }
.nt .nt-title { font: 800 .8125rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--seppia); margin: 22px 0 8px; }
.nt .nt-title:first-child { margin-top: 8px; }
.nt-device .lead { margin-top: 0; }
.nt-device .field input { max-width: 360px; }
.nt-device .row { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-enable .icon, .nt-device .row .icon { width: 18px; height: 18px; }
.nt-on { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--ok-bg) 55%, var(--avorio)); color: var(--ok-ink); font-weight: 600; }
.nt-on .icon { flex: none; width: 20px; height: 20px; }
.nt-on b { color: var(--inchiostro); }
.nt-types { display: grid; }
.nt-head, .nt-type { display: grid; grid-template-columns: minmax(0, 1fr) 60px 60px; gap: 10px; align-items: center; }
.nt-head { font: 800 .75rem/1.2 var(--sans); color: var(--seppia); text-transform: uppercase; letter-spacing: .05em; padding-bottom: 4px; }
.nt-head span { text-align: center; }
.nt-type { padding: 12px 0; border-top: 1px solid var(--line); }
.nt-type .set-text { font-weight: 800; }
.nt-type input.switch { justify-self: center; }
.nt-quiet .switch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; margin: 0; }
.nt-quiet .set-text { font-weight: 800; }
form.nt-times { display: grid; grid-template-columns: auto minmax(0, 140px) auto minmax(0, 140px) auto; gap: 8px; align-items: center; justify-content: start; }
form.nt-times label { font-weight: 700; color: var(--seppia); }
form.nt-times input[type="time"] { width: 100%; min-width: 0; }
@media (max-width: 480px) { form.nt-times { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); } form.nt-times button { grid-column: 1 / -1; justify-self: start; } }
ul.plain.nt-devices li { flex-wrap: nowrap; border-bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.nt-devices .set-text { font-weight: 800; overflow-wrap: anywhere; }
.nt-devices .nt-dev-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.nt-devices .badge { font-size: .75rem; padding: 2px 8px; }
.nt-ios { display: flex; gap: 6px; align-items: flex-start; margin-top: 18px; }
.nt-ios .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
@media (max-width: 420px) {
  .nt-head, .nt-type { grid-template-columns: minmax(0, 1fr) 54px 54px; gap: 6px; }
}

/* --- audit di sicurezza (ottobre 2026) ------------------------------------------------------------- */
/* «Ricordami su questo dispositivo» nella pagina di accesso */
.login .check.remember { flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.login .check.remember small.block { flex-basis: 100%; margin-left: 0; line-height: 1.35; }
.muted.block, small.block { display: block; }
/* link che apre un selettore di file (Importa modifiche salvate) */
.linklike { color: var(--link, inherit); text-decoration: underline; cursor: pointer; }
.linklike:focus-within, label.linklike:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* «Conferma che sei tu» */
.modal form.reauth { display: grid; gap: 4px; min-width: min(360px, 80vw); }
/* testo facoltativo per chi riceve il libro (foglio del prestito) */
.ln-privacy-note { margin-top: 8px; }
.ln-privacy-note summary { cursor: pointer; font-size: .9em; min-height: 44px; display: flex; align-items: center; }
.ln-privacy-note p { margin: 6px 0; overflow-wrap: anywhere; }