:root{
  --bg:#F2F2F7; --surface:#FFFFFF; --surface-2:#FFFFFF;
  --separator:rgba(60,60,67,.10); --hairline:rgba(60,60,67,.16);
  --text:#1D1D1F; --text-2:#86868B; --text-3:#B0B0B5;
  --accent:#BE9B3E; --accent-soft:rgba(190,155,62,.14);
  --primary-bg:#1D1D1F; --primary-fg:#FFFFFF;
  --danger:#FF3B30;
  --track:#E6E6EB; --field:#EFEFF1;
  --nav-bg:rgba(242,242,247,.72);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px rgba(0,0,0,.06);
  --shadow-sheet:0 -2px 30px rgba(0,0,0,.18);
  --ease:cubic-bezier(.32,.72,0,1);
}
/* Palette scura — usata quando il sistema è scuro (tema "Automatico")
   oppure quando l'utente forza "Scuro" dal menù (data-theme="dark"). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#000000; --surface:#1C1C1E; --surface-2:#2C2C2E;
    --separator:rgba(84,84,88,.34); --hairline:rgba(84,84,88,.5);
    --text:#F5F5F7; --text-2:#98989D; --text-3:#636366;
    --accent:#E0B557; --accent-soft:rgba(224,181,87,.18);
    --primary-bg:#FFFFFF; --primary-fg:#000000;
    --danger:#FF453A;
    --track:#2C2C2E; --field:#1C1C1E;
    --nav-bg:rgba(0,0,0,.62);
    --shadow:0 1px 2px rgba(0,0,0,.4);
    --shadow-sheet:0 -2px 40px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#1C1C1E; --surface-2:#2C2C2E;
  --separator:rgba(84,84,88,.34); --hairline:rgba(84,84,88,.5);
  --text:#F5F5F7; --text-2:#98989D; --text-3:#636366;
  --accent:#E0B557; --accent-soft:rgba(224,181,87,.18);
  --primary-bg:#FFFFFF; --primary-fg:#000000;
  --danger:#FF453A;
  --track:#2C2C2E; --field:#1C1C1E;
  --nav-bg:rgba(0,0,0,.62);
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-sheet:0 -2px 40px rgba(0,0,0,.6);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg);}
html{min-height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:17px; line-height:1.35;
  min-height:100vh; min-height:100dvh;   /* riempie sempre lo schermo: niente fascia chiara con liste corte */
}
button{font-family:inherit;cursor:pointer;}
input,textarea{font-family:inherit;}

/* Barra di scorrimento minimale in stile iOS (sottile, arrotondata, traslucida) */
*{scrollbar-width:thin;scrollbar-color:rgba(140,140,150,.5) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background-color:rgba(140,140,150,.45);border-radius:10px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background-color:rgba(140,140,150,.7);}

/* Nav */
.nav{position:sticky;top:0;z-index:30;background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--separator);padding:calc(env(safe-area-inset-top) + 8px) 16px 10px;}
.nav-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.brand{display:flex;align-items:center;gap:9px;}
.brand .glyph{width:26px;height:26px;flex:none;color:var(--accent);}
.title{font-size:30px;font-weight:700;letter-spacing:-.022em;margin:0;}
.nav-actions{display:flex;align-items:center;gap:4px;padding-bottom:4px;}
.icon-btn{width:38px;height:38px;border:none;background:none;border-radius:50%;color:var(--accent);
  display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s;}
.icon-btn:active{background:var(--accent-soft);transform:scale(.92);}
.icon-btn svg{width:25px;height:25px;}

/* Search */
.search{position:relative;margin-top:12px;}
.search > svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--text-3);}
.search input{width:100%;border:none;outline:none;background:var(--field);color:var(--text);
  border-radius:11px;padding:9px 64px 9px 34px;font-size:16px;}
.search input::placeholder{color:var(--text-3);}
/* filtri dentro la barra, all'estrema destra; la x di cancellazione
   compare accanto (a sinistra del filtro) solo quando c'è del testo */
.search-filter{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  border:none;background:none;padding:0;display:flex;align-items:center;justify-content:center;color:var(--accent);}
.search-filter svg{width:18px;height:18px;}
.sf-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);border:1.5px solid var(--field);}
.search-clear{position:absolute;right:34px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  border:none;background:none;padding:0;display:flex;align-items:center;justify-content:center;color:var(--text-3);}
.search-clear svg{width:17px;height:17px;}
.search-clear path{stroke:var(--field);stroke-width:1.8;stroke-linecap:round;fill:none;}

/* Su iOS il long-press/trascinamento selezionava le etichette dei controlli
   (es. il testo dei segmented) invece di azionarli */
button,.segmented,.seg-mini{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}

/* Segmented */
.segmented{position:relative;display:flex;background:var(--track);border-radius:9px;padding:2px;margin-top:12px;height:34px;}
.seg-thumb{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);background:var(--surface);
  border-radius:7px;box-shadow:0 1px 3px rgba(0,0,0,.14),0 .5px .5px rgba(0,0,0,.1);transition:transform .28s var(--ease);}
/* solo il segmented della nav: i .seg-thumb dentro la scheda film hanno vita propria
   (senza lo scoping, aprendo un film dalla lista Visti il riquadro restava inchiodato) */
body.show-seen .segmented .seg-thumb{transform:translateX(100%);}
.seg-btn{flex:1;z-index:1;background:none;border:none;color:var(--text-2);font-size:13.5px;font-weight:600;
  letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:5px;transition:color .2s;}
.seg-btn.active{color:var(--text);}
.seg-count{font-size:11px;font-weight:600;background:var(--accent-soft);color:var(--accent);
  border-radius:9px;padding:1px 6px;min-width:18px;text-align:center;}

/* List */
main{padding:14px 16px calc(env(safe-area-inset-bottom) + 80px);max-width:720px;margin:0 auto;}
.group{display:flex;flex-direction:column;gap:10px;}
.card{display:flex;align-items:flex-start;gap:13px;padding:14px 15px;position:relative;cursor:pointer;transition:background .12s;}
.card:active{background:var(--accent-soft);}
.card + .card{border-top:.5px solid var(--separator);}
.circle{flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;border:1.7px solid var(--text-3);
  background:none;padding:0;display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s,transform .12s;}
.circle:active{transform:scale(.85);}
.circle.checked{background:var(--accent);border-color:var(--accent);}
.circle svg{width:14px;height:14px;color:#fff;opacity:0;transform:scale(.5);transition:opacity .18s,transform .18s;}
:root[data-theme="dark"] .circle.checked svg{color:#1C1C1E;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="dark"]) .circle.checked svg{color:#1C1C1E;}}
.circle.checked svg{opacity:1;transform:scale(1);}
.card-main{flex:1;min-width:0;}
.film-title{font-size:16.5px;font-weight:600;letter-spacing:-.012em;margin:0;line-height:1.25;}
.film-meta{font-size:13.5px;color:var(--text-2);margin:3px 0 0;font-variant-numeric:tabular-nums;}
.film-note{font-size:14px;color:var(--text-2);margin:5px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rate-row{display:flex;align-items:center;gap:12px;margin-top:7px;}
.rate-row .stars{margin-top:0;}
.stars{display:flex;gap:3px;margin-top:7px;}
.stars .star{position:relative;display:inline-block;width:17px;height:17px;color:var(--text-3);transition:transform .1s;}
.stars .star:active{transform:scale(.8);}
/* stella riempibile a metà: contorno sotto, stella piena sopra RITAGLIATA in larghezza
   (l'SVG pieno resta a grandezza piena, è il contenitore .s-fill che lo taglia) */
.stars .star .s-base,.rate-stars .star .s-base{width:100%;height:100%;display:block;}
.stars .star .s-fill,.rate-stars .star .s-fill{position:absolute;top:0;left:0;height:100%;width:0;overflow:hidden;color:var(--accent);}
.stars .star .s-fill svg,.rate-stars .star .s-fill svg{height:100%;display:block;max-width:none;}
.stars .star .s-fill svg{width:17px;}
.rate-stars .star .s-fill svg{width:21px;}
.stars .star.half .s-fill,.rate-stars .star.half .s-fill{width:50%;}
.stars .star.full .s-fill,.rate-stars .star.full .s-fill{width:100%;}
.chev{flex:none;align-self:center;color:var(--text-3);width:9px;height:15px;}

/* Swipe sulle righe (touch): sposta stato / elimina */
.swipe{position:relative;overflow:hidden;border-radius:16px;}
/* la card che scorre tiene i suoi angoli stondati anche fuori dalla maschera */
.swipe > .card{position:relative;z-index:1;background:var(--surface);border-radius:16px;}
.swipe-bg{position:absolute;top:0;bottom:0;z-index:0;width:0;overflow:hidden;
  display:flex;align-items:center;padding:0 10px;opacity:0;}
.swipe-bg.show{opacity:1;}
.swipe-bg.left{left:0;justify-content:flex-start;}
.swipe-bg.right{right:0;justify-content:flex-end;}
.swipe-act{display:flex;flex-direction:column;align-items:center;gap:5px;}
.swipe-btn{width:52px;height:52px;border-radius:16px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--danger);}
.swipe-btn svg{width:26px;height:26px;}
.swipe-ico{width:30px;height:30px;flex:none;color:var(--accent);}
.swipe-lbl{font-size:11.5px;font-weight:500;color:var(--text-2);white-space:nowrap;}
.swipe.open .swipe-bg{cursor:pointer;}
.swipe.open .swipe-btn:active{filter:brightness(.9);}
@media (hover:none) and (pointer:coarse){ .swipe .circle{display:none;} }
/* Ricerca unificata: intestazioni di sezione + righe catalogo con il "+" */
/* tre puntini centrati in fondo al catalogo: altri risultati */
.more-dots{display:flex;align-items:center;justify-content:center;gap:5px;margin:2px auto 0;
  padding:12px 24px;border:none;background:none;border-radius:22px;transition:background .15s;}
.more-dots span{width:5px;height:5px;border-radius:50%;background:var(--text-2);}
.more-dots:active{background:var(--accent-soft);}
.more-dots.loading span{animation:dotsPulse 1s infinite;}
.more-dots.loading span:nth-child(2){animation-delay:.15s;}
.more-dots.loading span:nth-child(3){animation-delay:.3s;}
@keyframes dotsPulse{0%,100%{opacity:.35}50%{opacity:1}}
.list-sec{font-size:13px;font-weight:600;color:var(--text-2);margin:20px 4px 9px;}
.list-sec:first-child{margin-top:2px;}
.circle.add{border-color:var(--accent);}
.circle.add svg{opacity:1;transform:none;color:var(--accent);width:15px;height:15px;}
@media (hover:none) and (pointer:coarse){ .swipe .circle.add{display:flex;} }

/* Empty */
.empty{text-align:center;padding:70px 30px;color:var(--text-2);}
.empty .ico{width:46px;height:46px;color:var(--text-3);margin:0 auto 14px;display:block;}
.empty h3{font-size:18px;font-weight:600;color:var(--text);margin:0 0 6px;letter-spacing:-.01em;}
.empty p{font-size:14.5px;margin:0;line-height:1.45;}

/* Scrim + Sheet */
/* con un foglio aperto la pagina sotto è bloccata (la classe la mette syncPageLock) */
html.modal-open, html.modal-open body{overflow:hidden;overscroll-behavior:none;}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40;opacity:0;pointer-events:none;
  transition:opacity .3s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.scrim.show{opacity:1;pointer-events:auto;}
/* Foglio stile iOS: parte poco sotto il notch (dietro si vede la pagina oscurata),
   angoli in alto sempre stondati — anche durante il trascinamento verso il basso.
   Non scrolla lui: lo scroll vive in .sheet-body, così la barra può fare da vetro. */
.sheet{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + 10px);bottom:0;z-index:50;
  background:var(--tint-l, var(--bg));   /* col film aperto: colore della locandina molto sbiadito */
  box-shadow:var(--shadow-sheet);transform:translateY(100%);
  transition:transform .38s var(--ease), background-color .4s ease;
  border-radius:16px 16px 0 0;overflow:hidden;display:flex;flex-direction:column;max-width:720px;margin:0 auto;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sheet{background:var(--tint-d, var(--bg));}
}
:root[data-theme="dark"] .sheet{background:var(--tint-d, var(--bg));}
/* a scheda aperta niente transform: con un transform attivo WebKit non applica
   il backdrop-filter della barra (il traslucido spariva) */
.sheet.show{transform:none;}
/* la scheda film sta SOPRA i consigli: aprendo un film da "Cosa guardo stasera"
   e richiudendolo si torna ai consigli, non alla lista */
#sheet{z-index:52;}
/* Manichetta: ancorata al bordo del foglio, non più al safe-area (finiva sotto il notch) */
.grabber{position:absolute;top:8px;left:50%;margin-left:-22px;z-index:4;width:44px;height:5px;
  border-radius:2.5px;background:var(--text-3);opacity:.55;}

/* Niente più barra: tastini rotondi flottanti stile Apple — X chiude, ✓ salva.
   Il contenuto scorre sotto di loro. */
.fab{position:absolute;top:14px;width:50px;height:50px;border-radius:50%;border:none;z-index:5;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.18);
  background:var(--tint-l, var(--bg));   /* neutri: seguono il colore del foglio, li stacca l'ombra */
  transition:transform .12s ease, opacity .2s ease;}
.fab svg{width:23px;height:23px;}
.fab:active{transform:scale(.92);}
.fab-x{left:14px;color:var(--text-2);}
.fab-ok{right:14px;color:var(--accent);}
.fab-ok:disabled{opacity:.35;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .fab{background:var(--tint-d, var(--surface));}
}
:root[data-theme="dark"] .fab{background:var(--tint-d, var(--surface));}
/* titolo in pagina (usato dalla scheda "Cosa guardo stasera?") */
.sheet-title{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:4px 2px 14px;}
/* il padding-top lascia spazio a manichetta e tastini */
.sheet-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;
  padding:70px 16px calc(env(safe-area-inset-bottom) + 28px);}
/* Testata: locandina a sinistra, campi senza cornici a destra (altezza fissa,
   così accanto al poster non restano mai buchi). Il foglio è già tinto del
   colore della locandina (--tint-l/--tint-d impostate da posterTint su #sheet). */
.sheet-hero{display:flex;gap:16px;margin:2px 2px 16px;}
.poster-hero{flex:none;width:48%;margin:0;}   /* la locandina prende circa metà larghezza */
.poster-hero img{display:block;width:100%;border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.3);background:var(--track);}
.poster-hero img:active{opacity:.85;}
.poster-hero .poster-ph{width:100%;aspect-ratio:2/3;border-radius:12px;background:var(--field);
  display:flex;align-items:center;justify-content:center;color:var(--text-3);}
.poster-hero .poster-ph svg{width:38%;height:38%;}
/* i testi si distribuiscono in verticale accanto alla locandina; sono textarea
   auto-espandibili (autoGrow in JS) così titoli/generi lunghi vanno a capo
   invece di sforare la pagina */
.hero-fields{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.hero-fields textarea,.hero-fields input{display:block;width:100%;min-width:0;border:none;outline:none;
  background:none;color:var(--text);padding:0;font-family:inherit;resize:none;overflow:hidden;-webkit-appearance:none;}
.hero-fields textarea::placeholder,.hero-fields input::placeholder{color:var(--text-3);}
.hero-fields .hero-title{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:0 0 12px;}
.hero-fields .hero-line{font-size:15px;line-height:1.3;margin:0 0 9px;}
.hero-fields .hero-line:last-child{margin-bottom:0;}
/* i campi si modificano col doppio tocco: niente ritardi o zoom accidentali */
.hero-fields textarea,.hero-fields input{touch-action:manipulation;}
/* trama collassata a 3 righe (i puntini li mette il clamp);
   si espande/richiude toccando il riquadro */
.overview-text.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
/* chip minimal: Tipo sopra il titolo (tap = cicla), piattaforma sotto le info
   (tap = apre il pannello con le pillole) */
.chip-mini{display:inline-block;align-self:flex-start;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--text-2);background:var(--surface);border:none;border-radius:8px;padding:4px 10px;
  margin:0 0 9px;box-shadow:var(--shadow);transition:transform .1s;}
.chip-mini:active{transform:scale(.94);}
.hero-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;}
.hero-badges .chip-mini{margin:0;}
/* "Dove lo guardi": solo testo + freccina; il tocco apre il menu a tendina */
.plat-plain{display:inline-flex;align-items:center;gap:3px;border:none;background:none;padding:3px 2px;
  font-size:13px;font-weight:600;color:var(--text-2);transition:opacity .1s;}
.plat-plain:active{opacity:.55;}
.plat-plain svg{width:12px;height:12px;flex:none;opacity:.7;}
.plat-menu{transform-origin:top left;min-width:200px;max-height:min(420px,55vh);overflow-y:auto;}
.plat-menu .menu-item{padding:10.5px 15px;font-size:15px;}
/* campo libero per "Altro…": appare sotto i badge solo mentre si scrive */
.plat-inline{margin-top:8px;}
.plat-inline input{width:100%;border:none;outline:none;background:var(--field);border-radius:8px;
  padding:7px 10px;font-size:14px;color:var(--text);}
.plat-inline input::placeholder{color:var(--text-3);}
/* Visore locandina a tutto schermo */
.pviewer{position:fixed;inset:0;z-index:90;background:#000;display:flex;
  align-items:center;justify-content:center;touch-action:none;overflow:hidden;}
.pviewer.hidden{display:none;}
.pviewer img{max-width:100%;max-height:100%;will-change:transform;}
.pv-close{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.16);color:#fff;
  display:flex;align-items:center;justify-content:center;}
.pv-close svg{width:18px;height:18px;}
/* Su schermo grande (web da PC/tablet): scheda sospesa e centrata, non più attaccata in basso.
   Il blocco sta DOPO le regole base: a parità di specificità vince l'ordine, non la media query. */
@media (min-width:700px){
  .scrim{background:rgba(0,0,0,.32);}
  .sheet{
    left:50%;right:auto;bottom:auto;top:50%;margin:0;
    width:min(560px,94vw);max-width:560px;max-height:86vh;
    border-radius:20px;
    box-shadow:0 24px 70px rgba(0,0,0,.38),0 0 0 .5px var(--separator);
    transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;
    transition:opacity .24s var(--ease),transform .3s var(--ease);
  }
  .sheet.show{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto;}
  .grabber{display:none;}
}
.field-group{background:var(--surface);border-radius:13px;overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow);}
.field{display:flex;align-items:center;padding:12px 15px;gap:10px;}
.field + .field{border-top:.5px solid var(--separator);}
.field label{font-size:15px;color:var(--text-2);width:74px;flex:none;}
.field input,.field textarea{flex:1;border:none;outline:none;background:none;color:var(--text);font-size:16px;resize:none;width:100%;}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);}
.field.title-field input{font-size:18px;font-weight:600;letter-spacing:-.01em;}
.field.note-field{align-items:flex-start;}
.field.note-field label{margin-top:1px;}
.field.note-field textarea{overflow:hidden;min-height:22px;}   /* una riga, cresce solo se serve */
.sec-label{font-size:12.5px;color:var(--text-2);text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px 6px;font-weight:600;}
.seg-mini{position:relative;display:flex;background:var(--track);border-radius:9px;padding:2px;height:36px;margin-bottom:18px;}
.seg-mini .seg-thumb{width:calc(50% - 2px);}
.seg-mini.is-seen .seg-thumb{transform:translateX(100%);}
.seg-mini button{flex:1;z-index:1;background:none;border:none;font-size:14px;font-weight:600;color:var(--text-2);}
.seg-mini button.active{color:var(--text);}
.rate-block{background:var(--surface);border-radius:13px;padding:12px 15px;margin-bottom:18px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.rate-block .rl{font-size:15px;color:var(--text);}
.rate-ctrl{display:flex;align-items:center;gap:10px;}
.rate-stars{display:flex;gap:4px;}
.rate-stars .star{position:relative;display:inline-block;width:21px;height:21px;color:var(--text-3);transition:transform .1s;}
.rate-stars .star:active{transform:scale(.82);}
/* Tipo (pillole) */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.pill{border:none;background:var(--field);color:var(--text-2);font-size:14px;font-weight:600;
  padding:8px 14px;border-radius:11px;transition:background .15s,color .15s,box-shadow .15s;}
.pill.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent);}

/* Locandina nelle righe */
.card{align-items:center;}
.poster{flex:none;width:46px;height:69px;border-radius:8px;overflow:hidden;background:var(--field);
  box-shadow:0 1px 3px rgba(0,0,0,.14);}
.poster img{width:100%;height:100%;object-fit:cover;display:block;}
.poster-empty{display:flex;align-items:center;justify-content:center;color:var(--text-3);}
.poster-empty svg{width:22px;height:22px;}

/* Suggerimenti TMDb sotto il titolo */
.tmdb-results{background:var(--surface);border-radius:13px;overflow:hidden;box-shadow:var(--shadow);margin:-8px 0 18px;}
.tmdb-results:empty{display:none;}
.tmdb-row{display:flex;align-items:center;gap:11px;padding:9px 12px;border:none;background:none;width:100%;text-align:left;}
.tmdb-row + .tmdb-row{border-top:.5px solid var(--separator);}
.tmdb-row:active{background:var(--accent-soft);}
.tmdb-thumb{flex:none;width:38px;height:57px;border-radius:6px;overflow:hidden;background:var(--field);
  display:flex;align-items:center;justify-content:center;color:var(--text-3);}
.tmdb-thumb img{width:100%;height:100%;object-fit:cover;}
.tmdb-thumb svg{width:18px;height:18px;}
.tmdb-info{flex:1;min-width:0;}
.tmdb-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tmdb-sub{font-size:12.5px;color:var(--text-2);margin-top:2px;}
.tmdb-imdb{white-space:nowrap;}
.tmdb-imdb .imdb-tag{margin-right:2px;}
.tmdb-foot{font-size:11px;color:var(--text-3);text-align:center;padding:7px 12px;border-top:.5px solid var(--separator);}
.tmdb-hint{font-size:12px;color:var(--text-3);padding:11px 13px;text-align:center;}
.overview-wrap{margin:0 0 18px;}
.overview-card{background:var(--surface);border-radius:13px;box-shadow:var(--shadow);padding:13px 15px;}
.overview-text{font-size:14px;color:var(--text-2);line-height:1.55;margin:0;}

/* Etichetta tipo nelle righe */
.title-row{display:flex;align-items:center;gap:7px;}
.badge{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:2px 6px;line-height:1.45;}
.imdb-badge{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;
  color:var(--text);font-variant-numeric:tabular-nums;line-height:1;}
.imdb-tag{font-size:9.5px;font-weight:800;letter-spacing:.02em;color:#000;background:#F5C518;
  border-radius:4px;padding:2px 4px;line-height:1;}

/* Sezione serie: avanzamento + note per episodio */
.seg-mini.is-done .seg-thumb{transform:translateX(100%);}
.prog-at{background:var(--surface);border-radius:13px;box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden;}
.prog-row{display:flex;align-items:center;justify-content:space-between;padding:10px 15px;}
.prog-row + .prog-row{border-top:.5px solid var(--separator);}
.prog-lbl{font-size:15px;color:var(--text);}

.stepper{display:inline-flex;align-items:center;background:var(--track);border-radius:9px;overflow:hidden;}
.stepper button{width:40px;height:32px;border:none;background:none;color:var(--accent);font-size:20px;font-weight:500;
  line-height:1;display:flex;align-items:center;justify-content:center;transition:background .12s;}
.stepper button:active{background:var(--accent-soft);}
.stepper .val{min-width:32px;text-align:center;font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.stepper.sm button{width:32px;height:28px;font-size:18px;}
.stepper.sm .val{min-width:22px;font-size:14px;}

.note-card{background:var(--surface);border-radius:13px;box-shadow:var(--shadow);padding:12px 13px;margin-bottom:10px;}
.note-top{display:flex;align-items:center;gap:10px;}
.note-se{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-2);}
.note-del{margin-left:auto;width:28px;height:28px;border:none;background:none;color:var(--text-3);font-size:24px;
  line-height:1;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.note-del:active{background:var(--accent-soft);color:var(--danger);}
.note-stars{display:flex;gap:6px;margin:11px 0 9px;}
.note-stars .star{width:22px;height:22px;color:var(--text-3);transition:color .12s,transform .1s;}
.note-stars .star.on{color:var(--accent);}
.note-stars .star:active{transform:scale(.82);}
.note-text{width:100%;border:none;outline:none;background:var(--field);border-radius:9px;padding:9px 11px;
  color:var(--text);font-size:15px;}
.note-text::placeholder{color:var(--text-3);}
.add-note-btn{width:100%;background:var(--surface);border:none;border-radius:13px;padding:13px;color:var(--accent);
  font-size:15px;font-weight:600;box-shadow:var(--shadow);margin-bottom:18px;transition:background .12s;}
.add-note-btn:active{background:var(--accent-soft);}

.hidden{display:none !important;}
.delete-btn{width:100%;background:var(--surface);border:none;border-radius:13px;padding:14px;color:var(--danger);
  font-size:16px;font-weight:500;box-shadow:var(--shadow);margin-bottom:6px;transition:background .12s;}
.delete-btn:active{background:var(--accent-soft);}

/* Menu */
.menu{position:fixed;z-index:60;top:0;right:0;background:var(--surface-2);border-radius:13px;overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.22),0 0 0 .5px var(--separator);min-width:230px;transform-origin:top right;
  transform:scale(.9);opacity:0;pointer-events:none;transition:transform .18s var(--ease),opacity .18s;}
.menu.show{transform:scale(1);opacity:1;pointer-events:auto;}
.menu-item{display:flex;align-items:center;gap:11px;padding:12px 15px;font-size:15.5px;color:var(--text);
  background:none;border:none;width:100%;text-align:left;}
.menu-item:active{background:var(--accent-soft);}
.menu-item + .menu-item{border-top:.5px solid var(--separator);}
.menu-item .mi-ic{width:18px;height:18px;color:var(--text-2);flex:none;}
.menu-item .check{margin-left:auto;width:16px;height:16px;color:var(--accent);opacity:0;}
.menu-item.sel .check{opacity:1;}
.menu-sec{font-size:11.5px;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em;padding:11px 15px 5px;font-weight:600;background:var(--surface-2);}
.acct-row{padding:11px 15px;border-bottom:.5px solid var(--separator);display:flex;align-items:center;gap:10px;}
.acct-info{flex:1;min-width:0;}
.acct-row .em{font-size:14px;color:var(--text);font-weight:600;word-break:break-all;}
.acct-row .st{font-size:12px;color:var(--text-2);margin-top:2px;}
.acct-exit{flex:none;border:none;background:none;color:var(--danger);padding:8px;margin:-8px -6px -8px 0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;}
.acct-exit svg{width:20px;height:20px;}
.acct-exit:active{opacity:.5;}
.menu-item.danger{color:var(--danger);}
.menu-item.danger .mi-ic{color:var(--danger);}

/* Auth */
.auth{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px;text-align:center;
  padding-top:calc(env(safe-area-inset-top) + 24px);}
.auth.hidden{display:none;}
.auth-inner{width:100%;max-width:360px;}
.auth .logo{width:60px;height:60px;color:var(--accent);margin:0 auto 18px;display:block;}
.auth h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;}
.auth .tag{color:var(--text-2);font-size:15px;margin:0 0 26px;line-height:1.4;}
.auth .field-group{text-align:left;margin-bottom:8px;}
.auth-err{color:var(--danger);font-size:13.5px;min-height:18px;margin:6px 2px 10px;line-height:1.35;}
.auth-primary{width:100%;background:var(--primary-bg);color:var(--primary-fg);border:none;border-radius:13px;
  padding:14px;font-size:16px;font-weight:600;transition:opacity .15s,transform .1s;}
.auth-primary:active{transform:scale(.985);}
.auth-primary:disabled{opacity:.45;}
.auth-switch{background:none;border:none;color:var(--accent);font-size:15px;margin-top:18px;}
.auth-skip{background:none;border:none;color:var(--text-2);font-size:13.5px;margin-top:24px;text-decoration:underline;}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);transform:translateX(-50%) translateY(20px);
  background:var(--primary-bg);color:var(--primary-fg);font-size:14px;font-weight:500;padding:11px 18px;border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.3);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:88%;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* Cosa guardo stasera — striscia d'ingresso (in cima alla lista Da guardare) */
.disco-strip{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--accent-soft);border:none;border-radius:13px;padding:13px 15px;margin-bottom:12px;
  color:var(--accent);transition:transform .1s;}
.disco-strip:active{transform:scale(.99);}
.disco-strip .ds-ic{width:24px;height:24px;flex:none;}
.disco-strip .ds-tx{flex:1;min-width:0;}
.disco-strip .ds-t{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;}
.disco-strip .ds-s{display:block;font-size:12.5px;font-weight:500;color:var(--text-2);margin-top:1px;}
.disco-strip .ds-chev{width:8px;height:14px;flex:none;opacity:.7;}

/* Cosa guardo stasera — pagina */
#discoverResults .more-dots{grid-column:1/-1;}
.disco-box{background:var(--surface);border-radius:13px;padding:14px 15px 4px;margin:32px 0 20px;box-shadow:var(--shadow);}
.disco-q{margin-bottom:4px;}
.disco-q-l{display:block;font-size:13px;color:var(--text-2);margin:0 0 8px 2px;font-weight:600;}
.disco-box .pills{margin-bottom:14px;}
.disco-go{width:100%;background:var(--primary-bg);color:var(--primary-fg);border:none;border-radius:12px;
  padding:12px;font-size:15px;font-weight:600;margin:6px 0 12px;transition:transform .1s,filter .15s;}
.disco-go:active{transform:scale(.99);filter:brightness(1.08);}
.disco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 12px;}
/* flex column dall'alto: i button centrano il contenuto in verticale, e con titoli
   su 2 righe le locandine della stessa riga si sfalsavano in altezza */
.disco-card{background:none;border:none;padding:0;text-align:left;color:var(--text);transition:transform .1s;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;}
.disco-card:active{transform:scale(.96);}
.disco-poster{position:relative;width:100%;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--field);
  box-shadow:0 1px 4px rgba(0,0,0,.16);display:flex;align-items:center;justify-content:center;color:var(--text-3);}
.disco-poster img{width:100%;height:100%;object-fit:cover;display:block;}
.disco-poster > svg{width:28px;height:28px;}
.disco-rate{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;gap:3px;
  background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-weight:600;padding:2px 6px;border-radius:8px;}
.disco-rate svg{width:11px;height:11px;color:var(--accent);}
.disco-match{position:absolute;right:6px;top:6px;background:rgba(0,0,0,.62);color:#E8C56B;
  font-size:11px;font-weight:700;padding:2px 6px;border-radius:8px;}
.disco-name{font-size:13px;font-weight:600;line-height:1.25;margin:7px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.disco-sub{font-size:12px;color:var(--text-2);margin-top:2px;}
.disco-hint{grid-column:1/-1;color:var(--text-2);font-size:14px;text-align:center;padding:26px 12px;line-height:1.45;}
.disco-moods{flex-wrap:nowrap;overflow-x:auto;margin-bottom:16px;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.disco-moods::-webkit-scrollbar{display:none;}
.disco-moods .pill{flex:none;}
.disco-more{letter-spacing:1px;padding-left:12px;padding-right:12px;}
.disco-input{width:100%;border:none;outline:none;background:var(--field);color:var(--text);
  border-radius:11px;padding:10px 12px;font-size:16px;}
.disco-input::placeholder{color:var(--text-3);}
#dqPersonResults{margin:8px 0 4px;}
#dqPersonResults:empty{margin:0;}
/* Scelta guidata a domande */
.disco-guide{margin-bottom:18px;}
.guide-entry{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--accent-soft);
  border:none;border-radius:13px;padding:13px 15px;color:var(--accent);transition:transform .1s;}
.guide-entry:active{transform:scale(.99);}
.guide-entry .ge-ic{width:24px;height:24px;flex:none;}
.guide-entry .ge-tx{flex:1;min-width:0;}
.guide-entry .ge-t{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;}
.guide-entry .ge-chev{width:8px;height:14px;flex:none;opacity:.7;}
.guide-step{background:var(--surface);border-radius:13px;padding:14px 15px;box-shadow:var(--shadow);}
.guide-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.guide-prog{font-size:12px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.03em;}
.guide-x{background:none;border:none;color:var(--text-3);font-size:22px;line-height:1;padding:0 2px;}
.guide-q{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 12px;color:var(--text);}
.guide-opts{margin-bottom:2px;}

/* Saghe: card gruppo con ventaglio di locandine (variante B scelta su mockup) */
.saga-fan{flex:none;width:72px;height:70px;position:relative;}
.saga-fan .sf{position:absolute;top:3px;width:44px;height:64px;border-radius:6px;background:var(--field);overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.2);}
.saga-fan .sf img{width:100%;height:100%;object-fit:cover;display:block;}
.saga-fan .sf1{left:0;top:1px;width:46px;height:68px;z-index:3;border:1.5px solid var(--surface);}
.saga-fan .sf2{left:14px;transform:rotate(4deg);z-index:2;}
.saga-fan .sf3{left:26px;top:5px;height:60px;transform:rotate(8deg);z-index:1;}
.saga-card .chev{transition:transform .25s var(--ease);}
.saga-card.open .chev{transform:rotate(90deg);}
.saga-part{opacity:.72;}
/* Gruppo aperto: i capitoli scendono a cascata dalla card e restano rientrati,
   legati da una linguetta oro — così si vede che sono "dentro" */
.saga-sub{display:flex;flex-direction:column;gap:10px;position:relative;padding-left:11px;}
.saga-sub::before{content:"";position:absolute;left:2px;top:8px;bottom:8px;width:2.5px;border-radius:2px;background:var(--accent);opacity:.55;}
@keyframes sagaDrop{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}
/* chiusura a fisarmonica: il blocco si comprime e sfuma prima del render */
.saga-sub.closing{overflow:hidden;opacity:0;margin-bottom:-10px;
  transition:height .28s var(--ease),opacity .2s ease,margin-bottom .28s var(--ease);}
.saga-sub.anim > *{animation:sagaDrop .32s var(--ease) both;}
.saga-sub.anim > :nth-child(2){animation-delay:.05s;}
.saga-sub.anim > :nth-child(3){animation-delay:.1s;}
.saga-sub.anim > :nth-child(4){animation-delay:.15s;}
.saga-sub.anim > :nth-child(n+5){animation-delay:.2s;}

/* Novità dell'aggiornamento: card centrale stile alert (variante A scelta su mockup) */
.news-overlay{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;padding:28px;
  opacity:0;transition:opacity .25s ease;}
.news-overlay.show{opacity:1;}
.news-card{background:var(--surface);border-radius:18px;padding:22px 20px 16px;width:100%;max-width:300px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);transform:scale(.9);transition:transform .28s var(--ease);}
.news-overlay.show .news-card{transform:none;}
.news-title{font-size:19px;font-weight:700;text-align:center;margin:0 0 2px;color:var(--text);}
.news-sub{font-size:12.5px;color:var(--text-2);text-align:center;margin:0 0 16px;}
.news-item{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;}
.news-item svg{flex:none;width:22px;height:22px;color:var(--accent);margin-top:1px;}
.news-item p{margin:0;font-size:13.5px;line-height:1.45;color:var(--text);}
.news-ok{width:100%;background:var(--primary-bg);color:var(--primary-fg);border:none;border-radius:11px;
  padding:12px;font-size:15px;font-weight:600;margin-top:4px;}
.news-ok:active{transform:scale(.985);}

/* Inserimento manuale: riga tratteggiata in fondo ai risultati di ricerca */
.manual-add{width:100%;border:1.5px dashed var(--text-3);background:none;border-radius:13px;
  color:var(--text-2);font-size:13.5px;font-weight:600;padding:12px;margin:4px 0 12px;
  display:flex;align-items:center;justify-content:center;gap:7px;}
.manual-add svg{width:15px;height:15px;flex:none;}
.manual-add:active{opacity:.55;}

/* Novità e versioni: archivio patchnote nello sheet */
.pn-ver{padding:12px 2px 13px;border-bottom:.5px solid var(--separator);}
.pn-ver:last-child{border-bottom:none;}
.pn-head{display:flex;align-items:baseline;gap:9px;margin-bottom:4px;}
.pn-badge{font-size:13px;font-weight:800;color:var(--accent);background:var(--accent-soft);border-radius:7px;padding:2px 8px;}
.pn-date{color:var(--text-3);font-size:12px;}
.pn-ver ul{margin:0;padding-left:18px;}
.pn-ver li{color:var(--text-2);font-size:14px;line-height:1.45;margin:4px 0;}

/* La guida: schede scorrevoli a schermo intero */
.onboard{position:fixed;inset:0;z-index:95;background:var(--bg);display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 26px) 0 calc(env(safe-area-inset-bottom) + 16px);
  opacity:0;transition:opacity .3s ease;}
.onboard.show{opacity:1;}
.onb-skip{position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:16px;border:none;background:none;
  color:var(--text-2);font-size:15px;padding:8px 10px;z-index:5;}
.onb-slides{flex:1;min-height:0;overflow:hidden;touch-action:pan-y;}
.onb-track{display:flex;height:100%;transition:transform .35s var(--ease);}
.onb-slide{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 36px;-webkit-user-select:none;user-select:none;}
.onb-art{height:170px;display:flex;align-items:center;justify-content:center;margin-bottom:26px;}
.onb-slide h3{margin:0 0 9px;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--text);}
.onb-slide p{margin:0;color:var(--text-2);font-size:15px;line-height:1.5;max-width:300px;}
.onb-dots{display:flex;gap:7px;justify-content:center;padding:18px 0 12px;}
.onb-dot{width:7px;height:7px;border-radius:4px;background:var(--text-3);opacity:.45;transition:all .25s;}
.onb-dot.on{background:var(--accent);opacity:1;width:19px;}
.onb-go{margin:0 28px;background:var(--primary-bg);color:var(--primary-fg);border:none;border-radius:13px;
  font-size:16px;font-weight:600;padding:14px;opacity:0;transform:translateY(6px);transition:all .3s;pointer-events:none;}
.onb-go.on{opacity:1;transform:none;pointer-events:auto;}
.onb-go:active{transform:scale(.985);}
/* Le scene della guida: mini-replay dell'app in azione, coreografie CSS in loop.
   Ogni scena ha la sua durata; gli attori condividono quella durata e si
   sincronizzano con le percentuali dei keyframes. */
.gd{position:relative;width:225px;animation:gdCycle 6.5s infinite;}
.gd3{animation-duration:7.5s;}
.gd4{animation-duration:6s;}
@keyframes gdCycle{0%{opacity:0;}4%{opacity:1;}95%{opacity:1;}100%{opacity:0;}}
.gd-row{background:var(--surface);border-radius:12px;box-shadow:var(--shadow);
  padding:7px 9px;display:flex;gap:8px;align-items:center;}
.gd-poster{width:26px;height:38px;border-radius:5px;flex:none;}
.gp-a{background:linear-gradient(160deg,#2c3e60,#b3543e);}
.gp-b{background:linear-gradient(160deg,#1d2c3f,#5d7ea3);}
.gp-c{background:linear-gradient(160deg,#2b1f18,#6d4a2f);}
.gp-d{background:linear-gradient(160deg,#241a14,#8a5c33);}
.gp-e{background:linear-gradient(160deg,#14555a,#48b09a);}
.gp-f{background:linear-gradient(160deg,#4a2545,#a05777);}
.gp-g{background:linear-gradient(160deg,#8a6d2f,#e6cc84);}
.gd-info{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;gap:1px;}
.gd-info b{font-size:12px;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gd-info i{font-style:normal;font-size:10px;color:var(--text-2);}
.gd-finger{position:absolute;width:26px;height:26px;border-radius:50%;z-index:5;opacity:0;pointer-events:none;
  background:rgba(127,127,135,.5);border:1.5px solid rgba(255,255,255,.75);}

/* scena 1: digiti, spunta il risultato, tap sulla riga → si apre la scheda → Salva */
.gd1{height:152px;overflow:hidden;animation-duration:7.5s;}
.gd1 .gd-bar{background:var(--field);border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.gd1 .gd-bar svg{width:13px;height:13px;color:var(--text-3);flex:none;}
.gd-typewrap{overflow:hidden;display:inline-block;width:76px;animation:gdType 7.5s steps(12,end) infinite;}
.gd-type{display:inline-block;white-space:nowrap;font-size:12px;color:var(--text);}
@keyframes gdType{0%,5%{width:0;}25%,100%{width:76px;}}
.gd-caret{width:1.5px;height:13px;background:var(--accent);flex:none;
  animation:gdBlink .85s steps(1) infinite, gdCaretOff 7.5s infinite;}
@keyframes gdBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@keyframes gdCaretOff{0%,28%{visibility:visible;}29%,100%{visibility:hidden;}}
.gd1 .gd-res{animation:gdRes 7.5s var(--ease) infinite;}
@keyframes gdRes{0%,26%{opacity:0;transform:translateY(8px);}32%,39%{opacity:1;transform:none;}
  42%{opacity:1;transform:scale(.975);}45%,100%{opacity:1;transform:none;}}
.gd-plus{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center;position:relative;flex:none;animation:gdPlusBg 7.5s infinite;}
.gd-plus .pl{font-size:15px;font-weight:600;line-height:1;animation:gdPl 7.5s infinite;}
.gd-plus .ck{width:12px;height:12px;position:absolute;opacity:0;animation:gdCk 7.5s infinite;}
@keyframes gdPlusBg{0%,68%{background:transparent;color:var(--accent);transform:none;}
  72%{background:var(--accent);color:#fff;transform:scale(1.12);}76%,100%{background:var(--accent);color:#fff;transform:none;}}
@keyframes gdPl{0%,68%{opacity:1;}70%,100%{opacity:0;}}
@keyframes gdCk{0%,69%{opacity:0;}73%,100%{opacity:1;}}
.gd-sheet{position:absolute;left:6px;right:6px;bottom:0;z-index:3;background:var(--surface);
  border-radius:14px 14px 10px 10px;box-shadow:0 -4px 18px rgba(0,0,0,.16);padding:5px 10px 8px;
  transform:translateY(115%);animation:gdSheet 7.5s var(--ease) infinite;}
@keyframes gdSheet{0%,42%{transform:translateY(115%);}50%,62%{transform:translateY(0);}70%,100%{transform:translateY(115%);}}
.gd-grab{width:26px;height:3px;border-radius:2px;background:var(--text-3);opacity:.5;margin:2px auto 6px;}
.gd-shead{display:flex;gap:8px;align-items:center;margin-bottom:7px;}
.gd-shead .gd-poster{width:22px;height:32px;}
.gd-save{background:var(--primary-bg);color:var(--primary-fg);border-radius:8px;text-align:center;
  font-size:11px;font-weight:650;padding:6px;animation:gdSave 7.5s infinite;}
@keyframes gdSave{0%,58%{transform:none;}61%{transform:scale(.95);}64%,100%{transform:none;}}
.gd-finger.f1{left:104px;top:56px;animation:gdF1 7.5s infinite;}
@keyframes gdF1{0%,34%{opacity:0;transform:none;}
  38%{opacity:.85;transform:none;}
  41%{opacity:.85;transform:scale(.8);}
  44%,47%{opacity:.85;transform:none;}
  55%,58%{opacity:.85;transform:translateY(62px);}
  61%{opacity:.85;transform:translateY(62px) scale(.8);}
  64%{opacity:.85;transform:translateY(62px);}
  68%,100%{opacity:0;transform:translateY(62px);}}

/* scena 2: swipe a destra = visto, poi il voto in stelline */
.gd2 .gd-swipe{position:relative;}
.gd-under{position:absolute;left:9px;top:50%;margin-top:-12px;width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;}
.gd-under svg{width:12px;height:12px;}
.gd2 .gd-mv{position:relative;z-index:1;animation:gdMv 6.5s var(--ease) infinite;}
@keyframes gdMv{0%,12%{transform:none;}28%,36%{transform:translateX(56px);}48%,100%{transform:none;}}
.gd-finger.f2{left:64px;top:13px;animation:gdF2 6.5s infinite;}
@keyframes gdF2{0%,6%{opacity:0;transform:none;}12%{opacity:.85;transform:none;}
  28%{opacity:.85;transform:translateX(56px);}34%,100%{opacity:0;transform:translateX(56px);}}
.gd-stars{display:flex;gap:5px;justify-content:center;margin-top:18px;font-size:21px;color:var(--accent);}
.gd-stars span{opacity:.22;}
.gd-stars span:nth-child(-n+4){animation:gdStar 6.5s infinite;}
.gd-stars span:nth-child(2){animation-delay:.14s;}
.gd-stars span:nth-child(3){animation-delay:.28s;}
.gd-stars span:nth-child(4){animation-delay:.42s;}
@keyframes gdStar{0%,50%{opacity:.22;transform:none;}55%{opacity:1;transform:scale(1.2);}
  60%,94%{opacity:1;transform:none;}100%{opacity:.22;}}

/* scena 3: long-press, ballo fluido, trascini un capitolo sull'altro e nasce la saga.
   Il ballo (rotazione, .gd-wig interno) è separato dallo spostamento (.gd-g2 esterno):
   due animazioni indipendenti = niente scatti. Gli anelli sono ::after con sola
   opacità, mai box-shadow animata (su iPhone scatta). */
.gd3{display:flex;flex-direction:column;gap:8px;}
.gd3 .gd-g2{position:relative;z-index:2;animation:gdG2 7.5s var(--ease) infinite;}
@keyframes gdG2{0%,18%{transform:none;opacity:1;}
  22%{transform:scale(1.045) translateY(-2px);}
  26%{transform:scale(1.045) translateY(-6px);}
  44%,50%{transform:scale(1.03) translateY(-60px);opacity:1;}
  56%,100%{transform:scale(.92) translateY(-60px);opacity:0;}}
.gd3 .gd-wig{animation:gdWig 7.5s linear infinite;}
@keyframes gdWig{0%,20%{transform:none;}
  22.5%{transform:rotate(-1.1deg);}25%{transform:rotate(1.1deg);}
  27.5%{transform:rotate(-1.1deg);}30%{transform:rotate(1.1deg);}
  32.5%{transform:rotate(-1.1deg);}35%{transform:rotate(1.1deg);}
  37.5%{transform:rotate(-1.1deg);}40%{transform:rotate(1.1deg);}
  42.5%{transform:rotate(-1.1deg);}45%{transform:rotate(1.1deg);}
  47.5%{transform:rotate(-.5deg);}50%,100%{transform:none;}}
.gd3 .gd-g1{position:relative;animation:gdG1 7.5s var(--ease) infinite;}
.gd3 .gd-g1::after{content:"";position:absolute;inset:-2px;border:2px solid var(--accent);
  border-radius:14px;opacity:0;animation:gdG1Ring 7.5s infinite;}
@keyframes gdG1{0%,36%{transform:none;opacity:1;}
  42%,50%{transform:scale(1.02);opacity:1;}
  56%,100%{opacity:0;}}
@keyframes gdG1Ring{0%,36%{opacity:0;}42%,50%{opacity:1;}55%,100%{opacity:0;}}
.gd-saga{position:absolute;left:0;right:0;top:0;background:var(--surface);border-radius:12px;box-shadow:var(--shadow);
  padding:7px 9px;display:flex;gap:10px;align-items:center;opacity:0;animation:gdSaga 7.5s var(--ease) infinite;}
@keyframes gdSaga{0%,56%{opacity:0;transform:scale(.94);}64%,96%{opacity:1;transform:none;}100%{opacity:0;}}
.gd-fanwrap{position:relative;width:40px;height:40px;flex:none;}
.gd-fanp{position:absolute;width:26px;height:38px;border-radius:5px;left:7px;top:1px;box-shadow:var(--shadow);}
.gd-fanp.fa{background:linear-gradient(160deg,#2b1f18,#6d4a2f);animation:gdFanA 7.5s infinite;}
.gd-fanp.fb{background:linear-gradient(160deg,#241a14,#8a5c33);animation:gdFanB 7.5s infinite;}
@keyframes gdFanA{0%,62%{transform:none;}70%,100%{transform:translateX(-6px) rotate(-8deg);}}
@keyframes gdFanB{0%,62%{transform:none;}70%,100%{transform:translateX(6px) rotate(8deg);}}
.gd-finger.f3{left:96px;top:73px;animation:gdF3 7.5s var(--ease) infinite;}
.gd-finger.f3::after{content:"";position:absolute;inset:-4px;border:2px solid var(--accent);
  border-radius:50%;opacity:0;transform:scale(.7);animation:gdF3Ring 7.5s infinite;}
@keyframes gdF3{0%,8%{opacity:0;transform:none;}
  12%,20%{opacity:.85;transform:none;}
  22%{opacity:.85;transform:translateY(-2px);}
  26%{opacity:.85;transform:translateY(-6px);}
  44%,50%{opacity:.85;transform:translateY(-60px);}
  56%,100%{opacity:0;transform:translateY(-60px);}}
@keyframes gdF3Ring{0%,12%{opacity:0;transform:scale(.7);}
  16%{opacity:.9;transform:scale(1);}
  22%,100%{opacity:0;transform:scale(1.5);}}

/* scena 4: tap su "Cosa guardo stasera?" e i consigli sbucano col Match */
.gd4{display:flex;flex-direction:column;align-items:center;gap:16px;}
.gd-cta{border:none;background:var(--primary-bg);color:var(--primary-fg);font-size:12.5px;font-weight:600;
  padding:9px 16px;border-radius:11px;pointer-events:none;animation:gdCta 6s infinite;}
@keyframes gdCta{0%,16%{transform:none;}20%{transform:scale(.95);}24%,100%{transform:none;}}
.gd-recs{display:flex;gap:12px;}
.gd-rec{position:relative;}
.gd-rec .gd-poster{width:44px;height:64px;border-radius:8px;box-shadow:var(--shadow);}
.gd-match{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;
  font-size:8.5px;font-weight:700;border-radius:999px;padding:1.5px 6px;white-space:nowrap;}
.gd-rec.r1{animation:gdRec1 6s var(--ease) infinite;}
.gd-rec.r2{animation:gdRec2 6s var(--ease) infinite;}
.gd-rec.r3{animation:gdRec3 6s var(--ease) infinite;}
@keyframes gdRec1{0%,26%{opacity:0;transform:translateY(10px) scale(.9);}34%,96%{opacity:1;transform:none;}100%{opacity:0;}}
@keyframes gdRec2{0%,32%{opacity:0;transform:translateY(10px) scale(.9);}40%,96%{opacity:1;transform:none;}100%{opacity:0;}}
@keyframes gdRec3{0%,38%{opacity:0;transform:translateY(10px) scale(.9);}46%,96%{opacity:1;transform:none;}100%{opacity:0;}}
.gd-finger.f4{top:0;left:50%;margin-left:26px;animation:gdF4 6s infinite;}
@keyframes gdF4{0%,10%{opacity:0;transform:none;}15%{opacity:.85;transform:none;}
  20%{opacity:.85;transform:scale(.8);}26%,100%{opacity:0;transform:none;}}

/* Gruppi manuali: long-press stile springboard — la riga si stacca, le altre
   ballicchiano, il bersaglio sotto il dito si evidenzia */
#list .card{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
@keyframes wiggle{from{transform:rotate(-.55deg);}to{transform:rotate(.55deg);}}
.wiggling .swipe{animation:wiggle .28s infinite alternate ease-in-out;}
.wiggling .swipe:nth-child(2n){animation-duration:.33s;animation-delay:-.14s;}
.wiggling .swipe.drag-src{animation:none;}
.drag-src{position:relative;z-index:60;pointer-events:none;}
.drag-src .card{box-shadow:0 14px 34px rgba(0,0,0,.32);}
.card.drag-over{box-shadow:0 0 0 2.5px var(--accent);transform:scale(.97);transition:transform .15s ease;}

/* Dialogo nome gruppo (riusa la card delle Novità) */
.dialog-input{width:100%;border:none;outline:none;background:var(--field);border-radius:10px;
  padding:11px 12px;font-size:15px;color:var(--text);margin:2px 0 14px;}
.dialog-input::placeholder{color:var(--text-3);}
.dialog-btns{display:flex;gap:10px;}
.dialog-btns button{flex:1;border:none;border-radius:11px;padding:12px;font-size:15px;font-weight:600;}
.db-cancel{background:var(--field);color:var(--text);}
.db-create{background:var(--primary-bg);color:var(--primary-fg);}
.menu-ver{font-size:11px;color:var(--text-3);text-align:center;margin:2px 0 6px;}
.group-dissolve{align-self:center;width:auto;background:var(--surface);border:none;border-radius:999px;
  color:var(--danger);font-size:12.5px;font-weight:600;padding:7px 14px;box-shadow:var(--shadow);margin-top:2px;}
.group-dissolve:active{opacity:.6;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
  .saga-sub.anim > *,.wiggling .swipe,.onb-art *{animation:none !important;}
}