/* =========================================================
   Biblio Codex — foglio di stile unico
   Mobile-first, ottimizzato per Safari iOS. Tema chiaro/scuro.
   ========================================================= */

:root{
  --accent:#c2683d;
  --accent-2:#d68a4f;
  --gold:#c99a3f;
  --radius:18px;
  --radius-sm:12px;
  --tap:44px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --tabbar-h:calc(58px + var(--safe-b));
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --font-display:ui-serif,"New York",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.32,.72,0,1);
}

/* ---------- Tema scuro (default) ---------- */
:root{
  --bg:#12100e;
  --bg-2:#191613;
  --card:#1e1a17;
  --card-2:#252017;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --text:#f3ede4;
  --text-2:#b6aa9b;
  --text-3:#7d7365;
  --shadow:0 18px 44px rgba(0,0,0,.55);
  --glass:rgba(18,16,14,.78);
  --skeleton:linear-gradient(100deg,#221e1a 30%,#2c2722 50%,#221e1a 70%);
}
/* ---------- Tema chiaro ---------- */
@media (prefers-color-scheme: light){
  :root{
    --bg:#faf7f2;
    --bg-2:#f2ece2;
    --card:#ffffff;
    --card-2:#f6f1e8;
    --line:rgba(30,20,10,.10);
    --line-strong:rgba(30,20,10,.18);
    --text:#231d16;
    --text-2:#6d6154;
    --text-3:#9a8e7f;
    --shadow:0 16px 38px rgba(60,40,20,.14);
    --glass:rgba(250,247,242,.82);
    --skeleton:linear-gradient(100deg,#eee7dc 30%,#f7f2ea 50%,#eee7dc 70%);
  }
}
/* Override manuale dal pannello impostazioni */
html[data-theme="dark"]{
  --bg:#12100e; --bg-2:#191613; --card:#1e1a17; --card-2:#252017;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --text:#f3ede4; --text-2:#b6aa9b; --text-3:#7d7365;
  --shadow:0 18px 44px rgba(0,0,0,.55); --glass:rgba(18,16,14,.78);
  --skeleton:linear-gradient(100deg,#221e1a 30%,#2c2722 50%,#221e1a 70%);
}
html[data-theme="light"]{
  --bg:#faf7f2; --bg-2:#f2ece2; --card:#ffffff; --card-2:#f6f1e8;
  --line:rgba(30,20,10,.10); --line-strong:rgba(30,20,10,.18);
  --text:#231d16; --text-2:#6d6154; --text-3:#9a8e7f;
  --shadow:0 16px 38px rgba(60,40,20,.14); --glass:rgba(250,247,242,.82);
  --skeleton:linear-gradient(100deg,#eee7dc 30%,#f7f2ea 50%,#eee7dc 70%);
}

*,*::before,*::after{box-sizing:border-box}
/* L'attributo hidden deve vincere sui display dichiarati più sotto. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
a{color:var(--accent)}

/* =========================================================
   Layout principale
   ========================================================= */
#app{min-height:100dvh;display:flex;flex-direction:column}
.view{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  background:var(--bg);
}
.view[hidden]{display:none}
.scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 max(16px,var(--safe-l)) calc(var(--tabbar-h) + 28px) max(16px,var(--safe-r));
  scrollbar-width:none;
}
.scroll::-webkit-scrollbar{display:none}

/* =========================================================
   Barra superiore
   ========================================================= */
.topbar{
  padding:calc(var(--safe-t) + 10px) max(16px,var(--safe-l)) 10px max(16px,var(--safe-r));
  background:var(--glass);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
  position:relative;z-index:5;
}
.topbar.plain{padding-bottom:14px}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.brand{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.02em}
.brand em{font-style:italic;color:var(--accent)}
.topbar-actions{display:flex;gap:6px}

.icon-btn{
  width:var(--tap);height:36px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);
  color:var(--text-2);transition:transform .15s var(--ease),background .15s;
}
.icon-btn:active{transform:scale(.93)}
.icon-btn::before{content:attr(data-ico);font-size:16px}
#btn-layout::before{content:"▦"}
#btn-layout.list::before{content:"☰"}
#btn-sort::before{content:"⇅"}

/* I pulsanti che contengono un disegno invece di un carattere.
   Il ::before generico creerebbe comunque una seconda cella nella
   griglia e schiaccerebbe l'icona a metà altezza: qui va spento.
   Si usa un disegno, e non un glifo, quando il carattere non è
   garantito su tutti i dispositivi — ◔ e ‹ non lo sono. */
.icon-btn.ico-svg::before{content:none}
.icon-btn.ico-svg svg{display:block}

/* Il ritorno indietro delle schermate che non stanno nella barra in
   basso. Sta a sinistra del titolo, dove lo cerca chiunque. */
.topbar-row .icon-btn.ico-svg[data-torna]{flex:0 0 auto;margin-right:4px}
.topbar-row .icon-btn.ico-svg[data-torna] + .brand{flex:1}

/* Ricerca */
.search-wrap{position:relative;margin-top:12px}
.search-wrap input{
  width:100%;height:40px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);
  padding:0 38px 0 36px;outline:none;
  -webkit-appearance:none;appearance:none;
  transition:border-color .18s,background .18s;
}
.search-wrap input:focus{border-color:var(--accent)}
.search-wrap input::-webkit-search-cancel-button{display:none}
.search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.search-ico::before{content:"⌕";font-size:19px}
.clear-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;color:var(--text-3)}
.clear-btn::before{content:"✕";font-size:13px}

/* Chips filtro */
.chips{
  display:flex;gap:7px;margin-top:11px;overflow-x:auto;
  padding-bottom:2px;scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;height:31px;padding:0 13px;border-radius:99px;
  background:var(--card);border:1px solid var(--line);
  color:var(--text-2);font-size:13.5px;font-weight:520;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .18s var(--ease);
}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip .n{opacity:.6;font-variant-numeric:tabular-nums}
.chip.on .n{opacity:.8}

/* =========================================================
   Striscia statistiche rapide
   ========================================================= */
.stat-strip{display:flex;gap:9px;margin:14px 0 4px;overflow-x:auto;scrollbar-width:none}
.stat-strip::-webkit-scrollbar{display:none}
.stat-pill{
  flex:0 0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:9px 13px;min-width:84px;
}
.stat-pill b{display:block;font-size:19px;font-family:var(--font-display);font-weight:600;line-height:1.1}
.stat-pill b i{font-style:normal;font-size:13px;color:var(--text-3)}
.stat-pill span{font-size:11.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.stat-pill.goal{border-color:rgba(194,104,61,.35);min-width:104px}
.stat-pill .pill-bar{display:block;height:4px;border-radius:99px;background:var(--card-2);margin-top:6px;overflow:hidden}
.stat-pill .pill-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--gold))}

/* =========================================================
   Griglia libri
   ========================================================= */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:16px 12px;
  padding:14px 0 8px;
}
@media (min-width:520px){ .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:20px 16px} }

.bk{position:relative;text-align:left;width:100%;transition:transform .18s var(--ease)}
.bk:active{transform:scale(.95)}
.bk-cover{
  position:relative;width:100%;aspect-ratio:2/3;border-radius:9px;overflow:hidden;
  background:var(--card-2);box-shadow:0 6px 16px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.05) inset;
}
.bk-cover img{width:100%;height:100%;object-fit:cover}
.bk-cover.ph{display:grid;place-items:center;padding:10px;
  background:linear-gradient(150deg,var(--card-2),var(--card));border:1px solid var(--line)}
/* Solo il titolo di ripiego, non le sovrapposizioni (badge, stelle). */
.bk-cover.ph > span:not([class]){
  font-family:var(--font-display);font-size:12.5px;line-height:1.25;text-align:center;
  color:var(--text-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
}
.bk-cover::after{content:"";position:absolute;inset:0;border-radius:9px;box-shadow:inset 2px 0 6px rgba(0,0,0,.25);pointer-events:none}
.bk-meta{margin-top:7px}
.bk-title{font-size:13px;font-weight:600;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bk-author{font-size:11.5px;color:var(--text-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-badge{
  position:absolute;top:6px;right:6px;z-index:2;padding:2.5px 6px;border-radius:6px;
  font-size:10px;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(8px);
  background:rgba(0,0,0,.55);color:#fff;
}
.bk-badge.reading{background:rgba(194,104,61,.92)}
.bk-badge.read{background:rgba(70,132,86,.92)}
.bk-badge.wish{background:rgba(96,104,140,.92)}
.bk-badge.lent{background:rgba(201,154,63,.94);color:#1a1409}
.bk-stars{position:absolute;left:6px;bottom:6px;z-index:2;font-size:10px;color:var(--gold);
  text-shadow:0 1px 3px rgba(0,0,0,.75);letter-spacing:.5px}
.bk-progress{position:absolute;left:0;right:0;bottom:0;z-index:2;height:3px;background:rgba(0,0,0,.45)}
.bk-progress i{display:block;height:100%;background:var(--accent)}
/* Etichetta di stato usata solo nella vista a elenco */
.bk-status{display:none}

/* Vista elenco */
.grid.list{grid-template-columns:1fr;gap:0;padding-top:6px}
.grid.list .bk{display:flex;gap:13px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.grid.list .bk-cover{width:48px;flex:0 0 48px;border-radius:5px}
.grid.list .bk-cover.ph > span:not([class]){-webkit-line-clamp:3;font-size:8px}
.grid.list .bk-meta{margin-top:0;flex:1;min-width:0}
.grid.list .bk-title{font-size:15px;-webkit-line-clamp:1}
.grid.list .bk-author{font-size:13px}
.grid.list .bk-badge,.grid.list .bk-stars,.grid.list .bk-progress{display:none}
.grid.list .bk-status{
  display:inline-block;flex:0 0 auto;margin-left:auto;
  padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;
  background:var(--card-2);color:var(--text-2);border:1px solid var(--line);
}
.grid.list .bk-status.reading{background:rgba(194,104,61,.16);color:var(--accent);border-color:rgba(194,104,61,.3)}
.grid.list .bk-status.read{background:rgba(70,132,86,.16);color:#5fa876;border-color:rgba(70,132,86,.3)}
.grid.list .bk-status.lent{background:rgba(201,154,63,.18);color:var(--gold);border-color:rgba(201,154,63,.32)}

/* Intestazione di sezione (raggruppamento) */
.group-head{
  grid-column:1/-1;font-family:var(--font-display);font-size:14px;font-weight:600;
  color:var(--text-2);letter-spacing:.02em;padding:16px 0 2px;
  display:flex;align-items:baseline;gap:8px;
  border-bottom:1px solid var(--line);margin-bottom:2px;
}
.group-head:first-child{padding-top:6px}
.group-head span{
  font-family:var(--font-ui);font-size:11.5px;font-weight:700;color:var(--text-3);
  background:var(--card);border:1px solid var(--line);border-radius:99px;padding:1px 8px;
}
.grid.list .group-head{padding-bottom:8px}

/* =========================================================
   Stato vuoto / footer
   ========================================================= */
.empty{text-align:center;padding:54px 22px 30px;max-width:340px;margin:0 auto}
.empty-art{font-size:48px;color:var(--text-3);opacity:.5;margin-bottom:10px}
.empty h2{font-family:var(--font-display);font-size:22px;margin-bottom:7px}
.empty p{color:var(--text-2);font-size:14.5px;margin:0 0 20px}
.empty .btn{width:100%;margin-bottom:9px}
.list-foot{text-align:center;color:var(--text-3);font-size:12.5px;padding:16px 0 4px}

/* =========================================================
   Bottoni
   ========================================================= */
.btn{
  min-height:var(--tap);padding:0 20px;border-radius:13px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15.5px;font-weight:600;
  border:1px solid transparent;
  transition:transform .14s var(--ease),opacity .14s,background .14s;
}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 5px 16px rgba(194,104,61,.32)}
.btn.ghost{background:var(--card);border-color:var(--line);color:var(--text)}
.btn.quiet{background:transparent;color:var(--text-2)}
.btn.danger{background:transparent;color:#d9604f;border-color:rgba(217,96,79,.35)}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.sm{min-height:34px;padding:0 13px;font-size:13.5px;border-radius:10px}
.file-btn{position:relative;overflow:hidden}
.row-actions{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.row-actions .btn{flex:1;min-width:150px}

/* =========================================================
   Tab bar + FAB
   ========================================================= */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  height:var(--tabbar-h);padding-bottom:var(--safe-b);
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  background:var(--glass);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-top:1px solid var(--line);
}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10px;font-weight:600;color:var(--text-3);height:100%;justify-content:center;
  transition:color .18s;
}
.tab .ti{font-size:19px;line-height:1}
.tab.active{color:var(--accent)}
.fab{
  justify-self:center;
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(160deg,var(--accent),#a4522e);
  color:#fff;font-size:29px;font-weight:300;line-height:1;
  display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(194,104,61,.45);
  transform:translateY(-9px);
  transition:transform .18s var(--ease);
}
.fab:active{transform:translateY(-9px) scale(.9)}

/* =========================================================
   Scanner
   ========================================================= */
.segmented{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:3px;margin-top:13px;
}
.seg{
  height:33px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--text-2);
  transition:background .2s var(--ease),color .2s;
}
.seg.active{background:var(--accent);color:#fff}

.pane{padding-top:16px}
.pane[hidden]{display:none}

.camera-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.camera-box{position:relative;aspect-ratio:3/4;background:#000;overflow:hidden}
@media (min-height:760px){ .camera-box{aspect-ratio:1/1} }
#video{width:100%;height:100%;object-fit:cover;display:block}
.camera-idle{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:9px;
  background:var(--card-2);color:var(--text-2);text-align:center;padding:20px;
}
.camera-idle-ico{font-size:40px;opacity:.4}
.camera-idle p{margin:0;font-size:14px}
.reticle{position:absolute;inset:16% 10%;pointer-events:none}
.reticle span{position:absolute;width:26px;height:26px;border:2.5px solid rgba(255,255,255,.92);border-radius:3px}
.reticle span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.reticle span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.reticle span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.reticle span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.reticle::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:sweep 2.1s var(--ease) infinite;
}
@keyframes sweep{0%{top:8%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:92%;opacity:0}}
.scan-hud{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  background:rgba(0,0,0,.6);backdrop-filter:blur(10px);
  color:#fff;font-size:12.5px;padding:7px 13px;border-radius:99px;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.scan-hud .dot{width:7px;height:7px;border-radius:50%;background:#5ac467;animation:pulse 1.3s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* Interruttore della scansione a raffica, sotto la fotocamera */
.batch-row{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  margin-top:13px;padding:12px 15px;border-radius:var(--radius-sm);
  background:var(--card);border:1px solid var(--line);
  transition:border-color .18s;
}
.batch-row[aria-pressed="true"]{border-color:rgba(90,196,103,.4)}
.batch-row .sr-main{flex:1;min-width:0}
.batch-row .sr-main b{display:block;font-size:15px;font-weight:550}
.batch-row .sr-main small{display:block;color:var(--text-3);font-size:12.5px;margin-top:2px;line-height:1.4}

.hint{color:var(--text-3);font-size:13px;margin:12px 2px 0;line-height:1.5}
.callout{
  margin-top:13px;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--gold);font-size:13.5px;color:var(--text-2);
}
.callout strong{color:var(--text);display:block;margin-bottom:2px}

/* Elenco numerato che racconta una sequenza nel tempo (cosa succede
   quando scade l'abbonamento). I numeri contano davvero: dicono
   «prima questo, poi quello», e vanno visti. */
.elenco-passi{margin:10px 0 0;padding-left:24px;color:var(--text-2);font-size:13.5px;line-height:1.6}
.elenco-passi li{margin-bottom:8px}
.elenco-passi li::marker{color:var(--accent);font-weight:700}
.elenco-passi b{color:var(--text)}

.manual-isbn{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.manual-isbn label{display:block;font-size:12.5px;color:var(--text-3);margin-bottom:7px;text-transform:uppercase;letter-spacing:.05em}
.inline-form{display:flex;gap:8px}
.inline-form.pad{margin-top:4px}
.inline-form input{
  flex:1;min-width:0;height:var(--tap);border-radius:12px;padding:0 14px;
  background:var(--card);border:1px solid var(--line);outline:none;-webkit-appearance:none;
}
.inline-form input:focus{border-color:var(--accent)}

/* Copertina */
.cover-drop{
  border-radius:var(--radius);border:1.5px dashed var(--line-strong);
  background:var(--card);overflow:hidden;
}
.cover-cta{padding:34px 22px;text-align:center}
.cover-ico{font-size:42px;opacity:.35;margin-bottom:8px}
.cover-cta h3{font-family:var(--font-display);font-size:19px;margin-bottom:6px}
.cover-cta p{color:var(--text-2);font-size:13.5px;margin:0 0 18px}
.cover-preview{padding:16px;display:grid;place-items:center;background:var(--card-2)}
.cover-preview img{max-height:270px;border-radius:10px;box-shadow:var(--shadow)}
.recog-status{
  margin-top:13px;padding:13px 15px;border-radius:var(--radius-sm);
  background:var(--card);border:1px solid var(--line);font-size:13.5px;color:var(--text-2);
  display:flex;align-items:center;gap:10px;
}
.spinner{
  width:16px;height:16px;flex:0 0 16px;border-radius:50%;
  border:2px solid var(--line-strong);border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Risultati candidati */
.candidates{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.cand{
  display:flex;gap:12px;align-items:center;text-align:left;width:100%;
  padding:11px 12px;border-radius:var(--radius-sm);
  background:var(--card);border:1px solid var(--line);margin-bottom:8px;
  transition:transform .15s var(--ease);
}
.cand:active{transform:scale(.98)}
.cand-cover{width:44px;flex:0 0 44px;aspect-ratio:2/3;border-radius:5px;object-fit:cover;background:var(--card-2)}
.cand-info{flex:1;min-width:0}
.cand-info b{display:block;font-size:14.5px;font-weight:620;line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cand-info span{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cand-add{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:17px;line-height:1}
.cand.dupe .cand-add{background:var(--text-3)}

/* Righe dello scaffale: stessa scheda, con la casella di selezione al posto
   del pulsante «+». La riga intera è un <label>, così si spunta ovunque. */
.shelf-row{cursor:pointer}
.shelf-row.dupe{opacity:.5}
.shelf-check{
  flex:0 0 auto;width:22px;height:22px;margin:0;
  accent-color:var(--accent);cursor:pointer;
}
.shelf-check:disabled{cursor:default}

/* =========================================================
   Sheet (dettaglio & form)
   ========================================================= */
.sheet-backdrop{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:fade .25s var(--ease);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  position:fixed;z-index:61;left:0;right:0;bottom:0;
  max-height:94dvh;display:flex;flex-direction:column;
  background:var(--bg-2);
  border-radius:22px 22px 0 0;
  box-shadow:0 -8px 44px rgba(0,0,0,.45);
  animation:slideUp .34s var(--ease);
  will-change:transform;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet.closing{animation:slideDown .26s var(--ease) forwards}
@keyframes slideDown{to{transform:translateY(100%)}}
.sheet-grab{padding:10px 0 4px;display:grid;place-items:center;flex:0 0 auto;touch-action:none;cursor:grab}
.sheet-grab span{width:38px;height:4.5px;border-radius:99px;background:var(--line-strong)}
.sheet-body{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:6px max(20px,var(--safe-l)) calc(24px + var(--safe-b)) max(20px,var(--safe-r));
}

/* Dettaglio libro */
.detail-hero{display:flex;gap:16px;padding:6px 0 18px}
.detail-cover{width:104px;flex:0 0 104px;aspect-ratio:2/3;border-radius:9px;overflow:hidden;
  box-shadow:var(--shadow);background:var(--card-2)}
.detail-cover img{width:100%;height:100%;object-fit:cover}
.detail-cover.ph{display:grid;place-items:center;padding:9px;text-align:center}
.detail-cover.ph span{font-family:var(--font-display);font-size:11px;color:var(--text-2)}
.detail-head{flex:1;min-width:0;padding-top:2px}
.detail-head h2{font-family:var(--font-display);font-size:21px;line-height:1.22;font-weight:600}
.detail-head .by{color:var(--text-2);font-size:14px;margin-top:5px}
.detail-head .sub{color:var(--text-3);font-size:12.5px;margin-top:7px;line-height:1.5}

.rating{display:flex;gap:3px;margin-top:11px}
.rating button{width:26px;height:26px;font-size:20px;line-height:1;color:var(--text-3);transition:transform .12s}
.rating button:active{transform:scale(1.25)}
.rating button.on{color:var(--gold)}

.status-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 18px}
.status-row button{
  padding:9px 4px;border-radius:11px;background:var(--card);border:1px solid var(--line);
  font-size:11.5px;font-weight:600;color:var(--text-2);line-height:1.25;
}
.status-row button.on{background:var(--accent);border-color:var(--accent);color:#fff}

.progress-block{margin-bottom:18px;padding:14px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--line)}
.progress-block .pb-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:9px}
.progress-block .pb-top b{font-family:var(--font-display);font-size:17px}
.progress-block input[type=range]{width:100%;accent-color:var(--accent)}
.pb-row{display:flex;gap:8px;margin-top:10px;align-items:center}
.pb-row input{width:74px;height:36px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line);
  padding:0 10px;text-align:center;-webkit-appearance:none}
.pb-row span{font-size:13px;color:var(--text-3)}

.meta-table{border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);margin:0 0 18px}
.meta-table div{display:flex;justify-content:space-between;gap:14px;padding:10px 13px;background:var(--card);font-size:13.5px}
.meta-table div+div{border-top:1px solid var(--line)}
.meta-table dt{color:var(--text-3);flex:0 0 auto;margin:0}
.meta-table dd{margin:0;text-align:right;color:var(--text);min-width:0;word-break:break-word}

.section-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);
  margin:22px 0 9px;font-weight:700}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{padding:5px 11px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:12.5px;color:var(--text-2)}
.blurb{color:var(--text-2);font-size:14px;line-height:1.6}
.blurb.clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.more-link{color:var(--accent);font-size:13px;font-weight:600;margin-top:6px}

/* Citazioni raccolte dal lettore */
.quotes{display:flex;flex-direction:column;gap:10px}
.quote{
  margin:0;padding:13px 15px;border-radius:var(--radius-sm);
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
}
.quote p{
  margin:0;font-family:var(--font-display);font-size:15px;line-height:1.55;color:var(--text);
}
.quote p::before{content:"“"}
.quote p::after{content:"”"}
.quote footer{
  margin-top:9px;display:flex;align-items:center;gap:12px;
  font-size:12px;color:var(--text-3);
}
.quote footer button{margin-left:0;color:var(--accent);font-size:12px;font-weight:600}
.quote footer button:last-child{color:#d9604f;margin-left:auto}

.note-box{width:100%;min-height:88px;border-radius:var(--radius-sm);background:var(--card);
  border:1px solid var(--line);padding:12px;font-size:14px;line-height:1.55;resize:vertical;outline:none}
.note-box:focus{border-color:var(--accent)}

.detail-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
.detail-actions .btn{flex:1;min-width:130px}

/* Form */
.form-grid{display:flex;flex-direction:column;gap:14px;padding-bottom:8px}
.field label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-3);margin-bottom:6px;font-weight:600}
.field input,.field select,.field textarea{
  width:100%;min-height:var(--tap);border-radius:12px;padding:11px 14px;
  background:var(--card);border:1px solid var(--line);outline:none;-webkit-appearance:none;appearance:none;
}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
.field textarea{min-height:90px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sheet-title{font-family:var(--font-display);font-size:21px;margin:2px 0 18px}

/* =========================================================
   Statistiche
   ========================================================= */
.stat-cards{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding-top:16px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px}
.stat-card>b{display:block;font-family:var(--font-display);font-size:27px;font-weight:600;line-height:1.1}
/* Solo l'etichetta della scheda va in maiuscoletto, non i testi interni. */
.stat-card>span{display:block;font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.stat-card.wide{grid-column:1/-1}

/* Obiettivo annuale */
.goal-card{background:linear-gradient(155deg,var(--card),var(--card-2));border-color:rgba(194,104,61,.3)}
.goal-top{display:flex;align-items:baseline;gap:8px;margin:6px 0 12px}
.goal-top b{font-family:var(--font-display);font-size:34px;font-weight:600;line-height:1}
.goal-top em{font-style:normal;color:var(--text-2);font-size:14px}
.goal-top .goal-pct{margin-left:auto;font-size:13px;font-weight:700;color:var(--accent)}
.goal-track{position:relative;height:10px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.goal-track i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .7s var(--ease)}
/* Tacca del ritmo previsto a oggi */
.goal-track u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--text-2);opacity:.55;text-decoration:none}
.goal-note{margin:11px 0 0;font-size:13.5px;color:var(--text-2);line-height:1.5}

.bars{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.bar-row{display:grid;grid-template-columns:minmax(0,108px) 1fr auto;gap:10px;align-items:center;font-size:13px}
.bar-row .lbl{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{height:8px;border-radius:99px;background:var(--card-2);overflow:hidden}
.bar-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--gold));
  transition:width .6s var(--ease)}
.bar-row .val{color:var(--text-3);font-variant-numeric:tabular-nums;font-size:12.5px}

.spark{display:flex;align-items:flex-end;gap:4px;height:82px;margin-top:14px}
.spark div{flex:1;background:linear-gradient(180deg,var(--accent),rgba(194,104,61,.25));
  border-radius:4px 4px 0 0;min-height:3px;position:relative}
.spark div span{position:absolute;bottom:-17px;left:0;right:0;text-align:center;font-size:9.5px;color:var(--text-3)}
.spark-wrap{padding-bottom:20px}

/* =========================================================
   Impostazioni
   ========================================================= */
.set-group{margin-top:22px}
.set-group>h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);
  margin-bottom:9px;font-weight:700;padding-left:3px}
.set-list{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.set-row{display:flex;align-items:center;gap:13px;padding:13px 15px;width:100%;text-align:left}
.set-row+.set-row{border-top:1px solid var(--line)}
.set-row .sr-main{flex:1;min-width:0}
.set-row .sr-main b{display:block;font-size:15px;font-weight:550}
.set-row .sr-main small{display:block;color:var(--text-3);font-size:12.5px;margin-top:2px;line-height:1.4}
.set-row .sr-val{color:var(--text-3);font-size:13.5px;flex:0 0 auto}
.set-row.tappable::after{content:"›";color:var(--text-3);font-size:20px;line-height:1}

.switch{position:relative;width:49px;height:30px;flex:0 0 auto;border-radius:99px;background:var(--line-strong);
  transition:background .22s var(--ease)}
.switch::after{content:"";position:absolute;top:2.5px;left:2.5px;width:25px;height:25px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .22s var(--ease)}
.switch.on{background:#5ac467}
.switch.on::after{transform:translateX(19px)}

/* Registro delle modifiche */
.changelog{display:flex;flex-direction:column;gap:20px}
.changelog .cl-ver{display:flex;align-items:baseline;gap:9px}
.changelog .cl-ver b{font-family:var(--font-display);font-size:17px;font-weight:600}
.changelog .cl-ver span{color:var(--text-3);font-size:12.5px}
.changelog .cl-ver em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.changelog ul{margin:7px 0 0;padding-left:19px;color:var(--text-2);font-size:14px;line-height:1.55}
.changelog li+li{margin-top:4px}

.set-note{color:var(--text-3);font-size:12.5px;line-height:1.55;padding:10px 4px 0}
.set-note code{background:var(--card-2);padding:1px 5px;border-radius:4px;font-size:11.5px}

/* =========================================================
   Toast
   ========================================================= */
.toast-host{
  position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + 12px);z-index:80;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px;
}
.toast{
  max-width:420px;width:100%;
  background:var(--card);border:1px solid var(--line-strong);
  border-radius:14px;padding:12px 15px;box-shadow:var(--shadow);
  font-size:14px;display:flex;align-items:center;gap:11px;
  animation:toastIn .3s var(--ease);pointer-events:auto;
}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .24s var(--ease) forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.97)}}
.toast .tico{flex:0 0 auto;font-size:17px}
.toast.ok .tico{color:#5ac467}
.toast.err .tico{color:#d9604f}
.toast .tmsg{flex:1;min-width:0;line-height:1.35}
.toast .tact{flex:0 0 auto;color:var(--accent);font-weight:650;font-size:13.5px}

/* =========================================================
   Barra di aggiornamento
   Sta sopra le linguette, mai sopra: --tabbar-h comprende già
   la zona sicura in basso.
   ========================================================= */
.update-bar{
  position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + 12px);z-index:70;
  display:flex;justify-content:center;padding:0 max(16px,var(--safe-l));
  pointer-events:none;animation:toastIn .3s var(--ease);
}
.update-bar.out{animation:toastOut .24s var(--ease) forwards}
.update-card{
  pointer-events:auto;width:100%;max-width:420px;
  background:var(--card);border:1px solid var(--line-strong);
  border-radius:14px;padding:9px 10px 9px 15px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:10px;
}
.update-msg{flex:1;min-width:0}
.update-msg b{display:block;font-size:14px;font-weight:650;line-height:1.3}
.update-msg small{display:block;color:var(--text-3);font-size:12px;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.update-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  color:var(--text-3);font-size:20px;line-height:1}
/* Le notifiche temporanee salgono sopra la barra invece di coprirla. */
body.has-update .toast-host{bottom:calc(var(--tabbar-h) + 80px)}

/* =========================================================
   Skeleton
   ========================================================= */
.sk{border-radius:9px;background:var(--skeleton);background-size:220% 100%;animation:shimmer 1.4s infinite linear}
@keyframes shimmer{to{background-position:-220% 0}}
.sk-card{aspect-ratio:2/3}
.sk-line{height:10px;margin-top:7px}
.sk-line.short{width:60%}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* =========================================================
   Porta d'ingresso (accesso e registrazione)
   Copre tutto: finché non si è entrati non c'è altro da fare.
   Su schermo largo resta una colonna centrata e leggibile,
   perché un modulo di tre campi largo mille pixel è illeggibile.
   ========================================================= */
.porta{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  animation:portaEntra .3s var(--ease);
}
.porta.via{animation:portaEsce .24s var(--ease) forwards}
@keyframes portaEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes portaEsce{to{opacity:0;transform:translateY(-6px)}}
body.porta-aperta{overflow:hidden}

.porta-scena{
  min-height:100%;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--safe-t) + 28px) max(20px,var(--safe-l))
          calc(var(--safe-b) + 28px) max(20px,var(--safe-r));
}
.porta-carta{width:100%;max-width:380px}
.porta-carta .brand{font-size:30px;margin-bottom:22px}
.porta-carta h2{font-family:var(--font-display);font-size:23px;font-weight:600;margin-bottom:5px}
.porta-sotto{color:var(--text-2);font-size:14.5px;margin:0 0 20px;line-height:1.5}

.pcampo{display:block;margin-bottom:13px}
.pcampo span{display:block;font-size:12.5px;color:var(--text-3);margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.05em}
.pcampo input{
  width:100%;height:46px;border-radius:12px;padding:0 14px;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color .18s;font-size:16px;   /* 16px: sotto, iOS ingrandisce da solo */
}
.pcampo input:focus{border-color:var(--accent)}

.porta-nota{font-size:12.5px;color:var(--text-3);margin:-6px 0 14px;line-height:1.45}
.porta-ricorda{display:flex;align-items:center;gap:9px;margin:2px 0 16px;
  font-size:14px;color:var(--text-2);cursor:pointer}
.porta-ricorda input{width:19px;height:19px;accent-color:var(--accent);margin:0}

.porta-errore{
  background:rgba(194,104,61,.12);border:1px solid rgba(194,104,61,.4);
  border-radius:11px;padding:10px 12px;margin-bottom:14px;
  font-size:13.5px;line-height:1.45;color:var(--text);
}
.porta-errore.buono{background:rgba(120,160,110,.13);border-color:rgba(120,160,110,.42)}
.porta-azione{color:var(--accent);text-decoration:underline;font-size:13.5px}

.btn.block{width:100%;height:47px;border-radius:12px;font-size:15.5px;font-weight:620}

.porta-vie{display:flex;flex-direction:column;gap:2px;margin-top:18px}
.porta-via{
  height:40px;border-radius:10px;color:var(--text-2);font-size:14px;
  transition:background .15s,color .15s;
}
.porta-via:active{background:var(--card);color:var(--text)}
.porta-salta{
  display:block;width:100%;height:42px;margin-top:14px;border-radius:11px;
  border:1px solid var(--line);color:var(--text-3);font-size:14px;
}
.porta-legale{font-size:11.5px;color:var(--text-3);text-align:center;
  margin:20px 0 0;line-height:1.55}
.porta-legale a{color:var(--text-2)}

/* ---------- Prestiti ---------- */
.prestito{cursor:pointer}
.prestito-stato{
  flex:0 0 auto;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:99px;
  background:var(--card-2);color:var(--text-3);white-space:nowrap;
}
.prestito.attesa .prestito-stato{background:rgba(201,154,63,.18);color:var(--gold)}
.prestito.fuori  .prestito-stato{background:rgba(194,104,61,.18);color:var(--accent)}
.prestito.chiuso .prestito-stato{opacity:.65}
.riga-azioni{display:flex;gap:6px;flex:0 0 auto}
.btn.sm{height:31px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:600}
.btn.sm.primary{background:var(--accent);color:#fff}
.btn.sm.ghost{background:var(--card-2);color:var(--text-2);border:1px solid var(--line)}
.sheet-pad{padding:4px 2px 8px}
.vuoto{text-align:center;padding:56px 20px;color:var(--text-3)}
.vuoto-ico{font-size:40px;opacity:.5;margin-bottom:10px}
.vuoto h3{font-family:var(--font-display);font-size:19px;color:var(--text-2);margin-bottom:6px}
.vuoto p{font-size:14px;max-width:280px;margin:0 auto;line-height:1.5}

/* =========================================================
   Lettore di ebook
   Copre tutto e non assomiglia al resto dell'app di proposito:
   qui si legge, e ogni elemento che non è testo è un disturbo.
   ========================================================= */
.lettore{
  position:fixed;inset:0;z-index:150;
  background:var(--lt-sfondo,#f4ecd8);color:var(--lt-testo,#3a3020);
  display:flex;flex-direction:column;
}
body.legge{overflow:hidden}

/* Il velo ambrato: sta sopra la pagina ma non intercetta i tocchi. */
.lettore::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:var(--lt-velo,transparent);mix-blend-mode:multiply;
}

.lt-barra,.lt-piede{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;z-index:4;
  background:var(--lt-sfondo,#f4ecd8);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.lt-barra{padding:calc(var(--safe-t) + 8px) 12px 8px;border-bottom:1px solid rgba(128,110,80,.18)}
.lt-piede{padding:8px 12px calc(var(--safe-b) + 8px);border-top:1px solid rgba(128,110,80,.18);justify-content:space-between}
.lettore.nudo .lt-barra{opacity:0;transform:translateY(-100%);pointer-events:none}
.lettore.nudo .lt-piede{opacity:0;transform:translateY(100%);pointer-events:none}

.lt-titolo{flex:1;font-size:14px;font-weight:600;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.75}
.lt-icona{width:38px;height:38px;border-radius:10px;font-size:15px;font-weight:600;
  color:inherit;opacity:.75;flex:0 0 auto}
.lt-icona:active{opacity:1;background:rgba(128,110,80,.14)}
.lt-nav{width:44px;height:38px;border-radius:10px;font-size:26px;line-height:1;color:inherit;opacity:.75}
.lt-nav:disabled{opacity:.2}
.lt-avanzamento{font-size:12.5px;opacity:.6;font-variant-numeric:tabular-nums}

.lt-pagina{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;z-index:1}
.lt-testo{
  max-width:var(--lt-larghezza,34em);
  margin:0 auto;padding:26px var(--lt-margine,22px) 90px;
  font-family:var(--lt-famiglia,var(--font-display));
  font-size:var(--lt-corpo,19px);
  line-height:var(--lt-interlinea,1.7);
  text-align:var(--lt-allineamento,justify);
  hyphens:auto;-webkit-hyphens:auto;   /* senza sillabazione il giustificato fa buchi */
}
.lt-testo p{margin:0 0 .85em}
.lt-testo h1,.lt-testo h2,.lt-testo h3{margin:1.6em 0 .6em;line-height:1.25}
.lt-testo blockquote{margin:1.2em 0;padding-left:1em;border-left:2px solid currentColor;opacity:.8}
.lt-testo img{max-width:100%;height:auto;margin:1em auto}
.lt-attesa{text-align:center;opacity:.5;padding:40px 0}

/* Pannello dell'aspetto */
.lt-aspetto{
  position:absolute;left:10px;right:10px;bottom:calc(var(--safe-b) + 58px);z-index:6;
  background:var(--lt-sfondo,#f4ecd8);color:var(--lt-testo,#3a3020);
  border:1px solid rgba(128,110,80,.28);border-radius:16px;
  padding:14px;box-shadow:0 14px 40px rgba(0,0,0,.3);
  max-width:460px;margin:0 auto;
}
.lt-temi{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.lt-tema{height:44px;border-radius:10px;font-size:11.5px;font-weight:600;
  border:2px solid transparent;transition:border-color .15s}
.lt-tema.on{border-color:var(--accent)}
.lt-cursore{display:block;margin-bottom:12px}
.lt-cursore span{display:flex;justify-content:space-between;font-size:12.5px;opacity:.75;margin-bottom:4px}
.lt-cursore b{font-weight:600;font-variant-numeric:tabular-nums}
.lt-cursore input{width:100%;accent-color:var(--accent)}
.lt-interruttori{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.lt-int{height:38px;border-radius:10px;font-size:12.5px;font-weight:600;
  border:1px solid rgba(128,110,80,.3);color:inherit;opacity:.65}
.lt-int.on{opacity:1;border-color:var(--accent);background:rgba(194,104,61,.12)}
.lt-ripristina{width:100%;height:36px;border-radius:10px;font-size:12.5px;opacity:.6;color:inherit}

/* Il consiglio automatico */
.lt-consiglio{
  position:absolute;left:10px;right:10px;bottom:calc(var(--safe-b) + 58px);z-index:6;
  display:flex;align-items:center;gap:10px;max-width:460px;margin:0 auto;
  background:var(--lt-sfondo,#f4ecd8);color:var(--lt-testo,#3a3020);
  border:1px solid rgba(128,110,80,.28);border-radius:14px;padding:11px 12px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);font-size:13px;line-height:1.4;
  animation:toastIn .3s var(--ease);
}
.lt-consiglio span{flex:1}

/* ---------- Ascolto (audiolibro) ----------
   La barra sta sopra il piede di navigazione e resta visibile anche a
   interfaccia «nuda»: chi ascolta ha il telefono in tasca e deve poter
   mettere in pausa senza cercare. */
.lt-voce{
  position:absolute;left:10px;right:10px;bottom:calc(var(--safe-b) + 58px);z-index:7;
  display:flex;align-items:center;gap:4px;max-width:460px;margin:0 auto;
  background:var(--lt-sfondo,#f4ecd8);color:var(--lt-testo,#3a3020);
  border:1px solid rgba(128,110,80,.28);border-radius:14px;padding:6px 8px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  animation:toastIn .25s var(--ease);
}
.lettore.nudo .lt-voce{opacity:1;visibility:visible}
.lt-icona.grande{font-size:17px}
.lt-vel{height:34px;padding:0 9px;border-radius:9px;font-size:12.5px;font-weight:700;
  color:inherit;opacity:.8;font-variant-numeric:tabular-nums}
.lt-voce-stato{flex:1;text-align:center;font-size:11.5px;opacity:.55}

/* Il paragrafo che la voce sta leggendo. Un velo, non un evidenziatore:
   deve dire «sono qui» a chi guarda di sfuggita, senza disturbare chi
   legge con gli occhi mentre ascolta. */
.lt-dice{
  background:rgba(194,104,61,.16);
  border-radius:6px;
  box-shadow:0 0 0 6px rgba(194,104,61,.16);
  transition:background .2s linear;
}

.lt-voci{
  position:absolute;left:10px;right:10px;bottom:calc(var(--safe-b) + 108px);z-index:8;
  background:var(--lt-sfondo,#f4ecd8);color:var(--lt-testo,#3a3020);
  border:1px solid rgba(128,110,80,.28);border-radius:16px;padding:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.3);max-width:460px;margin:0 auto;
  max-height:52vh;overflow-y:auto;
}
.lt-voci-t{font-size:12px;font-weight:700;opacity:.6;margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.06em}
.lt-voci .lt-int{display:block;width:100%;text-align:left;padding:0 10px;margin-bottom:5px}
.lt-voci .lt-int small{opacity:.55;font-weight:400;margin-left:6px}

/* ---------- Elenco ebook ---------- */
.ebook-riga{align-items:center}
.ebook-ico{display:grid;place-items:center;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  color:var(--text-3);background:var(--card-2);aspect-ratio:2/3}
.ebook-apri{flex:1;min-width:0;text-align:left;background:none;padding:0}
.ebook-barra{display:block;height:4px;border-radius:99px;background:var(--card-2);
  margin-top:6px;overflow:hidden;max-width:220px}
.ebook-barra.piccola{margin-top:5px;max-width:none}
.ebook-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--gold))}

/* ---------- Contrassegno «beta» ----------
   Blu perché è l'unico colore che nella tavolozza non ha altri significati:
   il rame è l'accento delle azioni, l'oro è l'avanzamento. Piccolo e in
   alto come una nota a margine: dice «è in prova» senza gridarlo. */
.brand .beta{
  display:inline-block;vertical-align:super;
  margin-left:7px;padding:2px 7px;border-radius:6px;
  background:#2f6fd0;color:#fff;
  font-family:var(--font-ui);font-size:10px;font-weight:700;
  letter-spacing:.09em;text-transform:lowercase;line-height:1.4;
  font-style:normal;
  box-shadow:0 2px 8px rgba(47,111,208,.35);
}
@media (prefers-color-scheme: light){ .brand .beta{background:#2a63bd} }
html[data-theme="light"] .brand .beta{background:#2a63bd}

/* ---------- Punti, inviti e sconti ----------
   Il saldo è grande perché è la risposta alla domanda con cui si apre
   questa schermata; tutto il resto è contorno che si legge dopo. */
.punti-testa{text-align:center;padding:18px 0 10px}
.punti-testa > b{display:block;font-family:var(--font-display);font-size:44px;line-height:1;color:var(--accent)}
.punti-testa > span{display:block;color:var(--text-3);font-size:13px;margin-top:4px}
.punti-testa small{display:block;color:var(--text-2);font-size:13px;margin-top:10px}
.punti-barra{display:block;height:6px;border-radius:99px;background:var(--card-2);
  margin:14px auto 0;max-width:280px;overflow:hidden}
.punti-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));
  transition:width .6s var(--ease)}

.codice-amico{
  margin-top:10px;padding:14px;border-radius:var(--radius-sm);
  background:var(--card);border:1px solid var(--line);text-align:center;
}
.codice-amico > b{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:22px;letter-spacing:.12em;color:var(--text);margin-bottom:12px;
}
.set-row code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.set-row.raggiunto .sr-main b::before{content:'✓ ';color:var(--accent)}
.set-row.spento{opacity:.5}
.sr-val.negativo{color:var(--text-3)}

/* L'annuncio di uno sconto sbloccato: una volta sola, e deve sembrare
   una bella notizia — non un avviso di sistema. */
.festa{text-align:center}
.festa-ico{
  font-size:52px;line-height:1;color:var(--gold);
  animation:festaEntra .5s var(--ease) both;
}
@keyframes festaEntra{
  from{transform:scale(.4) rotate(-25deg);opacity:0}
  to{transform:none;opacity:1}
}
.festa .sheet-title{margin-top:6px}

/* Il congedo in fondo alle impostazioni: staccato da tutto, perché
   contiene le due azioni che chiudono qualcosa. */
.set-group.congedo{margin-top:34px;padding-top:6px;border-top:1px solid var(--line)}
.set-group.congedo .set-row b{color:var(--text-2)}
.set-group.congedo .set-row:last-child b{color:#d9604f}

/* ---------- Accesso con Google ----------
   Il pulsante segue le linee guida di Google (fondo bianco, logo a
   colori, testo scuro) perché è un marchio riconoscibile: reinventarlo
   lo renderebbe solo meno credibile. */
.porta-oppure{
  display:flex;align-items:center;gap:12px;
  margin:16px 0 12px;color:var(--text-3);font-size:12.5px;
}
.porta-oppure::before,.porta-oppure::after{
  content:'';flex:1;height:1px;background:var(--line);
}
.btn.google{
  background:#fff;color:#1f1f1f;border:1px solid #dadce0;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-weight:550;
}
.btn.google:active{background:#f1f3f4}
.btn.google .g-logo{display:grid;place-items:center;width:18px;height:18px}
.btn.google:disabled{opacity:.7}

/* ---------- Servizio chiuso: la striscia per chi amministra ----------
   Rossa e in cima, sopra tutto: a servizio chiuso l'amministratore
   continua a navigare, ed è facilissimo dimenticarsene. */
.fascia-manut{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:calc(var(--safe-t) + 6px) 14px 6px;
  background:#8f2f22;color:#fff;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.fascia-manut a{
  color:#fff;text-decoration:underline;text-underline-offset:2px;
  font-weight:700;flex:0 0 auto;
}
/* Le schermate scendono, altrimenti la striscia coprirebbe il titolo. */
body:has(.fascia-manut) .topbar{padding-top:calc(var(--safe-t) + 40px)}

/* ---------- Velo d'avvio ----------
   Sta sopra l'app e sotto la porta d'ingresso: quando la porta si apre
   il velo se ne va, e fra i due non c'è mai un istante in cui la
   libreria resta scoperta. Nasce visibile nell'HTML e solo il codice lo
   toglie: se il codice non partisse, l'app resterebbe coperta — che è
   il comportamento giusto per un servizio con un account. */
.velo-avvio{
  position:fixed;inset:0;z-index:150;
  background:var(--bg);
  display:grid;place-items:center;
  padding:24px;
}
.velo-avvio.via{opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.velo-scena{text-align:center;max-width:320px}
.velo-icona{
  width:72px;height:72px;border-radius:20px;margin:0 auto 16px;
  box-shadow:0 10px 26px rgba(194,104,61,.32);
  animation:respiroVelo 3.4s var(--ease) infinite;
}
@keyframes respiroVelo{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion: reduce){ .velo-icona{animation:none} }
.velo-marchio{
  font-family:var(--font-display);font-size:24px;font-weight:600;
  letter-spacing:-.02em;margin:0 0 8px;color:var(--text-2);
}
.velo-marchio em{font-style:italic;color:var(--accent)}
.velo-nota{color:var(--text-3);font-size:14px;line-height:1.5;margin:0}
.velo-azioni{display:flex;flex-direction:column;gap:9px;margin-top:20px}

/* L'avviso di un aggiornamento che non si può rimandare: stesso posto
   della barra normale, ma senza la via d'uscita e con il colore che
   dice «questa è una cosa che sta per succedere». */
.update-bar.obbligatorio .update-card{
  border-color:rgba(194,104,61,.55);
  box-shadow:0 14px 34px rgba(194,104,61,.28);
}
.update-bar.obbligatorio .update-msg b{color:var(--accent)}

/* Il modulo per invitare un amico scrivendo il suo indirizzo. */
.invito-modulo{margin-top:12px}
.invito-modulo label{
  display:block;font-size:12.5px;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px;font-weight:600;
}
.invito-modulo input{
  flex:1;height:44px;border-radius:12px;padding:0 13px;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  outline:none;-webkit-appearance:none;appearance:none;
}
.invito-modulo input:focus{border-color:var(--accent)}

/* «Ti ha invitato un amico»: la conferma visiva che il collegamento
   dell'invito ha funzionato. Chi si iscrive deve vederlo prima di
   compilare, non scoprirlo dopo. */
.porta-invito{
  display:flex;gap:11px;align-items:flex-start;
  margin:0 0 18px;padding:12px 14px;border-radius:var(--radius-sm);
  background:rgba(201,154,63,.12);border:1px solid rgba(201,154,63,.32);
  font-size:13.5px;color:var(--text-2);line-height:1.5;text-align:left;
}
.porta-invito .pi-ico{color:var(--gold);font-size:17px;line-height:1.2}
.porta-invito b{display:block;color:var(--text);margin-bottom:2px}
.porta-invito code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;color:var(--text);letter-spacing:.06em;
}

/* ---------- La festa: fuochi d'artificio e regalo ----------
   Sopra ogni altra cosa, perché è il momento in cui l'app smette di
   essere uno strumento e dice qualcosa a chi la usa. */
.fuochi{
  position:fixed;inset:0;z-index:400;
  pointer-events:none;                 /* i fuochi non intercettano i tocchi */
  transition:opacity .5s ease;
}
.fuochi.via{opacity:0}

.regalo-scena{
  position:fixed;inset:0;z-index:401;
  display:grid;place-items:center;padding:24px;
  background:rgba(10,8,6,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:festaEntra .35s var(--ease);
}
.regalo-scena.via{animation:festaVia .28s var(--ease) forwards}
@keyframes festaEntra{from{opacity:0}to{opacity:1}}
@keyframes festaVia{to{opacity:0}}

.regalo-carta{
  max-width:340px;width:100%;text-align:center;
  background:var(--card);border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:30px 26px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:regaloArriva .5s var(--ease) both;
}
@keyframes regaloArriva{
  from{transform:scale(.82) translateY(14px);opacity:0}
  60%{transform:scale(1.04) translateY(0);opacity:1}
  to{transform:scale(1)}
}
.regalo-ico{margin-bottom:14px;animation:regaloDondola 2.6s ease-in-out infinite}
@keyframes regaloDondola{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(3deg) translateY(-5px)}
}
.regalo-carta h2{
  font-family:var(--font-display);font-size:25px;font-weight:600;
  letter-spacing:-.02em;margin:0 0 10px;
}
.regalo-carta p{color:var(--text-2);font-size:15px;line-height:1.55;margin:0 0 8px}
.regalo-carta .regalo-nota{color:var(--text-3);font-size:13px;margin-top:12px}
.regalo-carta .btn{margin-top:18px}
body.festa-aperta{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .regalo-carta,.regalo-ico,.regalo-scena{animation:none}
}