/* =====================================================================
   Quaderno delle canzoni - aspetto
   ---------------------------------------------------------------------
   Caratteri:  Bricolage Grotesque (titoli), Plus Jakarta Sans (testo e
               comandi), Space Grotesk (accordi), Caveat (appunti a mano).
   Colori:     sfumatura corallo -> magenta -> viola; ogni accordo ha il
               suo colore, uno per semitono sull'arcobaleno (--h, messo dal
               JS), cosi' lo stesso accordo e' sempre dello stesso colore.
   Movimento:  macchie di colore che vagano sullo sfondo, schede che
               entrano in fila, un'onda quando suona un accordo. Tutto si
               ferma con "riduci movimento".
   Il foglio della canzone resta un quaderno: fori ad anelli e margine.
   ===================================================================== */
:root {
  --sfondo: #fff8f3;
  --carta-2: #f7eee7;
  --foglio: #ffffff;
  --vetro: rgba(255, 249, 245, .74);
  --bordo: #f0e4da;
  --bordo-forte: #dfcfc2;
  --inchiostro: #1d1530;
  --tenue: #6e6581;
  --accento: #d9578e;
  --nota: #6262d6;
  --rigo: #a59bb5;
  --margine: rgba(233, 114, 156, .32);
  --foro: #f7eee7;
  --appunto: #fff3ad;
  --appunto-2: #ffeb8a;
  --appunto-txt: #4a3500;
  --evid: rgba(233, 114, 156, .13);
  --primario: #1d1530;
  --primario-txt: #ffffff;
  --ok: #0f9d6c;
  --male: #e11d48;
  /* gli accordi: saturazione e luminosita' del testo, dei fondi, del bordo */
  --acc-s: 48%; --acc-tl: 40%; --acc-sf: 62%; --acc-bl: 95.5%; --acc-bl2: 92.5%; --acc-sb: 45%; --acc-brl: 84%;
  --acc-ps: 52%; --acc-pl: 62%;
  --aurora: .13;
  --grad: linear-gradient(120deg, #f5916c 0%, #e9729c 48%, #a08cec 100%);
  --grad-v: linear-gradient(180deg, #f5916c, #e9729c 50%, #a08cec);
  --grad-tenue: linear-gradient(120deg, rgba(245, 145, 108, .09), rgba(233, 114, 156, .07) 50%, rgba(160, 140, 236, .08));
  --ombra-1: 0 1px 2px rgba(45, 20, 60, .06);
  --ombra: 0 1px 2px rgba(45, 20, 60, .05), 0 14px 34px -14px rgba(90, 30, 100, .22);
  --ombra-forte: 0 8px 20px rgba(45, 20, 60, .10), 0 34px 70px -18px rgba(90, 30, 100, .34);
  --ff-titolo: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --ff: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-accordi: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-mano: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --ff-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
  --scala: 1;
  --testata: 62px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sfondo: #0e0b1c; --carta-2: #1b1630; --foglio: #151127; --vetro: rgba(14, 11, 28, .72);
    --bordo: #2a2342; --bordo-forte: #3e3463; --inchiostro: #f2eeff; --tenue: #a89fc4;
    --accento: #ff5c9d; --nota: #a5b4fc; --rigo: #625a80; --margine: rgba(255, 92, 157, .28); --foro: #0e0b1c;
    --appunto: #4d4524; --appunto-2: #574e29; --appunto-txt: #ffef9a; --evid: rgba(255, 92, 157, .2);
    --primario: #f2eeff; --primario-txt: #0e0b1c; --ok: #34d399; --male: #fb7185;
    --acc-s: 62%; --acc-tl: 80%; --acc-sf: 28%; --acc-bl: 21%; --acc-bl2: 17%; --acc-sb: 30%; --acc-brl: 36%;
    --acc-ps: 42%; --acc-pl: 52%;
    --aurora: .2;
    --grad-tenue: linear-gradient(120deg, rgba(245, 145, 108, .12), rgba(233, 114, 156, .10) 50%, rgba(160, 140, 236, .14));
    --ombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -14px rgba(0, 0, 0, .7);
    --ombra-forte: 0 10px 24px rgba(0, 0, 0, .45), 0 34px 80px -14px rgba(0, 0, 0, .75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sfondo: #0e0b1c; --carta-2: #1b1630; --foglio: #151127; --vetro: rgba(14, 11, 28, .72);
  --bordo: #2a2342; --bordo-forte: #3e3463; --inchiostro: #f2eeff; --tenue: #a89fc4;
  --accento: #ff5c9d; --nota: #a5b4fc; --rigo: #625a80; --margine: rgba(255, 92, 157, .28); --foro: #0e0b1c;
  --appunto: #4d4524; --appunto-2: #574e29; --appunto-txt: #ffef9a; --evid: rgba(255, 92, 157, .2);
  --primario: #f2eeff; --primario-txt: #0e0b1c; --ok: #34d399; --male: #fb7185;
  --acc-s: 62%; --acc-tl: 80%; --acc-sf: 28%; --acc-bl: 21%; --acc-bl2: 17%; --acc-sb: 30%; --acc-brl: 36%;
  --acc-ps: 42%; --acc-pl: 52%;
  --aurora: .2;
  --grad-tenue: linear-gradient(120deg, rgba(245, 145, 108, .12), rgba(233, 114, 156, .10) 50%, rgba(160, 140, 236, .14));
  --ombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -14px rgba(0, 0, 0, .7);
  --ombra-forte: 0 10px 24px rgba(0, 0, 0, .45), 0 34px 80px -14px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 150px; }
body {
  margin: 0; min-height: 100vh; color: var(--inchiostro); background: var(--sfondo);
  font: 450 16px/1.55 var(--ff);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
a, button, label, summary, .acc, .nt, .sil, .scheda-accordo, .tasto { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: rgba(233, 114, 156, .22); }

/* ---------- lo sfondo che si muove ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
@media (max-width: 720px) { .aurora span:nth-child(4) { display: none; } .aurora span { animation-duration: 60s; } }
.aurora span {
  position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; opacity: var(--aurora);
  will-change: transform; animation: vaga 30s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { background: radial-gradient(circle, #f8a888 0, transparent 64%); top: -28vmax; right: -18vmax; }
.aurora span:nth-child(2) { background: radial-gradient(circle, #e9729c 0, transparent 64%); top: 28vh; left: -32vmax; animation-duration: 36s; animation-delay: -9s; }
.aurora span:nth-child(3) { background: radial-gradient(circle, #a08cec 0, transparent 64%); bottom: -38vmax; right: 6vw; animation-duration: 42s; animation-delay: -17s; }
.aurora span:nth-child(4) { background: radial-gradient(circle, #7fd3ca 0, transparent 62%); top: 8vh; left: 30vw; width: 44vmax; height: 44vmax; opacity: calc(var(--aurora) * .55); animation-duration: 48s; animation-delay: -5s; }
@keyframes vaga {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(7vmax, 5vmax) scale(1.14); }
  100% { transform: translate(-6vmax, 9vmax) scale(.94); }
}

/* ---------- testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: var(--testata); padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  background: var(--vetro);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--bordo);
}
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marchio span {
  font: 800 24px/1 var(--ff-titolo); letter-spacing: -.6px;
  background: linear-gradient(90deg, #ef8460, #df6694 55%, #9a82e6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes scorri-colore { to { background-position: 300% 0; } }
.marchio img { border-radius: 10px; box-shadow: 0 6px 14px -6px rgba(233, 114, 156, .6); transition: transform .3s; }
.marchio:hover img { transform: rotate(-8deg) scale(1.06); }
.testata-destra { display: flex; align-items: center; gap: 6px; }
.nav-link { text-decoration: none; font-weight: 650; color: var(--tenue); padding: 8px 12px; border-radius: 11px; transition: background .15s, color .15s; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--inchiostro); background: var(--carta-2); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-left: 4px;
  background: var(--grad); color: #fff; font: 800 17px/1 var(--ff-titolo); text-decoration: none;
  box-shadow: 0 6px 16px -6px rgba(233, 114, 156, .7); transition: transform .2s;
}
.avatar:hover { transform: scale(1.07) rotate(4deg); }
@media (max-width: 640px) { :root { --testata: 56px; } .nav-link, .testata .btn-nuova { display: none; } }

.vista { max-width: 1240px; margin: 0 auto; padding: 30px 24px 140px; outline: none; }
.vista > * { animation: appare .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes appare { from { opacity: 0; transform: translateY(10px); } }
.caricamento { display: flex; align-items: center; gap: 12px; color: var(--tenue); padding: 70px 0; justify-content: center; font-weight: 600; }
.equalizzatore { display: inline-flex; gap: 3px; align-items: flex-end; height: 20px; }
.equalizzatore i { width: 4px; height: 30%; border-radius: 2px; background: var(--grad-v); animation: eq .9s ease-in-out infinite; }
.equalizzatore i:nth-child(2) { animation-delay: -.3s; }
.equalizzatore i:nth-child(3) { animation-delay: -.6s; }
.equalizzatore i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* ---------- pulsanti e campi ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: 13px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--bordo-forte); background: var(--foglio); font-weight: 700; white-space: nowrap;
  box-shadow: var(--ombra-1); overflow: hidden;
  transition: background .2s, border-color .2s, transform .12s, box-shadow .2s, filter .2s;
}
.btn:hover { border-color: var(--tenue); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.primario { background: var(--primario); color: var(--primario-txt); border-color: transparent; }
.btn.accento {
  text-shadow: 0 1px 2px rgba(80, 20, 50, .25);
  background: var(--grad); background-size: 170% 170%; background-position: 0 50%; color: #fff; border-color: transparent;
  box-shadow: 0 10px 24px -10px rgba(233, 114, 156, .75);
}
.btn.accento:hover { background-position: 100% 50%; box-shadow: 0 14px 30px -10px rgba(160, 140, 236, .7); }
.btn.accento::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .8s;
}
.btn.accento:hover::after { transform: translateX(130%); }
.btn.leggero { background: transparent; border-color: transparent; box-shadow: none; }
.btn.leggero:hover { background: var(--carta-2); }
.btn.pericolo { color: var(--male); }
.btn.pericolo.pieno { background: var(--male); color: #fff; border-color: var(--male); }
.btn.piccolo { min-height: 34px; padding: 0 12px; font-size: 14px; border-radius: 11px; }
.icona { width: 42px; padding: 0; }
.btn.piccolo.icona { width: 34px; }
.btn[aria-pressed="true"] { background: var(--inchiostro); color: var(--sfondo); border-color: var(--inchiostro); }
:focus-visible { outline: 2.5px solid #e9729c; outline-offset: 2px; }

.campo { display: grid; gap: 6px; }
.campo > span { font: 700 11.5px/1.2 var(--ff-accordi); color: var(--tenue); text-transform: uppercase; letter-spacing: .1em; }
.input, .area {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 13px;
  border: 1.5px solid var(--bordo); background: var(--foglio);
  transition: border-color .2s, box-shadow .2s;
}
.input:hover, .area:hover { border-color: var(--bordo-forte); }
.input:focus, .area:focus { outline: none; border-color: #e9729c; box-shadow: 0 0 0 4px rgba(233, 114, 156, .14), 0 8px 20px -12px rgba(160, 140, 236, .5); }
.area { min-height: 160px; resize: vertical; line-height: 1.6; }
.area.mono { font-family: var(--ff-mono); font-size: 14px; line-height: 1.65; tab-size: 4; }
.errore { color: var(--male); font-weight: 650; margin: 0; }
.nota-piccola { color: var(--tenue); font-size: 14px; margin: 0; }
.riga-pulsanti { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.spazio { flex: 1; }

.segmenti, .schede {
  display: inline-flex; gap: 3px; padding: 4px; border-radius: 14px;
  background: var(--carta-2); border: 1px solid var(--bordo);
}
.schede button, .seg-btn {
  min-height: 34px; padding: 0 14px; white-space: nowrap; border: 0; border-radius: 10px; background: transparent;
  font-weight: 700; font-size: 14.5px; cursor: pointer; color: var(--tenue); transition: background .2s, color .2s, box-shadow .2s;
}
.schede button:hover, .seg-btn:hover { color: var(--inchiostro); }
.schede button[aria-selected="true"], .seg-btn[aria-pressed="true"] {
  background: var(--foglio); color: var(--inchiostro); box-shadow: var(--ombra-1), 0 0 0 1px var(--bordo), inset 0 -2px 0 #e9729c;
}
.spunta { display: flex; gap: 10px; align-items: center; font-size: 15px; cursor: pointer; }
.spunta input { width: 19px; height: 19px; accent-color: #e9729c; }

/* ---------- accesso ---------- */
.accesso {
  display: grid; grid-template-columns: 1.05fr 1fr; max-width: 1020px; margin: 3vh auto 0;
  background: var(--foglio); border: 1px solid var(--bordo); border-radius: 30px; overflow: hidden; box-shadow: var(--ombra-forte);
}
.accesso-arte {
  position: relative; padding: 42px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 560px; overflow: hidden;
  background: linear-gradient(135deg, #f5916c, #e9729c 38%, #a08cec 72%, #7ea6ef);
  background-size: 240% 240%; animation: onda-colore 16s ease-in-out infinite alternate;
}
@keyframes onda-colore { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.accesso-arte::before {
  content: ''; position: absolute; width: 420px; height: 420px; right: -160px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 62%); animation: vaga 18s ease-in-out infinite alternate;
}
.accesso-arte > * { position: relative; }
.accesso-arte h2 { font: 800 clamp(32px, 3.6vw, 46px)/1 var(--ff-titolo); margin: 0; letter-spacing: -1.2px; }
.accesso-arte p { margin: 12px 0 0; font-size: 17px; opacity: .92; max-width: 350px; }
.accesso-arte svg { width: 100%; height: auto; overflow: visible; }
.accesso-arte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-weight: 650; }
.accesso-arte li { display: flex; gap: 10px; align-items: center; animation: appare .5s both; }
.accesso-arte li:nth-child(2) { animation-delay: .08s; }
.accesso-arte li:nth-child(3) { animation-delay: .16s; }
.accesso-arte li:nth-child(4) { animation-delay: .24s; }
.accesso-arte li::before { content: '♪'; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); font-size: 12px; flex: none; }
.fluttua { animation: fluttua 3.4s ease-in-out infinite alternate; }
@keyframes fluttua { from { transform: translateY(3px); } to { transform: translateY(-6px); } }
.brilla { animation: brilla 3.2s ease-in-out infinite; }
@keyframes brilla { 0%, 100% { opacity: .85; } 50% { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .7)); } }
.disegna-righe line { stroke-dasharray: 360; stroke-dashoffset: 360; animation: traccia 1.6s cubic-bezier(.4, 0, .2, 1) forwards; }
.disegna-righe line:nth-child(2) { animation-delay: .1s; }
.disegna-righe line:nth-child(3) { animation-delay: .2s; }
.disegna-righe line:nth-child(4) { animation-delay: .3s; }
.disegna-righe line:nth-child(5) { animation-delay: .4s; }
@keyframes traccia { to { stroke-dashoffset: 0; } }
.accesso-modulo { padding: 46px 42px; display: grid; align-content: center; gap: 18px; }
.accesso-modulo h1 { font: 800 38px/1.05 var(--ff-titolo); margin: 0; letter-spacing: -1px; }
.accesso-modulo .sotto { color: var(--tenue); margin: -8px 0 4px; }
.scheda-modulo { display: grid; gap: 14px; }
.scheda-modulo .schede { display: flex; }
.scheda-modulo .schede button { flex: 1; }
@media (max-width: 820px) {
  .accesso { grid-template-columns: 1fr; border-radius: 24px; }
  .accesso-arte { min-height: 0; padding: 28px; }
  .accesso-arte svg, .accesso-arte ul { display: none; }
  .accesso-modulo { padding: 28px 22px 30px; }
}

/* ---------- elenco ---------- */
.intestazione { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 24px; }
.intestazione h1 { font: 800 clamp(36px, 6vw, 58px)/.95 var(--ff-titolo); margin: 0; letter-spacing: -1.8px; }
.intestazione h1::after { content: '.'; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intestazione .conta { color: var(--tenue); margin: 10px 0 0; font-size: 15.5px; font-weight: 600; }
.filtri { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.cerca { position: relative; flex: 1 1 280px; }
.cerca .svg { position: absolute; left: 16px; top: 15px; color: var(--tenue); }
.cerca .input { padding-left: 48px; min-height: 52px; border-radius: 16px; font-size: 16px; box-shadow: var(--ombra-1); }
.filtri select { flex: 0 0 auto; width: auto; min-height: 52px; border-radius: 16px; font-weight: 600; }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }
.scheda {
  --tinta: 330;
  display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 14px; border-radius: 22px; text-decoration: none;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--foglio), var(--foglio)) padding-box, linear-gradient(var(--bordo), var(--bordo)) border-box;
  box-shadow: var(--ombra-1);
  animation: sale .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms);
  transition: box-shadow .25s, transform .25s;
}
.scheda:hover {
  background: linear-gradient(var(--foglio), var(--foglio)) padding-box, linear-gradient(120deg, hsl(var(--tinta) 60% 66%), #e9729c, #a08cec) border-box;
  transform: translateY(-4px); box-shadow: 0 22px 44px -20px hsl(var(--tinta) 50% 45% / .4);
}
@keyframes sale { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.scheda-corpo { min-width: 0; }
.scheda h2 { font: 750 20px/1.15 var(--ff-titolo); margin: 0; overflow-wrap: anywhere; letter-spacing: -.4px; }
.scheda .chi { color: var(--tenue); font-size: 14.5px; font-weight: 650; margin-top: 2px; }
.scheda .prima { color: var(--tenue); font-size: 14px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.scheda .info { display: flex; gap: 8px; font-size: 12.5px; color: var(--tenue); margin-top: 7px; align-items: center; flex-wrap: wrap; font-weight: 600; }
.etichetta-mini { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; background: var(--carta-2); font-weight: 700; }
.etichetta-mini.verde { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.etichetta-mini .svg { width: 12px; height: 12px; }

.copertina {
  --tinta: 330;
  width: 80px; height: 80px; border-radius: 18px; display: grid; place-items: center; color: #fff; position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 120% at 0% 0%, hsl(var(--tinta) 80% 80%), transparent 55%),
    linear-gradient(135deg, hsl(var(--tinta) 62% 66%), hsl(calc(var(--tinta) + 45) 55% 62%) 55%, hsl(calc(var(--tinta) + 90) 48% 56%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 22px -10px hsl(var(--tinta) 50% 40% / .45);
}
/* i solchi di un disco, nell'angolo */
.copertina::before {
  content: ''; position: absolute; width: 150%; height: 150%; right: -85%; bottom: -85%; border-radius: 50%; z-index: -1;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .16) 0 1.5px, transparent 1.5px 6px);
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.copertina::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .9s;
}
.scheda:hover .copertina::before { transform: rotate(140deg) scale(1.1); }
.scheda:hover .copertina::after { transform: translateX(120%); }
.copertina .cop-ton { font: 800 25px/1 var(--ff-accordi); letter-spacing: -.5px; text-shadow: 0 2px 6px rgba(0, 0, 0, .22); }
.copertina .svg { width: 32px; height: 32px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2)); }
.copertina.grande { width: 120px; height: 120px; border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 26px 50px -18px hsl(var(--tinta) 55% 45% / .5); animation: galleggia 6s ease-in-out infinite alternate; }
.copertina.grande .cop-ton { font-size: 38px; }
.copertina.grande .svg { width: 48px; height: 48px; }
@keyframes galleggia { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-6px) rotate(1.5deg); } }

.vuoto-elenco {
  text-align: center; padding: 64px 24px; border-radius: 28px; color: var(--tenue);
  background: var(--grad-tenue), var(--foglio); border: 1.5px dashed var(--bordo-forte);
}
.vuoto-elenco svg.arte { width: 190px; height: auto; margin-bottom: 8px; animation: fluttua 3.6s ease-in-out infinite alternate; }
.vuoto-elenco h2 { font: 800 30px/1.1 var(--ff-titolo); color: var(--inchiostro); margin: 0 0 10px; letter-spacing: -.6px; }
.vuoto-elenco p { margin: 0 auto 22px; max-width: 470px; font-size: 16.5px; }

/* ---------- la canzone ---------- */
.canzone { --tinta: 330; position: relative; max-width: 1240px; margin: 0 auto; }
.alone {
  position: absolute; z-index: -1; top: -140px; left: -12%; width: 75%; height: 480px; pointer-events: none;
  background: radial-gradient(closest-side, hsl(var(--tinta) 65% 72% / .26), transparent);
  animation: respira 9s ease-in-out infinite alternate;
}
@keyframes respira { from { transform: scale(1); opacity: .8; } to { transform: scale(1.12) translateX(4%); opacity: 1; } }
.progresso { position: fixed; top: var(--testata); left: 0; right: 0; height: 3px; z-index: 31; pointer-events: none; }
.progresso i { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px rgba(233, 114, 156, .6); }
.indietro { display: inline-flex; align-items: center; gap: 4px; color: var(--tenue); text-decoration: none; font-weight: 700; font-size: 15px; margin-bottom: 16px; padding: 5px 10px 5px 4px; border-radius: 10px; transition: background .15s, color .15s; }
.indietro:hover { color: var(--inchiostro); background: var(--carta-2); }
.testa-canzone { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.testa-canzone h1 {
  font: 800 clamp(32px, 5.6vw, 60px)/.98 var(--ff-titolo); margin: 0; letter-spacing: -2px; overflow-wrap: anywhere;
  background: linear-gradient(100deg, var(--inchiostro) 35%, hsl(var(--tinta) 48% 56%) 75%, hsl(calc(var(--tinta) + 50) 45% 60%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em;
}
.testa-canzone .artista { color: var(--tenue); font-size: 19px; font-weight: 650; margin: 6px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--vetro); border: 1px solid var(--bordo); font-size: 13.5px; font-weight: 650; color: var(--tenue); }
.chip b { font-family: var(--ff-accordi); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.chip .svg { width: 15px; height: 15px; }
.chip.condivisa { color: var(--ok); }
@media (max-width: 720px) {
  .testa-canzone { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; }
  .testa-canzone .copertina.grande { width: 76px; height: 76px; border-radius: 18px; }
  .testa-canzone .copertina.grande .cop-ton { font-size: 25px; }
  .testa-canzone .copertina.grande .svg { width: 32px; height: 32px; }
  .testa-canzone .azioni { grid-column: 1 / -1; }
}

.azioni { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.azioni .riga-pulsanti { flex-wrap: nowrap; }
.btn.sborrify {
  gap: 9px; padding-left: 10px; border: 1.5px solid transparent;
  background: linear-gradient(var(--foglio), var(--foglio)) padding-box, linear-gradient(120deg, #b49cf0, #ef9cc2, #f4c58a) border-box;
}
.btn.sborrify:hover { box-shadow: 0 12px 26px -12px rgba(160, 120, 230, .6); }
.btn.sborrify img { border-radius: 7px; box-shadow: 0 3px 8px -3px rgba(139, 92, 246, .55); transition: transform .3s; }
.btn.sborrify:hover img { transform: rotate(-8deg) scale(1.08); }

/* la barra dei comandi: in alto sul computer, in basso come un leggio sul telefono */
.barra {
  position: sticky; top: calc(var(--testata) + 12px); z-index: 20; margin: 24px 0 0; padding: 7px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: var(--vetro); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border: 1px solid var(--bordo); border-radius: 20px; box-shadow: var(--ombra);
}
.gruppo { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 14px; background: var(--carta-2); flex: none; }
.gruppo .btn { min-height: 34px; border-color: transparent; background: transparent; box-shadow: none; padding: 0 10px; font-size: 14px; border-radius: 11px; }
.gruppo .btn:hover { background: var(--foglio); transform: none; }
.gruppo .btn.icona { width: 34px; padding: 0; }
.gruppo .btn[aria-pressed="true"] { background: var(--grad); color: #fff; box-shadow: 0 6px 14px -8px rgba(233, 114, 156, .9); }
.gruppo .btn.play[aria-pressed="true"] { animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(233, 114, 156, .55); } 50% { box-shadow: 0 0 0 7px rgba(233, 114, 156, 0); } }
.gruppo .etich { font: 700 10.5px/1 var(--ff-accordi); color: var(--tenue); padding: 0 6px 0 9px; text-transform: uppercase; letter-spacing: .12em; }
.gruppo .valore { min-width: 30px; text-align: center; font: 700 14.5px/1 var(--ff-accordi); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .barra {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; margin: 0; z-index: 35;
    border-radius: 22px 22px 0 0; border-bottom: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding: 9px 12px max(10px, env(safe-area-inset-bottom));
    background: var(--foglio); backdrop-filter: none; -webkit-backdrop-filter: none; overscroll-behavior-x: contain;
  }
  .barra::-webkit-scrollbar { display: none; }
}

.lettura { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 26px; align-items: start; margin-top: 24px; }
.lettura > .principale { min-width: 0; }
@media (max-width: 1040px) { .lettura { grid-template-columns: minmax(0, 1fr); } .lettura > .pannello-accordi { order: -1; } }

.appunti-generali {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 14px 20px; border-radius: 18px;
  background: linear-gradient(120deg, var(--appunto), var(--appunto-2)); color: var(--appunto-txt);
  white-space: pre-wrap; font: 600 1.45rem/1.25 var(--ff-mano); box-shadow: var(--ombra-1); transform: rotate(-.4deg);
}
.appunti-generali .svg { flex: none; margin-top: 4px; }

.foglio {
  position: relative;
  padding: 32px clamp(18px, 4vw, 48px) 40px;
  background: linear-gradient(90deg, #f5916c, #e9729c, #a08cec) top / 100% 5px no-repeat, var(--foglio);
  border: 1px solid var(--bordo); border-radius: 24px; box-shadow: var(--ombra);
  font-size: calc(19px * var(--scala)); line-height: 1.38;
}
@media (min-width: 721px) {
  /* il quaderno: fori ad anelli e margine */
  .foglio { padding-left: 88px; }
  .foglio::before {
    content: ''; position: absolute; top: 22px; bottom: 18px; left: 18px; width: 16px; pointer-events: none;
    background: radial-gradient(circle at 8px 8px, var(--foro) 5.5px, var(--bordo-forte) 6px, transparent 6.8px) 0 0 / 16px 40px repeat-y;
  }
  .foglio::after { content: ''; position: absolute; top: 5px; bottom: 0; left: 62px; pointer-events: none; border-left: 1.5px solid var(--margine); box-shadow: 3px 0 0 -1.5px var(--margine); }
}
.vuoto-canzone { color: var(--tenue); font-style: italic; margin: 0; font-size: 16px; }

/* le righe */
.riga { display: flex; flex-wrap: wrap; align-items: flex-end; margin: 0 0 .1em; min-height: 1.38em; }
.riga.con-accordi { margin-top: .4em; }
.pz { display: flex; align-items: flex-end; white-space: pre; }
.seg { display: flex; flex-direction: column; }
.txt { white-space: pre; }
.acc {
  align-self: flex-start;
  font: 700 .74em/1.6 var(--ff-accordi); letter-spacing: .01em; min-height: 1.6em;
  white-space: pre; border-radius: 8px; margin: 0 .32em .2em 0; padding: 0 .42em;
  cursor: pointer; transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.acc:not(.vuoto) {
  --h: 330;
  color: hsl(var(--h) var(--acc-s) var(--acc-tl));
  background: linear-gradient(135deg, hsl(var(--h) var(--acc-sf) var(--acc-bl)), hsl(calc(var(--h) + 30) var(--acc-sf) var(--acc-bl2)));
  box-shadow: inset 0 0 0 1px hsl(var(--h) var(--acc-sb) var(--acc-brl));
}
.acc.vuoto { background: none; box-shadow: none; padding: 0; margin-right: 0; cursor: default; }
.acc:not(.vuoto):hover {
  color: #fff; transform: translateY(-2px);
  background: linear-gradient(135deg, hsl(var(--h) var(--acc-ps) var(--acc-pl)), hsl(calc(var(--h) + 30) var(--acc-ps) calc(var(--acc-pl) - 4%)));
  box-shadow: 0 8px 16px -8px hsl(var(--h) var(--acc-ps) 45% / .45);
}
.acc.suona { animation: suona .8s ease-out; }
@keyframes suona {
  0% { transform: scale(1.3); color: #fff; background: hsl(var(--h) var(--acc-ps) var(--acc-pl)); box-shadow: 0 0 0 0 hsl(var(--h) var(--acc-ps) var(--acc-pl) / .55); }
  100% { box-shadow: 0 0 0 16px hsl(var(--h) var(--acc-ps) var(--acc-pl) / 0); }
}
.nt { font: italic 650 .72em/1.35 var(--ff); min-height: 1.35em; color: var(--nota); padding-right: .45em; white-space: pre; cursor: pointer; }
.nt.vuoto { padding-right: 0; cursor: default; }
.riga.solo-accordi .txt { height: 0; overflow: hidden; }
.riga.solo-accordi .acc { margin-bottom: .05em; }
.riga.etichetta .txt { font-weight: 800; }

/* la melodia sul pentagramma */
.riga.rigo .nt {
  height: 60px; min-height: 60px; padding: 0; font-style: normal; position: relative; font-size: 0;
  background-image: repeating-linear-gradient(to bottom, var(--rigo) 0, var(--rigo) 1px, transparent 1px, transparent 8px);
  background-size: 100% 33px; background-position: 0 14px; background-repeat: no-repeat;
}
.riga.rigo .nt svg { display: block; overflow: visible; }
.riga.rigo .seg.chiave .nt { font-size: 46px; line-height: 58px; color: var(--tenue); padding: 0 4px 0 2px; overflow: visible; }
.riga.rigo .seg.chiave .txt { font-size: 1em; }
.testa { fill: var(--nota); }
.taglio { stroke: var(--rigo); stroke-width: 1; }
.alt { fill: var(--nota); font: 600 13px/1 var(--ff); }

.stacco { height: 1.1em; }
.sez { --g1: #7ea6ef; --g2: #7fd3ca; margin: .5em 0 1.05em; }
.sez-verse { --g1: #7ea6ef; --g2: #7fd3ca; }
.sez-chorus { --g1: #f5916c; --g2: #e9729c; }
.sez-bridge { --g1: #a08cec; --g2: #d08ae6; }
.sez-part { --g1: #6cc9a6; --g2: #a9d46b; }
.sez-tab, .sez-grid { --g1: #64748b; --g2: #94a3b8; }
.sez-nome { display: flex; align-items: center; gap: 12px; margin: 0 0 .65em; font: 700 11px/1 var(--ff-accordi); text-transform: uppercase; letter-spacing: .14em; }
.sez-badge {
  padding: .5em .95em; border-radius: 99px;
  color: color-mix(in srgb, var(--g1) 70%, var(--inchiostro));
  background: linear-gradient(120deg, color-mix(in srgb, var(--g1) 17%, var(--foglio)), color-mix(in srgb, var(--g2) 17%, var(--foglio)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g1) 30%, transparent);
}
.sez-nome::after { content: ''; flex: 1; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--g1) 45%, transparent), transparent); }
.sez-chorus {
  position: relative; padding: .9em 1.1em 1em 1.35em; border-radius: 8px 22px 22px 8px;
  background: linear-gradient(120deg, rgba(245, 145, 108, .08), rgba(233, 114, 156, .06) 50%, rgba(160, 140, 236, .06));
}
.sez-chorus::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: var(--grad-v); }
.sez-bridge { position: relative; padding-left: 1.1em; }
.sez-bridge::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-left: 2.5px dashed #b8a6f2; }
.richiamo { display: inline-flex; gap: 6px; align-items: center; font: 700 .78em/1 var(--ff-accordi); color: color-mix(in srgb, #e9729c 70%, var(--inchiostro)); margin: .35em 0 .75em; padding: .55em .95em; border-radius: 99px; background: linear-gradient(120deg, color-mix(in srgb, #f5916c 17%, var(--foglio)), color-mix(in srgb, #e9729c 17%, var(--foglio))); box-shadow: inset 0 0 0 1px color-mix(in srgb, #e9729c 30%, transparent); }
.tab { font-family: var(--ff-mono); font-size: .76em; line-height: 1.4; overflow-x: auto; margin: 0; padding: .7em .9em; border-radius: 12px; background: var(--carta-2); }
/* appunti: scritti a mano e passati col pennarello */
.appunto {
  display: table; margin: .15em 0 .55em; padding: .02em .55em .08em;
  font: 650 1.12em/1.25 var(--ff-mano); color: var(--appunto-txt);
  background: linear-gradient(104deg, transparent .8%, var(--appunto) 2.6%, var(--appunto-2) 6%, var(--appunto) 93%, transparent 97%);
  border-radius: .6em .3em; transform: rotate(-.7deg);
}
.appunto.comment_italic { font-style: italic; }
.appunto.comment_box { background: transparent; box-shadow: inset 0 0 0 1.5px var(--appunto-txt); color: var(--inchiostro); }
.solo-testo .acc, .solo-testo .nt { display: none; }
.solo-testo .riga.solo-accordi { display: none; }

/* ---------- il pannello degli accordi ---------- */
.pannello-accordi {
  position: sticky; top: calc(var(--testata) + 92px); max-height: calc(100vh - var(--testata) - 112px); overflow: auto; scrollbar-width: thin;
  background: var(--foglio);
  border: 1px solid var(--bordo); border-radius: 24px; box-shadow: var(--ombra); padding: 16px;
}
.pa-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pa-testa h2 { font: 800 22px/1 var(--ff-titolo); margin: 0; letter-spacing: -.5px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pa-testa .seg-btn { min-height: 30px; padding: 0 10px; font-size: 13px; }
.pa-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pa-griglia .scheda-accordo { animation: sale .45s cubic-bezier(.2, .8, .2, 1) both; }
.pa-griglia .scheda-accordo:nth-child(2) { animation-delay: .04s; }
.pa-griglia .scheda-accordo:nth-child(3) { animation-delay: .08s; }
.pa-griglia .scheda-accordo:nth-child(4) { animation-delay: .12s; }
.pa-griglia .scheda-accordo:nth-child(n+5) { animation-delay: .16s; }
.pa-nota { margin: 12px 0 0; font-size: 12.5px; color: var(--tenue); text-align: center; }
.scheda-accordo {
  --h: 330;
  display: grid; justify-items: center; gap: 3px; padding: 11px 6px 10px; border-radius: 18px; cursor: pointer;
  background: linear-gradient(180deg, hsl(var(--h) var(--acc-sf) var(--acc-bl)) 0%, var(--foglio) 52%);
  border: 1px solid hsl(var(--h) var(--acc-sb) var(--acc-brl) / .8); text-align: center; color: inherit; font: inherit;
  transition: border-color .2s, box-shadow .25s, transform .25s;
}
.scheda-accordo:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px hsl(var(--h) var(--acc-ps) 45% / .4); border-color: hsl(var(--h) var(--acc-ps) var(--acc-pl)); }
.scheda-accordo.attivo { border-color: hsl(var(--h) var(--acc-ps) var(--acc-pl)); box-shadow: 0 0 0 3px hsl(var(--h) var(--acc-ps) var(--acc-pl) / .28), 0 16px 30px -16px hsl(var(--h) var(--acc-ps) 45% / .4); transform: scale(1.03); }
.sa-nome { font: 700 19px/1.15 var(--ff-accordi); color: hsl(var(--h) var(--acc-s) var(--acc-tl)); }
.sa-note { font: 650 12.5px/1.3 var(--ff); }
.sa-gradi { font: 600 11px/1.3 var(--ff-accordi); color: var(--tenue); letter-spacing: .04em; }
.sa-basso { font-size: 11px; color: var(--nota); font-weight: 700; }
.sa-vuoto { font-size: 12px; color: var(--tenue); padding: 20px 6px; }
.scheda-accordo.grande { padding: 18px 14px 16px; gap: 6px; width: 100%; }
.scheda-accordo.grande .sa-nome { font-size: 30px; }
.scheda-accordo.grande .diagramma.chitarra { width: 156px; }
.scheda-accordo.grande .diagramma.piano { width: 236px; }
.scheda-accordo.grande .sa-note { font-size: 15px; }
.scheda-accordo.grande .sa-gradi { font-size: 13px; }
.diagramma { display: block; }
.diagramma.chitarra { width: 96px; height: auto; }
.diagramma.piano { width: 128px; height: auto; margin: 8px 0 4px; }
.d-tasto { stroke: var(--bordo-forte); stroke-width: 1; }
.d-corda { stroke: var(--tenue); stroke-width: 1; opacity: .75; }
.d-capotasto { stroke: var(--inchiostro); stroke-width: 4; stroke-linecap: round; }
.d-base { fill: var(--tenue); font: 700 10px/1 var(--ff-accordi); }
.d-x { fill: var(--tenue); font: 700 11px/1 var(--ff); }
.d-vuota { fill: none; stroke: var(--tenue); stroke-width: 1.5; }
.d-vuota.radice { stroke: hsl(var(--h) var(--acc-ps) var(--acc-pl)); stroke-width: 2.2; }
.d-dito { fill: var(--inchiostro); }
.d-dito.radice { fill: hsl(var(--h) var(--acc-ps) var(--acc-pl)); }
.d-barre { fill: var(--inchiostro); opacity: .88; }
.d-nessuno { fill: var(--tenue); font: 700 20px/1 var(--ff); }
.p-bianco { fill: #fff; stroke: var(--bordo-forte); stroke-width: 1; }
.p-nero { fill: #241d33; }
.p-bianco.acceso { fill: hsl(calc(var(--h) + 30) var(--acc-ps) 76%); }
.p-nero.acceso { fill: hsl(calc(var(--h) + 30) var(--acc-ps) 56%); stroke: #241d33; stroke-width: 1; }
.p-bianco.radice, .p-nero.radice { fill: hsl(var(--h) var(--acc-ps) var(--acc-pl)); }
@media (max-width: 1040px) {
  .pannello-accordi { position: static; max-height: none; padding: 12px; border-radius: 20px; }
  .pa-testa { margin-bottom: 10px; }
  .pa-griglia { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; padding: 4px 2px 6px; }
  .pa-griglia::-webkit-scrollbar { display: none; }
  .pa-griglia .scheda-accordo { flex: 0 0 110px; }
  .pa-griglia .diagramma.chitarra { width: 80px; }
  .pa-griglia .diagramma.piano { width: 96px; }
  .pa-nota { display: none; }
}

/* ---------- modifica ---------- */
.modifica { max-width: 1240px; margin: 0 auto; }
.campi {
  display: grid; gap: 14px; grid-template-columns: 2fr 1.5fr 1fr .9fr .8fr; margin: 4px 0 0;
  padding: 22px; background: var(--foglio); border: 1px solid var(--bordo); border-radius: 24px; box-shadow: var(--ombra);
}
.campi .largo { grid-column: 1 / -1; }
@media (max-width: 860px) { .campi { grid-template-columns: 1fr 1fr; padding: 16px; } .campi .titolo-campo, .campi .artista-campo { grid-column: 1 / -1; } }
.stato-salvataggio { font-size: 13.5px; color: var(--tenue); display: inline-flex; gap: 7px; align-items: center; min-height: 34px; font-weight: 650; }
.stato-salvataggio::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--bordo-forte); }
.stato-salvataggio.male { color: var(--male); }
.stato-salvataggio.male::before { background: var(--male); }
.stato-salvataggio.bene { color: var(--ok); }
.stato-salvataggio.bene::before { background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: salvato 1.2s ease-out; }
@keyframes salvato { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } to { box-shadow: 0 0 0 9px transparent; } }
.barra-modifica {
  position: sticky; top: calc(var(--testata) + 12px); z-index: 20; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 18px 0 0;
  padding: 7px; background: var(--vetro); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--bordo); border-radius: 20px; box-shadow: var(--ombra);
}
.barra-modifica .btn { min-height: 38px; }
@media (max-width: 640px) { .barra-modifica { background: var(--foglio); backdrop-filter: none; -webkit-backdrop-filter: none; } .barra-modifica .stato-salvataggio { order: 5; width: 100%; } }
.suggerimento { margin: 14px 2px 0; color: var(--tenue); font-size: 14.5px; }
.suggerimento kbd { font-family: var(--ff-mono); font-size: 12.5px; background: var(--foglio); border: 1px solid var(--bordo); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--inchiostro); }

.foglio.tocco { line-height: 1.52; }
.foglio.tocco .riga { position: relative; padding-right: 38px; }
.foglio.tocco .sil { cursor: pointer; border-radius: 6px; transition: background .12s, box-shadow .12s; }
.foglio.tocco .sil:hover { background: var(--evid); box-shadow: 0 2px 0 #e9729c; }
.foglio.tocco .sil.scelta, .foglio.tocco .acc.scelta { background: var(--grad); color: #fff; box-shadow: none; }
.foglio.tocco .sil.dopo { color: #e9729c; font-weight: 800; padding: 0 .35em; opacity: .4; }
.foglio.tocco .riga:hover .sil.dopo { opacity: 1; }
.foglio.tocco .appunto, .foglio.tocco .sez-nome { cursor: pointer; }
.foglio.tocco .appunto:hover { filter: saturate(1.4) brightness(1.03); }
.foglio.tocco .sez-nome:hover .sez-badge { filter: brightness(1.1); transform: scale(1.04); }
.sez-badge { transition: filter .15s, transform .15s; display: inline-block; }
.piu-appunto {
  position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; border-radius: 10px; border: 0;
  background: transparent; color: var(--tenue); cursor: pointer; opacity: .2; font-size: 15px; transition: opacity .15s, background .15s, transform .15s;
}
.riga:hover .piu-appunto, .piu-appunto:focus-visible { opacity: 1; background: var(--appunto); color: var(--appunto-txt); transform: rotate(-8deg); }
@media (hover: none) { .piu-appunto { opacity: .55; } .foglio.tocco .sil.dopo { opacity: .75; } }

.testo-doppio { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; align-items: start; }
.testo-doppio .area { min-height: 64vh; border-radius: 22px; padding: 18px; }
.testo-doppio .foglio { position: sticky; top: calc(var(--testata) + 92px); max-height: calc(100vh - var(--testata) - 112px); overflow: auto; }
@media (max-width: 900px) { .testo-doppio { grid-template-columns: 1fr; } .testo-doppio .foglio { position: static; max-height: none; } .testo-doppio .area { min-height: 45vh; } }
.inserisci { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.inserisci .btn { font-family: var(--ff-mono); font-size: 12.5px; font-weight: 600; }

/* il riquadro per accordi e note, con la composizione di fianco */
.riquadro {
  position: absolute; z-index: 50; width: min(610px, calc(100vw - 24px));
  background: linear-gradient(90deg, #f5916c, #e9729c, #a08cec) top / 100% 4px no-repeat, var(--foglio);
  border: 1px solid var(--bordo-forte); border-radius: 24px; box-shadow: var(--ombra-forte);
  padding: 16px 16px 16px; display: grid; gap: 12px; animation: compare .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes compare { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.riquadro.stretto { width: min(380px, calc(100vw - 24px)); }
.riquadro header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.riquadro header b { font: 800 20px/1.2 var(--ff-titolo); letter-spacing: -.3px; }
.riquadro h4 { margin: 0 0 8px; font: 700 11px/1 var(--ff-accordi); text-transform: uppercase; letter-spacing: .12em; color: var(--tenue); }
.rq-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 16px; align-items: start; }
.rq-comandi { display: grid; gap: 14px; min-width: 0; }
.rq-composizione .scheda-accordo { width: 100%; animation: none; }
.rq-composizione .diagramma.chitarra { width: 122px; }
.rq-composizione .diagramma.piano { width: 154px; }
.rq-composizione .sa-nome { font-size: 24px; }
.riquadro .linea { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.riquadro .input { min-height: 42px; flex: 1; min-width: 110px; font-family: var(--ff-accordi); font-weight: 600; }
.tasti { display: flex; flex-wrap: wrap; gap: 5px; }
.tasto {
  min-width: 40px; min-height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--bordo);
  background: var(--carta-2); cursor: pointer; font: 700 14px/1 var(--ff-accordi); transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.tasto:hover { border-color: var(--bordo-forte); background: var(--foglio); transform: translateY(-1px); }
.tasto.acc-tasto {
  --h: 330;
  color: hsl(var(--h) var(--acc-s) var(--acc-tl)); border-color: hsl(var(--h) var(--acc-sb) var(--acc-brl));
  background: linear-gradient(135deg, hsl(var(--h) var(--acc-sf) var(--acc-bl)), hsl(calc(var(--h) + 30) var(--acc-sf) var(--acc-bl2)));
}
.tasto.acc-tasto:hover { color: #fff; background: linear-gradient(135deg, hsl(var(--h) var(--acc-ps) var(--acc-pl)), hsl(calc(var(--h) + 30) var(--acc-ps) calc(var(--acc-pl) - 4%))); }
.tasto.nota-tasto { color: var(--nota); }
.tasto[aria-pressed="true"] { background: var(--grad); color: #fff; border-color: transparent; }
.attuali { display: flex; flex-wrap: wrap; gap: 5px; min-height: 30px; align-items: center; }
.attuali .chip { color: var(--nota); font-weight: 750; padding-right: 4px; }
.attuali .chip button { border: 0; background: transparent; cursor: pointer; color: var(--tenue); padding: 0 4px; font-size: 15px; line-height: 1; }
.riquadro .piede { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--bordo); padding-top: 12px; }
.riquadro details summary { cursor: pointer; font-size: 14px; color: var(--tenue); font-weight: 700; }
.riquadro details[open] summary { margin-bottom: 8px; }
.velo { position: fixed; inset: 0; z-index: 45; background: transparent; }
@media (max-width: 640px) {
  .riquadro, .riquadro.stretto {
    position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%;
    border-radius: 26px 26px 0 0; max-height: 86vh; overflow: auto; padding-bottom: max(18px, env(safe-area-inset-bottom));
    animation: dal-basso .3s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes dal-basso { from { transform: translateY(40%); opacity: .4; } }
  .rq-corpo { grid-template-columns: 1fr; }
  .rq-composizione { order: -1; }
  .rq-composizione .scheda-accordo {
    grid-template-columns: auto auto; grid-template-areas: "nome diag" "note diag" "gradi diag" "basso diag";
    justify-content: center; column-gap: 20px; justify-items: start; text-align: left; align-items: center;
  }
  .rq-composizione .sa-nome { grid-area: nome; }
  .rq-composizione .diagramma { grid-area: diag; }
  .rq-composizione .sa-note { grid-area: note; }
  .rq-composizione .sa-gradi { grid-area: gradi; }
  .rq-composizione .sa-basso { grid-area: basso; }
  .velo { background: rgba(14, 8, 28, .35); backdrop-filter: blur(2px); }
}

/* ---------- nuova canzone ---------- */
.nuova { max-width: 900px; margin: 0 auto; }
.nuova h1 { font: 800 clamp(36px, 6vw, 56px)/.98 var(--ff-titolo); margin: 0 0 8px; letter-spacing: -1.8px; }
.nuova h1::after { content: '.'; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nuova .sotto { color: var(--tenue); margin: 0 0 24px; font-size: 17px; font-weight: 500; }
.pannello { background: var(--foglio); border: 1px solid var(--bordo); border-radius: 26px; padding: 24px; display: grid; gap: 16px; box-shadow: var(--ombra); }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .due { grid-template-columns: 1fr; } .pannello { padding: 16px; } }
.scelta-file { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.scelta-file label {
  position: relative; display: grid; justify-items: center; gap: 9px; text-align: center; padding: 32px 18px; cursor: pointer;
  border: 1.5px dashed var(--bordo-forte); border-radius: 22px; background: var(--grad-tenue), var(--carta-2);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.scelta-file label:hover, .scelta-file label.sopra { border-color: #e9729c; transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(233, 114, 156, .55); }
.scelta-file .bolla { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: 0 10px 22px -10px rgba(233, 114, 156, .8); transition: transform .3s; }
.scelta-file label:hover .bolla { transform: rotate(-8deg) scale(1.08); }
.scelta-file .bolla .svg { width: 27px; height: 27px; }
.scelta-file b { font: 750 17px/1.2 var(--ff-titolo); }
.scelta-file small { color: var(--tenue); font-size: 13.5px; max-width: 260px; }
.scelta-file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.avanzamento { display: grid; gap: 8px; }
.avanzamento .tubo { height: 10px; border-radius: 99px; background: var(--carta-2); overflow: hidden; }
.avanzamento .tubo i { display: block; height: 100%; width: 0; background: var(--grad); background-size: 200% 100%; animation: scorri-colore 2s linear infinite; transition: width .25s; }
.anteprima-titolo { font: 700 11px/1 var(--ff-accordi); color: var(--tenue); text-transform: uppercase; letter-spacing: .12em; margin: 4px 0 -6px; }
.anteprima .foglio { margin: 0; box-shadow: none; font-size: 16px; max-height: 440px; overflow: auto; }

/* ---------- account ---------- */
.account { max-width: 720px; margin: 0 auto; display: grid; gap: 18px; }
.account h1 { font: 800 clamp(34px, 5vw, 50px)/1 var(--ff-titolo); margin: 0; letter-spacing: -1.5px; }
.account h2 { font: 800 22px/1.2 var(--ff-titolo); margin: 0; letter-spacing: -.4px; }
.scelte { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- condivisa ---------- */
.fascia {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: 18px; background: var(--grad-tenue), var(--foglio); border: 1px solid var(--bordo); box-shadow: var(--ombra-1);
  margin-bottom: 20px; font-size: 15px;
}

/* ---------- avvisi, dialoghi, menu ---------- */
.avvisi { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80; display: grid; gap: 8px; width: min(460px, calc(100vw - 32px)); }
@media (max-width: 720px) { .avvisi { bottom: 86px; } }
.avviso {
  position: relative; overflow: hidden; background: var(--inchiostro); color: var(--sfondo); padding: 13px 18px 13px 22px; border-radius: 16px;
  box-shadow: var(--ombra-forte); font-size: 15px; font-weight: 600; animation: entra .3s cubic-bezier(.2, .8, .2, 1);
}
.avviso::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--grad-v); }
.avviso.male { background: var(--male); color: #fff; }
@keyframes entra { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.aggiorna { position: sticky; top: var(--testata); z-index: 25; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 9px 16px; background: var(--grad); color: #fff; font-weight: 700; font-size: 15px; }
.aggiorna .btn.primario { background: #fff; color: #1d1530; }
.dialogo {
  border: 1px solid var(--bordo-forte); border-radius: 26px; padding: 26px; color: var(--inchiostro);
  background: linear-gradient(90deg, #f5916c, #e9729c, #a08cec) top / 100% 4px no-repeat, var(--foglio);
  width: min(480px, calc(100vw - 32px)); box-shadow: var(--ombra-forte);
}
.dialogo[open] { animation: compare .25s cubic-bezier(.2, .8, .2, 1); }
.dialogo::backdrop { background: rgba(20, 10, 35, .5); backdrop-filter: blur(4px); }
.dialogo h2 { font: 800 25px/1.15 var(--ff-titolo); margin: 0 0 8px; letter-spacing: -.5px; }
.dialogo p { margin: 0 0 14px; color: var(--tenue); }
.dialogo .riga-pulsanti { justify-content: flex-end; margin-top: 20px; }
.collegamento { display: flex; gap: 6px; flex-wrap: wrap; }
.collegamento .input { font-family: var(--ff-mono); font-size: 13px; flex: 1 1 220px; }
.menu { position: absolute; z-index: 50; min-width: 260px; background: var(--foglio); border: 1px solid var(--bordo-forte); border-radius: 18px; box-shadow: var(--ombra-forte); padding: 6px; display: grid; animation: compare .18s ease-out; }
.menu button { display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: transparent; padding: 11px 12px; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 600; transition: background .15s; }
.menu button:hover { background: var(--grad-tenue), var(--carta-2); }
.menu button .svg { color: #e9729c; }
.menu button.pericolo, .menu button.pericolo .svg { color: var(--male); }
.menu hr { border: 0; border-top: 1px solid var(--bordo); margin: 4px 0; }
.senza-js { text-align: center; padding: 40px; }

@media (max-width: 600px) {
  .vista { padding: 18px 14px 130px; }
  .foglio { border-radius: 18px; padding: 22px 16px 28px; }
  .griglia { grid-template-columns: 1fr; }
  .scheda { grid-template-columns: 64px minmax(0, 1fr); gap: 13px; padding: 12px; border-radius: 20px; }
  .copertina { width: 64px; height: 64px; border-radius: 15px; }
  .copertina .cop-ton { font-size: 20px; }
}

/* chi ha chiesto meno movimento: tutto fermo */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .aurora span { animation: none; }
}

/* ---------- stampa ---------- */
@media print {
  :root { --sfondo: #fff; --foglio: #fff; --inchiostro: #000; --nota: #333; --appunto: #eee; --appunto-2: #eee; --appunto-txt: #000; --acc-tl: 0%; --acc-bl: 100%; --acc-bl2: 100%; --acc-brl: 100%; }
  body { background: #fff; }
  .aurora, .alone, .progresso, .testata, .barra, .indietro, .azioni, .avvisi, .aggiorna, .piu-appunto, .pannello-accordi, .copertina { display: none !important; }
  .vista { padding: 0; max-width: none; }
  .testa-canzone h1 { color: #000; background: none; }
  .lettura { display: block; }
  .foglio { border: 0; box-shadow: none; padding: 0; background: #fff; }
  .foglio::before, .foglio::after, .sez-chorus::before { display: none; }
  .sez-badge { color: #000; background: none; box-shadow: none; padding: 0; }
  .sez, .riga { break-inside: avoid; }
}