/* IstoHZ — stile glass su fondo scuro, palette propria: indaco/ciano, bassi arancio, medi turchese, alti viola.
   Compatibilità: niente gap nei flex, niente inset/aspect-ratio/dvh/color-mix; ogni backdrop-filter ha il prefisso e un ripiego opaco. */
:root{
  --bg:#0b1020; --ink:#f4f6ff; --ink2:#c3c9e4; --muted:#8c94b8;
  --vetro:rgba(255,255,255,.08); --vetro2:rgba(255,255,255,.14); --bordo:rgba(255,255,255,.18);
  --bassi:#ff7a45; --medi:#2dd4bf; --alti:#a78bfa;
  --acc1:#6366f1; --acc2:#22d3ee;
  --pad-l:16px; --pad-r:16px;
}
/* bordi dell'iPhone: max()/env() solo dove esistono, altrimenti restano i 16px */
@supports (padding:max(1px,2px)){ :root{ --pad-l:max(16px,env(safe-area-inset-left)); --pad-r:max(16px,env(safe-area-inset-right)) } }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  font-size:16px;line-height:1.4;overflow-wrap:break-word;-webkit-tap-highlight-color:transparent;padding-bottom:env(safe-area-inset-bottom);min-height:100vh}
[hidden]{display:none !important}
button,input,label{font:inherit;touch-action:manipulation}
button{cursor:pointer}
.nascosto{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}

/* sfondo: tre macchie di colore sfocate, fisse */
.sfondo{position:fixed;left:0;top:0;right:0;bottom:0;z-index:-1;overflow:hidden;background:linear-gradient(160deg,#0b1020 0%,#141a3a 55%,#0d1226 100%)}
.sfondo i{position:absolute;border-radius:50%;opacity:.55;-webkit-filter:blur(60px);filter:blur(60px)}
.b1{width:340px;height:340px;left:-80px;top:-60px;background:var(--acc1)}
.b2{width:300px;height:300px;right:-90px;top:30%;background:#0e7490}
.b3{width:320px;height:320px;left:15%;bottom:-120px;background:#9a3412;opacity:.4}

.contenitore{max-width:1280px;margin:0 auto;padding-left:var(--pad-l);padding-right:var(--pad-r)}

/* testata */
.testa{padding-top:14px;padding-bottom:6px}
@supports (padding:max(1px,2px)){ .testa{padding-top:max(14px,env(safe-area-inset-top))} }
.barra{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}
.logo{width:44px;height:44px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.35);-webkit-flex:none;flex:none;margin-right:12px}
.txt{-webkit-flex:1;flex:1;min-width:0}
h1{font-size:1.4rem;font-weight:900;margin:0;letter-spacing:.1em;text-transform:uppercase}
.tag{margin:1px 0 0;font-size:.85rem;font-weight:600;color:var(--ink2)}
h2{margin:0}

/* pannello di vetro */
.vetro{background:rgba(30,36,72,.82);border:1px solid var(--bordo);border-radius:24px;
  box-shadow:0 14px 36px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.22);position:relative;overflow:hidden}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .vetro{background:var(--vetro);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}
}
.vetro:before{content:"";position:absolute;left:0;top:0;right:0;height:55%;pointer-events:none;border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0))}
.vetro > *{position:relative}
.scheda{padding:18px;margin:14px 0}
.titoletto{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin:0 0 12px}
.sotto{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin:20px 0 10px}
.nota{color:var(--muted);font-size:.85rem;margin:10px 2px 0}
.nota strong{color:var(--ink2)}
.desk-only{display:none}

/* campi e pulsanti */
.cerca{display:-webkit-flex;display:flex}
input[type=search],input[type=text]{-webkit-appearance:none;appearance:none;-webkit-flex:1;flex:1;min-width:0;height:52px;padding:0 16px;border-radius:16px;border:1px solid var(--bordo);
  background:rgba(8,12,30,.55);color:var(--ink);outline:0;margin-right:10px}
input[type=search]::placeholder,input[type=text]::placeholder{color:var(--muted)}
input[type=search]:focus,input[type=text]:focus{border-color:var(--acc2);box-shadow:0 0 0 3px rgba(34,211,238,.25)}
.tasto{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:16px;border:0;
  background:linear-gradient(180deg,#7c7ff7 0%,var(--acc1) 55%,#4338ca 100%);color:#fff;font-weight:800;text-decoration:none;text-align:center;
  box-shadow:0 8px 20px rgba(79,70,229,.45),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .08s,box-shadow .08s;-webkit-flex:none;flex:none}
.tasto:active{transform:translateY(1px);box-shadow:0 3px 8px rgba(79,70,229,.45)}
.tasto-vetro{display:-webkit-flex;display:flex;width:100%;background:rgba(255,255,255,.10);border:1px solid var(--bordo);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);cursor:pointer}
.tasto[disabled]{opacity:.5}

/* risultati della ricerca */
.risultati{margin-top:12px}
.riga{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;width:100%;text-align:left;color:var(--ink);padding:8px;margin-bottom:8px;border-radius:16px;
  border:1px solid var(--bordo);background:rgba(255,255,255,.06);min-height:64px}
.riga:active{background:rgba(255,255,255,.16)}
.riga img{width:48px;height:48px;border-radius:10px;-webkit-flex:none;flex:none;margin-right:12px;background:rgba(255,255,255,.1);object-fit:cover}
.riga .rt{-webkit-flex:1;flex:1;min-width:0}
.riga b,.riga span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.riga span{font-size:.85rem;color:var(--ink2)}

.tasto.largo{display:-webkit-flex;display:flex;width:100%;margin-top:10px}
.nota-su{margin-top:0;margin-bottom:12px}
.riga .fn-src{-webkit-flex:none;flex:none;margin-left:8px;font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);padding:3px 8px;border-radius:99px;border:1px solid var(--bordo)}

/* analisi dal vivo */
.live{border-color:rgba(251,113,133,.55)}
.live-testa{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin-bottom:6px;font-size:1.1rem}
.punto{width:12px;height:12px;border-radius:50%;background:#fb7185;margin-right:10px;-webkit-animation:lampeggia 1.2s infinite;animation:lampeggia 1.2s infinite;box-shadow:0 0 12px #fb7185}
@-webkit-keyframes lampeggia{50%{opacity:.25}} @keyframes lampeggia{50%{opacity:.25}}
.live-testo{margin:0 0 12px;color:var(--ink2)}
.chip.rosso{background:rgba(251,113,133,.2);color:#fecdd3;border-color:rgba(251,113,133,.5)}

/* installazione */
.chip-install{-webkit-flex:none;flex:none;margin-left:10px;padding:8px 14px;border-radius:99px;font-size:.85rem;font-weight:800;color:#fff;text-decoration:none;
  background:linear-gradient(180deg,#7c7ff7,var(--acc1));box-shadow:0 4px 12px rgba(79,70,229,.45),inset 0 1px 0 rgba(255,255,255,.35)}
#zona-installa .scambio{-webkit-flex-wrap:wrap;flex-wrap:wrap}
.guida ol{margin:0;padding-left:22px;color:var(--ink)}
.guida li{margin-bottom:10px;line-height:1.4}
.guida li strong{color:#fff}

/* cronologia */
.gruppo{margin-bottom:12px;border:1px solid var(--bordo);border-radius:18px;background:rgba(255,255,255,.05);overflow:hidden}
.gruppo-testa{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;padding:10px 12px}
.gruppo-testa img{width:36px;height:36px;border-radius:8px;margin-right:10px;-webkit-flex:none;flex:none;background:rgba(255,255,255,.1);object-fit:cover}
.gruppo-testa .rt{-webkit-flex:1;flex:1;min-width:0}
.gruppo-testa b,.gruppo-testa span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gruppo-testa span{font-size:.8rem;color:var(--ink2)}
.voce{display:-webkit-flex;display:flex;-webkit-align-items:stretch;align-items:stretch;border-top:1px solid var(--bordo)}
.voce .apri{-webkit-flex:1;flex:1;min-width:0;text-align:left;background:transparent;border:0;color:var(--ink);padding:0 12px;min-height:48px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}
.voce .apri:active{background:rgba(255,255,255,.14)}
.voce .apri .fn-src{margin:0 10px 0 0;-webkit-flex:none;flex:none;font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);padding:3px 8px;border-radius:99px;border:1px solid var(--bordo);font-style:normal}
.voce .apri .fn-src.live{color:#fecdd3;border-color:rgba(251,113,133,.55)}
.voce .apri small{font-size:.8rem;color:var(--ink2)}
.voce .togli{-webkit-flex:none;flex:none;width:48px;background:transparent;border:0;border-left:1px solid var(--bordo);color:var(--muted);font-size:1.1rem}
.voce .togli:active{background:rgba(251,113,133,.25)}
.rinomina{padding:14px 18px}
.rinomina .titoletto{display:block;margin-bottom:10px}
@media (min-width:960px){ #storico{max-height:460px;overflow-y:auto;-webkit-overflow-scrolling:touch} }

/* vuoto, lavoro, errore */
.vuoto{text-align:center;padding:36px 22px}
.vuoto h2{font-size:1.3rem;margin:14px 0 6px}
.vuoto p{color:var(--ink2);max-width:460px;margin:0 auto}
.lavoro-testo{margin:0 0 12px;font-weight:700}
.barra-prog{height:10px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.barra-prog i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--acc1),var(--acc2));transition:width .15s}
.errore{border-color:rgba(251,113,133,.6);color:#ffd5dc}

/* brano */
.brano{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}
.copertina{width:64px;height:64px;border-radius:14px;-webkit-flex:none;flex:none;margin-right:14px;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.brano-txt{min-width:0}
.b-titolo{font-size:1.25rem;font-weight:900;line-height:1.2}
.b-artista{margin:2px 0 8px;color:var(--ink2)}
.chip{display:inline-block;margin:0;font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:rgba(34,211,238,.18);color:#a5f3fc;border:1px solid rgba(34,211,238,.4)}

/* le tre bande */
.tre{display:grid;grid-template-columns:1fr;grid-gap:12px;margin:14px 0}
.banda{border-radius:24px;padding:16px 18px;border:1px solid var(--bordo);position:relative;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.banda.bassi{background:linear-gradient(150deg,#ff9566 0%,#e2531f 60%,#9a3412 100%)}
.banda.medi{background:linear-gradient(150deg,#47e0cd 0%,#0d9488 60%,#115e59 100%)}
.banda.alti{background:linear-gradient(150deg,#bba6ff 0%,#7c5ce0 60%,#4c1d95 100%)}
.banda:before{content:"";position:absolute;left:0;top:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0))}
.banda > *{position:relative}
.banda .nome{font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.95}
.banda .hz{font-size:.8rem;opacity:.85;font-weight:600}
.banda .pc{font-size:2.6rem;font-weight:900;line-height:1.05;margin:6px 0 2px}
.banda .pc small{font-size:1.2rem;font-weight:800}
.banda .db{font-size:.85rem;font-weight:700;opacity:.95}
.banda .mis{height:8px;border-radius:99px;background:rgba(0,0,0,.28);margin-top:12px;overflow:hidden}
.banda .mis i{display:block;height:100%;border-radius:99px;background:rgba(255,255,255,.9)}

/* grafico */
.testata-grafico{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap}
.testata-grafico .titoletto{margin-bottom:12px;margin-right:10px}
.scambio{display:-webkit-flex;display:flex;padding:3px;border-radius:14px;background:rgba(8,12,30,.55);border:1px solid var(--bordo);margin-bottom:12px}
.sc,.sw{border:0;background:transparent;color:var(--ink2);font-weight:700;font-size:.85rem;min-height:38px;padding:0 14px;border-radius:11px}
.sc.attivo,.sw.attivo{background:linear-gradient(180deg,#7c7ff7,var(--acc1));color:#fff;box-shadow:0 3px 10px rgba(79,70,229,.45)}
.grafico-box{position:relative;height:300px;touch-action:pan-y}
#grafico{display:block;width:100%;height:100%}
.suggerimento{position:absolute;top:0;left:0;pointer-events:none;padding:6px 10px;border-radius:12px;font-size:.8rem;font-weight:700;white-space:nowrap;
  background:rgba(8,12,30,.92);border:1px solid var(--bordo);color:var(--ink)}

/* quadro */
.verdetto{font-size:1.05rem;font-weight:700;margin:0 0 14px;line-height:1.35}
.dati{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px}
.dato{border-radius:16px;padding:12px;background:rgba(255,255,255,.07);border:1px solid var(--bordo)}
.dato small{display:block;color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.dato b{display:block;font-size:1.25rem;font-weight:900;margin-top:2px}
.fascia{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin-bottom:10px;font-size:.9rem}
.fascia .fn{width:112px;-webkit-flex:none;flex:none;font-weight:700}
.fascia .fn em{display:block;font-style:normal;color:var(--muted);font-size:.72rem;font-weight:600}
.fascia .ft{-webkit-flex:1;flex:1;height:10px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin:0 10px}
.fascia .ft i{display:block;height:100%;border-radius:99px;min-width:2px}
.fascia .fp{width:52px;-webkit-flex:none;flex:none;text-align:right;font-weight:800}

.piede{color:var(--muted);font-size:.75rem;text-align:center;padding-top:10px;padding-bottom:28px}

/* telefono stretto */
@media (max-width:380px){ .banda .pc{font-size:2.2rem} .fascia .fn{width:92px} }

/* tablet: tre bande affiancate */
@media (min-width:640px){
  .tre{grid-template-columns:1fr 1fr 1fr}
  .dati{grid-template-columns:repeat(4,1fr)}
  .grafico-box{height:340px}
}

/* computer: pagina a due colonne, come un sito */
@media (min-width:960px){
  .desk-only{display:block} .mob-only{display:none}
  .colonne{display:grid;grid-template-columns:380px 1fr;grid-gap:24px;-webkit-align-items:start;align-items:start;padding-top:6px}
  
  .lato .scheda:first-child,.centro .scheda:first-child{margin-top:0}
  .grafico-box{height:380px}
  #zona-file.trascina{outline:3px dashed var(--acc2);outline-offset:-6px}
  .contenitore.barra,.piede{padding-left:24px;padding-right:24px}
  h1{font-size:1.6rem}
}

/* se l'utente ha chiesto meno movimento */
@media (prefers-reduced-motion:reduce){ .barra-prog i,.tasto{transition:none} }