/* Caratteri ospitati sul server (nessuna richiesta a servizi esterni) */
@font-face{font-family:"Unbounded"; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/unbounded-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Unbounded"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/unbounded-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree"; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/figtree-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/figtree-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2")}

/* Layout: una colonna da quaderno pentagrammato; cattura in alto, "ti ricordi?" evidenziato, poi l'archivio */
:root{
  --bg:#EEF1F6; --paper:#FFFFFF; --ink:#15202F; --muted:#5A6577; --line:#D3DAE5; --soft:#E4E9F1;
  --accent:#2543D4; --accent-ink:#FFFFFF; --accent-soft:#E3E8FD;
  --mark:#F4D04A; --mark-ink:#352900; --danger:#B3202D;
  --sheet:#FFFFFF; --sheet-ink:#141414; /* lo spartito resta "carta bianca" in entrambi i temi */
  --f-display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-data:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0E131B; --paper:#161D28; --ink:#E6EBF3; --muted:#97A3B4; --line:#2A3444; --soft:#1E2734;
  --accent:#7F97FF; --accent-ink:#0A0F1F; --accent-soft:#1F2A4D;
  --mark:#E6C33E; --mark-ink:#201800; --danger:#FF6E78; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0E131B; --paper:#161D28; --ink:#E6EBF3; --muted:#97A3B4; --line:#2A3444; --soft:#1E2734;
  --accent:#7F97FF; --accent-ink:#0A0F1F; --accent-soft:#1F2A4D;
  --mark:#E6C33E; --mark-ink:#201800; --danger:#FF6E78; color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:20px 48px}
.wrap{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:22px}
button,input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

header{display:flex; flex-direction:column; gap:4px; padding-top:6px}
h1{font-family:var(--f-display); font-weight:700; font-size:clamp(26px,6vw,36px); letter-spacing:-0.02em; margin:0; line-height:1.1; text-wrap:balance}
h1 .clef{color:var(--accent)}
h1:has(.logo){display:flex; align-items:center; gap:.3em}
h1 .logo{width:2.1em; height:2.1em; flex:none; object-fit:contain; margin:-.15em 0}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) h1 .logo{filter:brightness(2.1) saturate(.85)} }
:root[data-theme="dark"] h1 .logo{filter:brightness(2.1) saturate(.85)}
.sub{color:var(--muted); margin:0; max-width:52ch}
h2{font-family:var(--f-display); font-weight:500; font-size:15px; letter-spacing:.06em; text-transform:uppercase; margin:0; color:var(--muted)}

/* cattura */
.capture{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:14px; position:relative}
.capture.drag{border-color:var(--accent); background:var(--accent-soft)}
.btns{display:flex; flex-wrap:wrap; gap:10px}
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:12px 18px; border:1px solid var(--line); background:var(--paper); cursor:pointer; font-weight:600; min-height:46px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.primary .dot{width:12px; height:12px; border-radius:50%; background:var(--accent-ink)}
.btn input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.hint{color:var(--muted); font-size:14px; margin:0}
.status{display:flex; flex-direction:column; gap:6px; font-size:14px}
.bar{height:6px; background:var(--soft); border-radius:6px; overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--accent); transition:width .15s}
.err{color:var(--danger)}

/* ti ricordi */
.remind{background:var(--mark); color:var(--mark-ink); border-radius:var(--r); padding:16px 18px; display:flex; flex-direction:column; gap:10px}
.remind h2{color:var(--mark-ink)}
.remind .rt{font-family:var(--f-display); font-weight:500; font-size:19px; line-height:1.25}
.remind .rm{font-size:14px}
.remind .btns .btn{background:transparent; border-color:currentColor; color:var(--mark-ink); min-height:40px; padding:8px 14px}
.remind .btns .btn.solid{background:var(--mark-ink); color:var(--mark)}

/* filtri */
.archive{display:flex; flex-direction:column; gap:12px}
.ahead{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.count{font-family:var(--f-data); font-size:13px; color:var(--muted)}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.filters input,.filters select{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-height:44px}
.filters input{flex:1 1 200px; min-width:0}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--line); background:var(--paper); border-radius:999px; padding:5px 11px; font-size:14px; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}

/* card idea */
.list{display:flex; flex-direction:column; gap:12px}
.idea{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:14px; display:flex; flex-direction:column; gap:10px; scroll-margin-top:16px}
.idea.flash{box-shadow:0 0 0 3px var(--mark)}
.top{display:flex; gap:12px; align-items:flex-start}
.play{flex:none; width:48px; height:48px; border-radius:50%; border:none; background:var(--accent); color:var(--accent-ink); cursor:pointer; display:grid; place-items:center}
.play svg{width:18px; height:18px; fill:currentColor}
.ttl{min-width:0; flex:1; display:flex; flex-direction:column; gap:2px}
.ttl b{font-size:17px; font-weight:700; overflow-wrap:anywhere}
.ttl span{font-size:13px; color:var(--muted)}
.meta{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-family:var(--f-data); font-size:12.5px; padding:3px 8px; border-radius:6px; background:var(--soft); white-space:nowrap}
.tag.key{background:var(--accent-soft); color:var(--ink); font-weight:600}
.tag.est{color:var(--muted)}
canvas.staff{width:100%; height:86px; display:block; cursor:pointer; border-radius:8px}
.more{align-self:flex-start; background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:4px 0}
.detail{display:flex; flex-direction:column; gap:14px; border-top:1px dashed var(--line); padding-top:12px}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field>label,.field>.lab{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.field input,.field textarea{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; width:100%}
.field textarea{min-height:76px; resize:vertical}
.notes{display:flex; flex-wrap:wrap; gap:4px; font-family:var(--f-data); font-size:13px}
.notes span{padding:2px 6px; border-radius:5px; background:var(--soft)}
.match{display:flex; flex-direction:column; gap:6px}
.match button{display:flex; justify-content:space-between; gap:10px; text-align:left; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer}
.match button small{color:var(--muted); font-size:13px}
.danger{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.btn.del{color:var(--danger); border-color:transparent; padding-left:0; min-height:36px}
.btn.del.confirm{background:var(--danger); color:var(--paper); padding-left:16px}
.sc-ctrl{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
.sc-ctrl label{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--muted)}
.sc-ctrl input,.sc-ctrl select{background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 8px; min-height:38px}
.sc-ctrl input{width:74px; font-family:var(--f-data)}
.score{background:var(--sheet); color:var(--sheet-ink); border-radius:10px; padding:8px 6px; overflow-x:auto; min-height:60px}
.score .msg{padding:12px; font-size:14px}
.empty{background:var(--paper); border:1px dashed var(--line); border-radius:var(--r); padding:22px; color:var(--muted); text-align:center}
footer{color:var(--muted); font-size:13px}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }
/* versione server */
a.btn{text-decoration:none; color:inherit}
.btn.live{background:var(--danger); border-color:var(--danger); color:var(--paper)}
.btn.live .dot{background:var(--paper); animation:rec 1s steps(2, start) infinite}
@keyframes rec{to{opacity:.2}}
.empty .btn{margin-top:4px}
code{font-family:var(--f-data); font-size:.95em}
/* editor delle note */
:root{ --sheet-sel:#2543D4; }
.notes{max-height:168px; overflow-y:auto; padding:2px}
.notes button{font:inherit; padding:3px 7px; border-radius:5px; border:1px solid transparent; background:var(--soft); cursor:pointer; min-width:38px}
.notes button:hover{border-color:var(--accent)}
.notes button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}
.score .sel, .score .sel path{fill:var(--sheet-sel); stroke:var(--sheet-sel)}
.score svg .abcjs-note, .score svg .abcjs-note path{cursor:pointer}
.editor{display:flex; flex-direction:column; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.ed-info{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.ed-nota{font-family:var(--f-data); font-size:20px}
/* l'editor compare come riquadro accanto alla nota toccata; senza nota selezionata non si vede */
.editor:not(.attivo){display:none}
.con-editor{position:relative}
.editor.attivo{position:absolute; z-index:6; gap:6px; padding:8px 10px; background:var(--paper); border-color:var(--sheet-sel); box-shadow:0 10px 28px rgba(0,0,0,.22)}
.editor.attivo::before{content:''; position:absolute; top:-7px; left:calc(var(--freccia, 50%) - 7px); width:12px; height:12px; background:var(--paper); border-left:1px solid var(--sheet-sel); border-top:1px solid var(--sheet-sel); transform:rotate(45deg)}
.editor.attivo .ed-keys{display:none}
.editor.attivo .ed-row{gap:4px}
.editor.attivo .ed-row .chip{min-height:32px; padding:4px 9px; font-size:13px}
.editor.attivo .ed-nota{font-size:17px}
.ed-sigla label{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
.sigla-in{width:6.5em; min-height:32px; padding:4px 8px; font:inherit; font-family:var(--f-data); font-size:15px; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px}
.sigla-in.err{border-color:var(--danger); outline-color:var(--danger)}
.score svg .abcjs-chord{cursor:pointer}
.ed-chiudi{margin-left:auto; min-height:30px; padding:2px 11px; font-size:17px; line-height:1}
.ed-pos{color:var(--muted); font-size:13px}
.ed-row{display:flex; flex-wrap:wrap; gap:6px}
.ed-row .chip{min-height:38px; padding:6px 12px; font-variant-numeric:tabular-nums}
.ed-sill{align-self:center; color:var(--muted); font-size:13px}
.ed-row .chip:disabled{opacity:.4; cursor:default}
.ed-row .chip.warn{color:var(--danger); border-color:var(--danger)}
.ed-row .chip.warn.confirm{background:var(--danger); color:var(--paper)}
.ed-keys{font-size:12.5px}
@media (hover:none){ .ed-keys{display:none} }
/* trasposizione */
.trasp-row{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.lab-mini{font-size:13px; color:var(--muted); margin-right:2px}
.trasp-row .chip{display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.2; padding:5px 11px; border-radius:10px}
.trasp-row .chip small{font-size:11px; color:var(--muted)}
.trasp-row .chip[aria-pressed="true"] small{color:inherit; opacity:.8}
/* testo della canzone e deposito */
textarea.testo{font-family:var(--f-data); font-size:14px; line-height:1.6; min-height:140px}
.testo-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.testo-bar .hint{margin:0}
.cred{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px}
.cred label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted)}
.cred input{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:9px 11px; color:var(--ink)}
#stampa{display:none}
@media print{
  @page{size:A4; margin:16mm 14mm}
  body{background:#fff !important; padding:0 !important}
  body > *:not(#stampa){display:none !important}
  #stampa{display:block; color:#000; font-family:Georgia, "Times New Roman", serif}
  .st-head{text-align:center; margin-bottom:6mm}
  #stampa h1, #stampa h2{font-family:Georgia, "Times New Roman", serif; color:#000; letter-spacing:0; text-transform:none; font-weight:700}
  .st-head h1{font-size:24pt; margin:0 0 2mm}
  .st-aut{font-size:12pt; margin:0 0 1mm}
  .st-meta{font-size:10pt; margin:0; color:#333}
  #st-score svg{width:100% !important; height:auto; display:block; break-inside:avoid; page-break-inside:avoid}
  #st-score > div{break-inside:avoid; page-break-inside:avoid}
  .st-testo{break-before:page}
  .st-testo h2, .st-firme h2{font-size:14pt; margin:0 0 4mm}
  .st-testo pre{font-family:inherit; font-size:12pt; line-height:1.55; white-space:pre-wrap}
  .st-firme{break-inside:avoid; margin-top:10mm}
  .st-firma{display:flex; justify-content:space-between; gap:10mm; margin:9mm 0; font-size:11pt}
}
/* tracce separate */
.figli{display:flex; flex-direction:column; gap:10px; border-left:3px solid var(--accent-soft); padding-left:10px}
.figli .idea{background:var(--bg); padding:12px}
.figli .idea .detail{border-top-color:var(--line)}
.lavoro{display:flex; flex-direction:column; gap:6px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:14px}
.lavoro .lav-testo{display:flex; justify-content:space-between; gap:10px}
.lavoro .lav-testo b{font-family:var(--f-data)}
.lavoro p{margin:0}

/* ---------- barra in alto: utente, lingua, menu ---------- */
.topbar{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px}
.topbar .chi{color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar .chi b{color:var(--ink); font-weight:600}
.topbar nav{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.topbar nav .chip{min-height:36px; padding:6px 12px}
.topbar nav .chip[aria-current="page"]{border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}
.lingue{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--paper)}
.lingue button{border:0; background:transparent; padding:6px 11px; min-height:34px; font-size:13px; font-weight:600; cursor:pointer; color:var(--muted)}
.lingue button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}

/* ---------- pagine di accesso ---------- */
.accesso{max-width:440px}
.box{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:16px}
.box h2{color:var(--ink); font-size:17px; letter-spacing:0; text-transform:none; font-weight:700}
.modulo{display:flex; flex-direction:column; gap:14px}
.modulo label{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--muted)}
.modulo input,.modulo select{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 13px; font-size:16px; color:var(--ink); width:100%}
.modulo input.codice{font-family:var(--f-data); font-size:24px; letter-spacing:.3em; text-align:center}
.modulo .btn{justify-content:center}
.link{background:none; border:0; padding:0; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px; font-size:14px; align-self:flex-start}
.avviso{border-radius:10px; padding:10px 12px; font-size:14px; background:var(--soft)}
.scelta{display:flex; gap:8px; align-items:flex-start; font-size:14px; margin:6px 0}
.scelta input{margin-top:3px}
.avviso.err{background:color-mix(in srgb, var(--danger) 12%, var(--paper)); color:var(--danger)}
.avviso.ok{background:var(--accent-soft); color:var(--ink)}
.passi{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:15px}
.qr{align-self:center; background:#fff; padding:12px; border-radius:12px; line-height:0}
.qr svg{width:200px; height:200px; display:block}
.segreto{font-family:var(--f-data); font-size:15px; background:var(--bg); border:1px dashed var(--line); border-radius:10px; padding:10px; text-align:center; word-break:break-all; user-select:all}
.codici{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:0; padding:0; list-style:none; font-family:var(--f-data); font-size:16px}
.codici li{background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px; text-align:center}
.forza{height:6px; border-radius:6px; background:var(--soft); overflow:hidden}
.forza i{display:block; height:100%; width:0; transition:width .2s, background .2s}
.spunta{flex-direction:row!important; align-items:flex-start; gap:10px!important; font-weight:500!important; color:var(--ink)!important; font-size:15px!important}
.spunta input{width:auto!important; margin-top:4px}

/* ---------- profilo e gestione utenti ---------- */
.pannello{display:flex; flex-direction:column; gap:16px}
.pannello .indietro{align-self:flex-start; display:inline-flex}
.righe{display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); overflow:hidden}
.riga{display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px 14px; border-top:1px solid var(--line); flex-wrap:wrap}
.riga:first-child{border-top:0}
.riga .dati{display:flex; flex-direction:column; min-width:0; flex:1 1 220px}
.riga .dati b{font-weight:600; overflow-wrap:anywhere}
.riga .dati span{color:var(--muted); font-size:13px; overflow-wrap:anywhere}
.riga .azioni{display:flex; gap:6px; flex-wrap:wrap}
.riga .azioni .chip.warn{color:var(--danger); border-color:var(--danger)}
.stato{font-family:var(--f-data); font-size:12px; padding:2px 8px; border-radius:999px; background:var(--soft); color:var(--muted); white-space:nowrap}
.stato.attivo{background:var(--accent-soft); color:var(--accent)}
.stato.sospeso{background:color-mix(in srgb, var(--danger) 14%, var(--paper)); color:var(--danger)}
.registro{font-size:13px}
.registro .riga{padding:8px 14px}
.registro .quando{font-family:var(--f-data); color:var(--muted); white-space:nowrap}
.conferma{display:flex; flex-direction:column; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px; width:100%}
.copia{display:flex; gap:8px; align-items:center}
.copia input{flex:1; min-width:0; font-family:var(--f-data); font-size:13px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px}
@media print{ .topbar{display:none!important} }
/* lettore sullo spartito */
:root{ --sheet-play:#E0552B; }
.sc-play{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:10px}
.sc-play .btn{display:inline-flex; align-items:center; gap:8px}
.sc-play .btn svg{width:16px; height:16px; fill:currentColor}
.sc-play label{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--muted)}
.sc-play select{background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 8px; min-height:38px}
.sp-tempo{font-family:var(--f-data); font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums}
.sc-play + .hint{margin-top:4px}
.score .cursore{fill:var(--sheet-play); opacity:.85; pointer-events:none}
.score .suona, .score .suona path{fill:var(--sheet-play); stroke:var(--sheet-play)}
/* mixer delle tracce */
.btn.ico{display:inline-flex; align-items:center; gap:8px}
.btn.ico svg{width:18px; height:18px; fill:currentColor; flex:none}
.mixer{display:flex; flex-direction:column; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px}
.mx-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
.mx-bar label{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--muted)}
.mx-bar select{background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:6px 8px; min-height:38px}
.mx-tempo{font-family:var(--f-data); font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:92px}
.mx-pos{flex:1 1 180px; min-width:140px}
.mixer input[type=range]{accent-color:var(--accent); height:28px}
.mx-tracce{display:flex; flex-direction:column; gap:6px}
.mx-riga{display:grid; grid-template-columns:minmax(110px,150px) 38px minmax(90px,1fr) 70px 38px; align-items:center; gap:10px; padding:6px 8px; border-radius:10px; background:var(--paper); border:1px solid var(--line)}
.mx-riga.muta{opacity:.55}
.mx-on{display:flex; align-items:center; gap:8px; font:inherit; font-weight:600; text-align:left; background:none; border:0; padding:6px 2px; cursor:pointer; color:var(--ink); min-height:36px}
.mx-on i{width:14px; height:14px; border-radius:50%; border:2px solid var(--muted); flex:none}
.mx-on[aria-pressed="true"] i{background:var(--accent); border-color:var(--accent)}
span.mx-on{cursor:default}
.mx-on[aria-pressed="false"]{color:var(--muted); text-decoration:line-through}
.mx-solo,.mx-sp{width:38px; height:36px; border-radius:8px; border:1px solid var(--line); background:var(--bg); font:inherit; font-weight:700; cursor:pointer; display:grid; place-items:center; color:var(--muted)}
.mx-sp svg{width:18px; height:18px; fill:currentColor}
.mx-solo[aria-pressed="true"]{background:#E8B931; border-color:#E8B931; color:#1d1a10}
.mx-sp[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.mx-livello{height:8px; border-radius:4px; background:var(--soft); overflow:hidden}
.mx-livello i{display:block; height:100%; background:var(--accent); transform-origin:left; transform:scaleX(0)}
.mx-spartito{display:flex; flex-direction:column; gap:6px}
.lab-mini.mx-sp-nome{font-weight:600}
@media (max-width:560px){
  .mx-riga{grid-template-columns:1fr 38px 38px; grid-template-areas:"nome solo sp" "vol liv liv"; row-gap:4px}
  .mx-on{grid-area:nome} .mx-solo{grid-area:solo} .mx-sp{grid-area:sp}
  .mx-riga input[type=range]{grid-area:vol} .mx-livello{grid-area:liv}
}
/* il clic arriva sempre al pulsante, non all'icona dentro */
button svg, button > span, button > i{pointer-events:none}
/* play e pausa restano a portata di mano mentre lo spartito scorre */
.sc-play{position:sticky; top:0; z-index:5; background:var(--paper); padding:8px 0; margin-top:2px; box-shadow:0 8px 8px -8px rgba(0,0,0,.18)}
.mx-bar{position:sticky; top:0; z-index:5; background:var(--bg); padding:8px 0; box-shadow:0 8px 8px -8px rgba(0,0,0,.18)}
/* impaginazione: elenco dei brani a sinistra, brano scelto a destra */
.wrap.largo{max-width:1180px}
.layout{display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; align-items:start}
.indice{position:sticky; top:12px; max-height:calc(100vh - 24px); overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:2px 6px 8px 2px}
.indice .nuova{justify-content:center}
.indice .filters input{flex-basis:100%}
.indice .filters select{flex:1 1 100%}
.vista{display:flex; flex-direction:column; gap:22px; min-width:0}
.home{display:flex; flex-direction:column; gap:22px}
.voci{display:flex; flex-direction:column; gap:6px}
.voce{display:flex; flex-direction:column; gap:2px; text-align:left; width:100%; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; font:inherit; color:var(--ink)}
.voce:hover{border-color:var(--accent)}
.voce b{font-weight:600; overflow-wrap:anywhere; line-height:1.3}
.voce span{font-size:13px; color:var(--muted)}
.voce i.tr{font-style:normal; font-family:var(--f-data); font-size:12px; color:var(--accent)}
.voce[aria-current="true"]{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 4px 0 0 var(--accent)}
.voci .empty{padding:14px; font-size:14px}
.indietro{display:none; align-self:flex-start; min-height:40px; padding:8px 14px}
@media (max-width:899px){
  .layout{display:flex; flex-direction:column; gap:22px}
  .vista{order:-1}
  .indice{position:static; max-height:none; overflow:visible; padding:0}
  .indice .nuova{display:none}
  body.con-brano .indice{display:none}
  body.con-brano .indietro{display:inline-flex}
  body.con-brano header .sub{display:none}
}
.avviso{margin:0; font-size:14px; padding:10px 12px; border-radius:10px; background:var(--soft); color:var(--ink)}
.avviso.forte{background:var(--mark); color:var(--mark-ink)}

/* unione di tracce */
.unisci{display:flex; flex-direction:column; gap:10px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--bg)}
.unisci .chips{display:flex; flex-wrap:wrap; gap:6px}
.unisci .chip.scelta{display:inline-flex; align-items:center; gap:6px; cursor:pointer}
.unisci .chip.scelta:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.unisci label{display:flex; align-items:center; gap:8px; font-size:14px}
.unisci select{background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:6px 8px; min-height:36px}

/* ---------- band ---------- */
.voce .banda{display:inline-block; margin-top:3px; font-size:12px; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:1px 8px; width:fit-content; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.field.condivisa select{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:8px 10px; min-height:40px; max-width:100%}
.field.condivisa p{margin:4px 0}
.sola-lettura [data-act="strumento"], .sola-lettura [data-act="umore"]{pointer-events:none}
.sola-lettura [data-act="strumento"]:not([aria-pressed="true"]), .sola-lettura [data-act="umore"]:not([aria-pressed="true"]){display:none}
.sola-lettura [data-act="sillaba"]{display:none}
.box.band .band-testa{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.box.band .band-testa h2{margin:0}
.box.band .riga .azioni{align-items:center}
.box.band .riga .azioni input, .box.band .riga .azioni select, .riga-form input, .riga-form select{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:7px 10px; min-height:38px; max-width:100%}
.box.band .riga .azioni input{width:190px}
.band-gestione{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.riga-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.riga-form label{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.box.evidenza{border-color:var(--accent)}
.mx-parte{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:10px 0 2px}
.mx-parte .lab-mini{margin-right:4px}

/* ---------- scalette ---------- */
.sc-elenco{display:flex; flex-direction:column; gap:10px; margin-bottom:16px}
.sc-voce{display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; cursor:pointer; font:inherit; color:inherit; width:100%}
.sc-voce b{font-size:17px}
.sc-voce span{font-size:13px; color:var(--muted)}
.sc-voce:hover{border-color:var(--accent)}
.sc-nuova{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; align-items:end}
.sc-nuova label, .sc-campi label, .sc-note{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted)}
.sc-nuova input, .sc-nuova select, .sc-campi input, .sc-aggiungi select, .sc-note textarea, .sc-titolo{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:8px 10px; min-height:40px; color:var(--ink); font:inherit; max-width:100%}
.sc-nuova .avviso{grid-column:1/-1}
.sc-testa{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.sc-titolo{font-size:20px; font-weight:700; flex:1 1 240px}
.sc-testa h2{margin:0}
.sc-campi{display:flex; flex-wrap:wrap; gap:10px 20px; align-items:end; margin-bottom:12px}
.sc-totale{margin:0 0 8px; color:var(--muted)}
.sc-riga{align-items:center}
.sc-n{font-family:var(--f-data); font-weight:700; color:var(--accent); min-width:1.6em}
.sc-riga .dati{flex:1}
.sc-riga .azioni .chip{min-width:38px}
.sc-aggiungi{margin:10px 0}
.sc-aggiungi select{width:100%}
.sc-note{margin:10px 0}
@media print{
  .libro .st-score svg{width:100% !important; height:auto; display:block; break-inside:avoid; page-break-inside:avoid}
  .libro .st-score > div{break-inside:avoid; page-break-inside:avoid}
  .lb-brano{break-before:page}
  .lb-brano h2{font-size:18pt; margin:0 0 1mm; text-align:center}
  .lb-brano .st-meta{text-align:center; margin-bottom:5mm}
  .lb-indice{text-align:left; margin:10mm auto 6mm; max-width:150mm; font-size:13pt; line-height:1.9; padding-left:8mm}
  .lb-indice li span:last-child{float:right; font-size:10pt; color:#333; margin-left:6mm}
  .lb-indice li::after{content:""; display:block; clear:both}
  .lb-note{font-family:inherit; text-align:left; white-space:pre-wrap; font-size:11pt; margin:8mm auto 0; max-width:150mm}
}
.trappola{position:absolute!important; left:-10000px!important; width:1px; height:1px; overflow:hidden}

/* ---------- bacheca ---------- */
.topbar .badge, .conv .badge{display:inline-block; min-width:18px; height:18px; line-height:18px; margin-left:6px; padding:0 5px; border-radius:999px; background:var(--danger); color:#fff; font-size:11px; font-weight:700; text-align:center}
.avviso.attesa{margin:10px 0 0; background:color-mix(in srgb, var(--mark) 35%, var(--paper)); color:var(--ink)}
.iscriviti-invito{margin-top:14px}
.bc-schede{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px}
.bc-schede .chip[aria-selected="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.bc-schede .btn{margin-left:auto}
.bc-filtri{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; margin-bottom:12px}
.bc-filtri select, .bc-filtri input, .bc-campo input, .bc-campo select, .bc-campo textarea, .bc-ascolta select, .bc-sp-scelte select{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:8px 10px; min-height:40px; color:var(--ink); font:inherit; max-width:100%; min-width:0}
.bc-elenco{display:flex; flex-direction:column; gap:10px}
.bc-carta{display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left; width:100%; font:inherit; color:inherit; cursor:pointer}
.bc-carta:hover{border-color:var(--accent)}
.bc-tipo{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent)}
.bc-tipo.musicista{color:color-mix(in srgb, var(--danger) 70%, var(--ink))}
.bc-titolo{font-size:18px}
.bc-meta, .bc-piede{font-size:13px; color:var(--muted); margin:0}
.bc-chips{display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin:2px 0}
.bc-chip{font-style:normal; font-size:12px; border:1px solid var(--line); border-radius:999px; padding:1px 8px; color:var(--muted)}
.bc-chip.str{background:var(--accent-soft); border-color:transparent; color:var(--ink); font-weight:600}
.bc-scheda h2{margin:4px 0}
.bc-scheda h3{margin:18px 0 6px}
.bc-testo{white-space:pre-wrap; line-height:1.55; margin:12px 0; overflow-wrap:anywhere}
.bc-brano{border-top:1px solid var(--line); padding:10px 0; display:flex; flex-direction:column; gap:6px}
.bc-ascolta{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.bc-ascolta audio{flex:1 1 260px; max-width:100%; min-width:0}
.bc-sp summary{cursor:pointer; font-weight:600; color:var(--accent); padding:4px 0}
.bc-sp-scelte{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0}
.bc-spartito{background:#fff; border-radius:10px; overflow:hidden; color:#111}
.bc-modulo{display:flex; flex-direction:column; gap:14px}
.bc-campo{display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--muted); border:0; padding:0; margin:0; min-width:0}
.bc-campo legend{padding:0; margin-bottom:6px}
.bc-riga2{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px}
.bc-tipi{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px}
.bc-scelte{display:flex; flex-wrap:wrap; gap:6px}
.bc-scelte.colonna{flex-direction:column}
.bc-scelta{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-size:14px; color:var(--ink); cursor:pointer; background:var(--paper)}
.bc-scelta input{margin:0}
.bc-scelta:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.bc-scelta.grande{border-radius:12px; padding:10px 12px; align-items:flex-start}
.bc-scelte.colonna .bc-scelta{border-radius:10px}
.bc-scelta small{color:var(--muted)}

/* ---------- messaggi ---------- */
.conversazioni .conv{width:100%; text-align:left; font:inherit; color:inherit; background:none; border:0; cursor:pointer}
.conv.nuova b{color:var(--accent)}
.conv .dati span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60vw}
.msg-testa{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.msg-testa h2{margin:0}
.msg-lista{display:flex; flex-direction:column; gap:8px; max-height:55vh; overflow-y:auto; padding:10px 2px; margin:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.msg-bolla{align-self:flex-start; max-width:min(80%, 520px); background:var(--soft); border-radius:14px 14px 14px 4px; padding:8px 12px; display:flex; flex-direction:column; gap:3px}
.msg-bolla.mia{align-self:flex-end; background:var(--accent-soft); border-radius:14px 14px 4px 14px}
.msg-testo{overflow-wrap:anywhere; line-height:1.45}
.msg-ora{font-size:11px; color:var(--muted)}
.msg-ora .link{font-size:11px; padding:0}
.msg-annuncio{font-size:12px; color:var(--accent); font-weight:600}
.msg-scrivi{display:flex; flex-direction:column; gap:8px}
.msg-scrivi textarea{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit; color:var(--ink); resize:vertical}
.segnalazione .dati span{white-space:normal}