:root{
  --bg:#0e0e12; --bg2:#16161b; --bg3:#202027; --elev:#1a1a20;
  --txt:#f3f3f5; --txt2:#9a9aa3; --accent:#1ed7a6; --accent2:#2ee3b3;
  --bar:#26262e; --r:8px; --pl-h:88px;
  --viola:#6C5CE7; --teal:#12b886; --coral:#ef6c4d; --blu:#3b82f6; --rosa:#ec4899;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow:hidden}
.hidden{display:none !important}
button{cursor:pointer;border:none;background:none;color:inherit;font:inherit}
img{display:block}
input[type=search],input[type=text]{font:inherit}

/* LOGIN */
.login{position:fixed;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 0%,#15302a 0%,#0e0e12 60%);padding:24px}
.login-box{max-width:360px;text-align:center}
.login .logo{font-size:64px;margin-bottom:8px}
.login h1{font-size:32px;margin-bottom:12px}
.login p{color:var(--txt2);margin-bottom:24px;line-height:1.5}
.login .err{color:#ff6b6b;min-height:20px;margin-top:16px}
#tg-login{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:48px}

/* LAYOUT */
.app{display:grid;height:100%;
  grid-template-columns:240px 1fr;grid-template-rows:1fr var(--pl-h);
  grid-template-areas:"side main" "player player"}
.sidebar{grid-area:side;background:#000;display:flex;flex-direction:column;padding:12px 8px;gap:6px;overflow:hidden}
.main{grid-area:main;background:linear-gradient(180deg,#1b1b22 0,var(--bg) 220px);overflow-y:auto;position:relative}
.player{grid-area:player}

/* SIDEBAR */
.brand{font-size:22px;font-weight:800;padding:10px 12px}
.brand span{vertical-align:middle}
nav{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.nav{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:6px;
  color:var(--txt2);font-weight:700;font-size:15px}
.nav:hover,.nav.attiva{color:#fff;background:var(--bg3)}
.pl-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 12px 6px;color:var(--txt2);font-size:13px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.pl-head button{font-size:22px;color:var(--txt2);line-height:1}
.pl-head button:hover{color:#fff}
.pl-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.pl-item{text-align:left;padding:8px 12px;border-radius:6px;color:var(--txt2);
  font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-item:hover,.pl-item.attiva{color:#fff;background:var(--bg2)}
.pl-item small{display:block;color:#6a6a6a;font-size:11px}
.me{padding:10px 12px;color:var(--txt2);font-size:12px;border-top:1px solid #222}

/* TOPBAR */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;
  padding:14px 24px;background:rgba(18,18,18,.6);backdrop-filter:blur(12px)}
.search-wrap{flex:1;max-width:420px}
.search-wrap input{width:100%;padding:11px 16px;border-radius:999px;border:none;
  background:var(--bg3);color:#fff;font-size:14px}
.net{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
.net.off{background:#ff6b6b}

/* VISTA */
.vista{padding:8px 24px 24px}
.vista h2{font-size:26px;margin:12px 0 16px}
.riga-tit{display:flex;align-items:center;gap:16px;margin:8px 0 20px}
.riga-tit .grande{width:120px;height:120px;border-radius:8px;background:var(--bg3);
  display:grid;place-items:center;font-size:48px;flex:none;box-shadow:0 8px 24px rgba(0,0,0,.5);object-fit:cover}
.riga-tit .info h2{margin:0 0 6px}
.riga-tit .info p{color:var(--txt2);font-size:14px}
.azioni{display:flex;gap:10px;margin:4px 0 18px;flex-wrap:wrap}
.btn{padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px}
.btn.verde{background:var(--accent);color:#000}
.btn.verde:hover{background:var(--accent2);transform:scale(1.03)}
.btn.ghost{border:1px solid #555;color:#fff}
.btn.ghost:hover{border-color:#fff}
.btn.pericolo:hover{color:#ff6b6b;border-color:#ff6b6b}

/* LISTA BRANI */
.lista{display:flex;flex-direction:column}
.brano{display:grid;grid-template-columns:28px 40px 1fr auto auto;align-items:center;gap:12px;
  padding:8px 12px;border-radius:6px;cursor:pointer}
.brano:hover{background:var(--bg3)}
.brano.suona .num,.brano.suona .b-tit{color:var(--accent)}
.brano .num{color:var(--txt2);text-align:center;font-size:14px}
.brano .b-main{min-width:0}
.brano .b-tit{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brano .b-sub{color:var(--txt2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brano .b-dur{color:var(--txt2);font-size:13px;font-variant-numeric:tabular-nums}
.brano .b-add{color:var(--txt2);font-size:18px;opacity:0;padding:0 4px}
.brano:hover .b-add{opacity:1}
.brano .b-add:hover{color:#fff}
.vuoto{color:var(--txt2);text-align:center;padding:48px 0}

/* GRIGLIA ALBUM / RISULTATI */
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.card{background:var(--bg2);border-radius:8px;padding:14px;cursor:pointer;transition:background .2s}
.card:hover{background:var(--bg3)}
.card .cov{width:100%;aspect-ratio:1;border-radius:6px;background:var(--bg3);margin-bottom:12px;
  display:grid;place-items:center;font-size:40px;object-fit:cover;overflow:hidden}
.card .cov img{width:100%;height:100%;object-fit:cover}
.card .c-tit{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .c-sub{color:var(--txt2);font-size:12px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* RISULTATI RICERCA AGGIUNGI */
.ris{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:6px}
.ris:hover{background:var(--bg3)}
.ris .r-ico{font-size:22px;width:28px;text-align:center}
.ris .r-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ris .scarica{background:var(--accent);color:#000;border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px;flex:none}

/* PLAYER */
.player{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  background:var(--bg2);border-top:1px solid #000;padding:0 16px}
.p-info{display:flex;align-items:center;gap:12px;min-width:0}
.p-info img{width:56px;height:56px;border-radius:6px;background:var(--bg3);object-fit:cover;flex:none}
.p-meta{min-width:0}
.p-tit{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-art{color:var(--txt2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-center{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(45vw,520px)}
.p-ctrl{display:flex;align-items:center;gap:22px}
.p-ctrl button{font-size:18px;color:var(--txt2)}
.p-ctrl button:hover{color:#fff}
.p-ctrl .big{width:38px;height:38px;border-radius:50%;background:#fff;color:#000;font-size:16px;
  display:grid;place-items:center}
.p-ctrl .big:hover{transform:scale(1.06)}
.p-seek{display:flex;align-items:center;gap:10px;width:100%}
.p-seek span{color:var(--txt2);font-size:11px;font-variant-numeric:tabular-nums;min-width:34px;text-align:center}
.p-right{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.p-right button{color:var(--txt2)}.p-right button:hover,.p-right button.on{color:var(--accent)}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:#5a5a5a;outline:none}
.p-seek input{flex:1}
.p-right input{width:90px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff}
input[type=range]:hover{background:#777}
input[type=range]:hover::-webkit-slider-thumb{background:var(--accent)}

/* MODALE / TOAST */
.modale{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;z-index:50;padding:20px}
.modale-box{background:#282828;border-radius:10px;padding:24px;width:min(420px,100%)}
.modale-box h3{margin-bottom:14px}
.modale-box input{width:100%;padding:12px;border-radius:6px;border:none;background:#3e3e3e;color:#fff;font-size:15px;margin-top:8px}
.modale-box .lista-scelta{max-height:260px;overflow-y:auto;margin-top:10px}
.modale-azioni{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.modale-azioni button{padding:10px 20px;border-radius:999px;font-weight:700}
.modale-azioni .primario{background:#fff;color:#000}
.scelta{padding:10px;border-radius:6px;cursor:pointer;color:var(--txt2)}
.scelta:hover{background:#3e3e3e;color:#fff}
.toast{position:fixed;bottom:calc(var(--pl-h) + 16px);left:50%;transform:translateX(-50%);
  background:#fff;color:#000;padding:12px 20px;border-radius:999px;font-weight:700;font-size:14px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* MOBILE */
@media (max-width:760px){
  .app{grid-template-columns:1fr;grid-template-rows:1fr auto var(--pl-h);
    grid-template-areas:"main" "side" "player"}
  .sidebar{flex-direction:row;align-items:center;gap:4px;padding:6px;overflow-x:auto;border-top:1px solid #222}
  .brand,.pl-head,.me{display:none}
  nav{flex-direction:row;margin:0;flex:1;justify-content:space-around}
  .nav span:not(.nic){display:none}     /* in basso mostro solo le icone */
  .nav{padding:10px 12px}
  .pl-list{display:none}                /* le playlist stanno nella scheda dedicata: barra in basso pulita */
  .p-right{display:none}
  .player{grid-template-columns:1fr auto;gap:8px;padding:0 10px}
  .p-center{width:auto}
  .p-seek{display:none}
  .vista{padding:8px 14px 24px}
}

/* ===== v2: copertine, hover-play, home, skeleton, animazioni ===== */
.vista{animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.saluto{font-size:30px;margin:16px 0 6px}
.sez{font-size:20px;margin:24px 0 12px;font-weight:800}

/* riga brano: indice che diventa ▶ al hover + mini copertina */
.brano .b-idx{position:relative;width:28px;height:28px;display:grid;place-items:center}
.brano .b-idx .n{color:var(--txt2);font-size:14px;font-variant-numeric:tabular-nums}
.brano .b-idx .pl{position:absolute;inset:0;display:none;place-items:center;font-size:12px;color:#fff}
.brano:hover .b-idx .n{opacity:0}
.brano:hover .b-idx .pl{display:grid}
.brano.suona .b-idx .n{color:var(--accent);opacity:1}
.b-cov{position:relative;width:40px;height:40px;border-radius:4px;overflow:hidden;background:var(--bg3);display:grid;place-items:center}
.b-cov .ph{font-size:16px;opacity:.7}
.b-cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* card con copertina + play overlay */
.card .cov{position:relative}
.card .cov .ph{font-size:42px;opacity:.85}
.card .cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px}
.card .cov.pl{background:linear-gradient(135deg,#43338a,#1db954)}
.play-ov{position:absolute;right:8px;bottom:8px;width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:#000;font-size:16px;display:grid;place-items:center;border:none;
  opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;box-shadow:0 8px 18px rgba(0,0,0,.45)}
.card:hover .play-ov{opacity:1;transform:none}
.play-ov:hover{transform:scale(1.07);background:var(--accent2)}

/* copertina grande nelle pagine album/playlist */
.riga-tit .grande{position:relative;overflow:hidden}
.riga-tit .grande .ph{font-size:52px}
.riga-tit .grande img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* skeleton di caricamento */
.card.sk{pointer-events:none}
.sk-b,.card.sk .cov{background:linear-gradient(90deg,#242424 25%,#2e2e2e 37%,#242424 63%);
  background-size:400% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ===== v3: login deep-link, scheda playlist ===== */
.btn-login{display:inline-block;text-align:center;text-decoration:none;border:0;cursor:pointer;background:var(--accent);color:#000;font-weight:800;font-size:16px;padding:14px 30px;border-radius:999px}
.btn-login:hover{background:var(--accent2);transform:scale(1.03)}
.btn-login.ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.btn-login.ghost:hover{background:rgba(255,255,255,.06);transform:none}
.muto{color:var(--txt2);font-size:13px;margin-top:16px;line-height:1.45;max-width:340px}
.pl-grande{background:linear-gradient(135deg,#43338a,#1db954)}

/* ===== v4: topbar icone, multiselezione, impostazioni, sotto-schede, responsive ===== */
.icona-btn{font-size:19px;color:var(--txt2);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none}
.icona-btn:hover{color:#fff;background:var(--bg3)}
.icona-btn.on{color:var(--accent);background:var(--bg3)}

/* selezione multipla brani */
body.selez .b-add{display:none}
.brano.sel{background:rgba(29,185,84,.15);outline:1px solid var(--accent)}
.brano.sel .b-idx .n{color:var(--accent);opacity:1}
.selbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--pl-h) + 14px);z-index:40;
  display:flex;align-items:center;gap:14px;background:#282828;padding:10px 16px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.55)}
.selbar .btn{padding:8px 16px;font-size:13px}

/* impostazioni */
.imp-sez{padding:14px 0;border-top:1px solid #3a3a3a}
.imp-sez:first-of-type{border-top:none}
.imp-tit{font-weight:700;margin-bottom:6px}

/* sotto-schede playlist */
.subtab{display:flex;align-items:center;gap:8px;margin:6px 0 18px;flex-wrap:wrap}
.subtab .st{padding:8px 16px;border-radius:999px;background:var(--bg3);color:var(--txt2);font-weight:700;font-size:13px}
.subtab .st.attiva{background:#fff;color:#000}
.btn.mini{padding:8px 16px;font-size:13px}

/* fluidità / adattabilità a ogni schermo */
.griglia{grid-template-columns:repeat(auto-fill,minmax(clamp(116px,28vw,168px),1fr))}
.card:active{transform:scale(.97)}
.nav,.pl-item,.brano,.card,.btn,.icona-btn{transition:background .18s,color .18s,transform .12s}
@media (max-width:760px){
  .saluto{font-size:24px}
  .selbar{width:calc(100% - 24px);justify-content:space-between;gap:8px}
  .selbar .btn{padding:8px 12px}
  .riga-tit .grande{width:96px;height:96px;font-size:40px}
  .topbar{padding:10px 14px;gap:8px}
}
@media (min-width:1500px){ .vista{max-width:1400px} }

/* ===== v5: vista a lista (oltre griglia) ===== */
.griglia.lista{display:flex;flex-direction:column;gap:6px}
.griglia.lista .card{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;padding:8px 10px}
.griglia.lista .card .cov{width:52px;height:52px;aspect-ratio:1;margin-bottom:0}
.griglia.lista .card .cov .ph{font-size:22px}
.griglia.lista .card .play-ov{display:none}

/* ===== v6: stato offline (badge globale + icona per brano + gestione spazio) ===== */
.badge-off{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;
  background:#2a2a2a;color:var(--muto);line-height:1.6}
.badge-off.ok{background:rgba(34,197,94,.16);color:#22c55e}
.badge-off.parz{background:rgba(245,158,11,.16);color:#f59e0b}
.brano.locale .b-tit::after{content:'⤓';margin-left:7px;color:var(--accent);font-size:12px;vertical-align:middle}
.off-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.off-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#1c1c1c;border-radius:10px;padding:8px 12px;font-size:14px}
.off-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.mini{padding:5px 10px;font-size:12px;border-radius:8px}
/* drag-to-select: niente selezione-testo durante il trascinamento; durante il "pittore" su touch blocca lo scroll */
body.selez{-webkit-user-select:none;user-select:none}
body.drag-sel .brano{touch-action:none}

/* ===== v7: auth nativa (form accesso/registrazione) + inviti admin ===== */
#tg-login{width:100%;max-width:300px}
#form-auth{display:flex;flex-direction:column;gap:10px;width:100%}
#form-auth input{width:100%;padding:13px 16px;border-radius:10px;border:1px solid #3a3a3a;background:#2a2a2a;color:#fff;font-size:15px}
#form-auth input:focus{outline:none;border-color:var(--accent)}
#form-auth .btn-login{margin-top:2px}
.link-switch{background:none;border:0;color:var(--txt2);font-size:13px;text-decoration:underline;cursor:pointer;padding:6px}
.link-switch:hover{color:#fff}
#login-stato code,.off-item code{background:#000;padding:2px 6px;border-radius:6px;font-size:12px;word-break:break-all}
.imp-check{display:flex;align-items:center;gap:8px;color:var(--txt2);font-size:14px;margin:6px 0}
.imp-check input{width:auto}

/* ===== v8: rifinitura Spotify-like (hover-lift, scrollbar, accenti) ===== */
.card{transition:background .2s, box-shadow .2s, transform .12s}
.card:hover{box-shadow:0 12px 28px rgba(0,0,0,.45)}
.saluto,.sez{letter-spacing:-.02em}
.search-wrap input::placeholder{color:#8a8a8a}
/* slider: niente sfondo di hover che coprirebbe il riempimento verde inline */
input[type=range]:hover{background:inherit}
/* scrollbar discreta (desktop) */
.main::-webkit-scrollbar,.pl-list::-webkit-scrollbar{width:10px}
.main::-webkit-scrollbar-thumb,.pl-list::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:8px;border:2px solid transparent;background-clip:content-box}
.main:hover::-webkit-scrollbar-thumb{background:#4a4a4a;background-clip:content-box}
.main::-webkit-scrollbar-track{background:transparent}
@media(min-width:761px){
  .nav.attiva{box-shadow:inset 3px 0 0 var(--accent)}
  .p-ctrl .big{width:42px;height:42px;font-size:17px}
}

/* ===== v9: icone SVG dei controlli + safe-area iPhone (notch / Dynamic Island / home indicator) ===== */
.ic{width:1em;height:1em;display:block;pointer-events:none;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px}   /* allinea icona+testo nei pill */
.p-ctrl button{display:grid;place-items:center;font-size:22px;color:var(--txt2)}
.p-ctrl button:hover{color:#fff}
.p-ctrl .big{display:grid;place-items:center}
.p-ctrl .big .ic{width:18px;height:18px;margin-left:1px}     /* centratura ottica del triangolo */
.p-right button{display:grid;place-items:center;font-size:20px;color:var(--txt2)}
.p-right button:hover,.p-right button.on{color:var(--accent)}
.play-ov{display:grid;place-items:center}
.play-ov .ic{width:18px;height:18px;margin-left:2px}
.b-idx .pl .ic{width:13px;height:13px;margin-left:1px}

/* la web-app sta sotto la status bar (status-bar-style black-translucent): rientri di sicurezza */
.topbar{padding-top:calc(14px + env(safe-area-inset-top));
  padding-left:calc(24px + env(safe-area-inset-left));
  padding-right:calc(24px + env(safe-area-inset-right))}
.login{padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom))}
@media (max-width:760px){
  .topbar{padding:calc(8px + env(safe-area-inset-top)) 14px 8px}
  .app{grid-template-rows:1fr auto auto}                       /* la riga player è 'auto': collassa quando è nascosto */
  .player{min-height:var(--pl-h);padding-bottom:env(safe-area-inset-bottom)}
  .app:has(#player.hidden) .sidebar{padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .vista{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .selbar{bottom:calc(var(--pl-h) + 16px + env(safe-area-inset-bottom))}
}

/* ===== v10: redesign (logo mosaico, tessere libreria, accento teal, player full-screen) ===== */
.logo-mosaico{display:inline-grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;width:24px;height:24px;vertical-align:middle;flex:none}
.logo-mosaico i{display:block;border-radius:3px}
.logo-mosaico i:nth-child(1){background:var(--viola)} .logo-mosaico i:nth-child(2){background:var(--blu)}
.logo-mosaico i:nth-child(3){background:var(--teal)}  .logo-mosaico i:nth-child(4){background:var(--rosa)}
.brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:600;padding:12px 12px 8px;letter-spacing:.2px}
.login .logo-mosaico{width:54px;height:54px;gap:4px;margin:0 auto 14px}

/* tessere della libreria (home) */
.tessere{display:flex;flex-direction:column;margin:6px 0 8px}
.tessera{display:flex;align-items:center;gap:14px;padding:12px 6px;border-bottom:1px solid #1c1c22;cursor:pointer;text-align:left;width:100%;background:none}
.tessera:last-child{border-bottom:0}
.tessera:active{opacity:.65}
.tessera .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none}
.tessera .ico .ic{width:23px;height:23px}
.tessera .ico.viola{background:var(--viola)} .tessera .ico.teal{background:var(--teal)}
.tessera .ico.coral{background:var(--coral)} .tessera .ico.blu{background:var(--blu)}
.tessera .tx{flex:1;min-width:0}
.tessera .tx b{display:block;font-size:16px;font-weight:600;color:var(--txt)}
.tessera .tx small{color:var(--txt2);font-size:13px}
.tessera .chev{color:#55555d;font-size:18px;display:grid;place-items:center}
.tessera .chev .ic{width:16px;height:16px}

/* player bottom-bar: play teal + cover tappabile per il full-screen */
.p-ctrl .big{background:var(--accent);color:#05140f}
.p-ctrl .big:hover{background:var(--accent2)}
.p-info{cursor:pointer}

/* nav icone */
.nav .ic{width:21px;height:21px}
.nav{font-weight:600}

/* player a TUTTO SCHERMO */
.pf{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;
  padding:calc(16px + env(safe-area-inset-top)) 22px calc(26px + env(safe-area-inset-bottom));animation:pfUp .25s ease}
@keyframes pfUp{from{transform:translateY(100%)}to{transform:none}}
.pf-top{display:flex;align-items:center;justify-content:space-between;color:var(--txt2);font-size:12px;letter-spacing:.5px}
.pf-top button{color:var(--txt2);font-size:24px;display:grid;place-items:center}
.pf-top button .ic{width:22px;height:22px}
.pf-cover-wrap{flex:1;display:grid;place-items:center;min-height:0;padding:18px 0}
.pf-cover{width:min(74vw,320px);aspect-ratio:1;border-radius:18px;background:var(--viola);display:grid;place-items:center;overflow:hidden;position:relative}
.pf-cover .ph{font-size:64px;opacity:.85}
.pf-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-meta #pf-tit{font-size:22px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-meta #pf-art{color:var(--txt2);font-size:15px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-seek{margin-top:14px}
.pf-seek input{width:100%}
.pf-times{display:flex;justify-content:space-between;color:var(--txt2);font-size:11px;margin-top:4px;font-variant-numeric:tabular-nums}
.pf-ctrl{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.pf-ctrl button{color:var(--txt);display:grid;place-items:center;font-size:30px}
.pf-ctrl button .ic{width:28px;height:28px}
.pf-ctrl #pf-shuffle,.pf-ctrl #pf-rep{color:var(--txt2)} .pf-ctrl #pf-shuffle .ic,.pf-ctrl #pf-rep .ic{width:22px;height:22px}
.pf-ctrl #pf-shuffle.on,.pf-ctrl #pf-rep.on{color:var(--accent)}
.pf-ctrl .big{width:66px;height:66px;border-radius:50%;background:var(--accent);color:#05140f}
.pf-ctrl .big .ic{width:28px;height:28px;margin-left:2px}
.fonte{display:flex;align-items:center;gap:9px;background:var(--bg2);border-radius:12px;padding:11px 13px;margin-top:18px;color:var(--txt2);font-size:12px}
.fonte .ic{width:16px;height:16px;flex:none}
.fonte .tg{color:#3b9eea} .fonte .ok{color:var(--accent)}

/* splash di caricamento (login usato come schermata d'attesa mentre l'auth al NAS — lenta da fuori — è in corso) */
.login.caricamento .logo-mosaico{animation:mzPulse 1.05s ease-in-out infinite}
.login.caricamento #tg-login{color:var(--txt2)}
@keyframes mzPulse{0%,100%{opacity:.4;transform:scale(.92)}50%{opacity:1;transform:scale(1.05)}}

/* --- Playlist ufficiali di YouTube (proposte home + scheda "Da YouTube" + anteprima) --- */
.uff-row{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.uff-row::-webkit-scrollbar{display:none}
.uff-card{flex:0 0 132px;display:flex;flex-direction:column;gap:7px;background:none;border:0;padding:0;cursor:pointer;text-align:left;color:var(--txt)}
.uff-card b{font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.uff-card .uff-cov{width:132px;height:132px}
.uff-cov{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:12px;background:var(--bg2);overflow:hidden;font-size:28px}
.uff-cov img{width:100%;height:100%;object-fit:cover}
.uff-sez{margin:6px 0 16px}
.uff-sez h3{font-size:15px;margin:0 0 8px}
.uff-lista{display:flex;flex-direction:column;gap:6px}
.uff-item{display:flex;align-items:center;gap:12px;width:100%;background:var(--bg2);border:0;border-radius:12px;padding:8px 12px;cursor:pointer;color:var(--txt);text-align:left}
.uff-item:active{background:var(--bg3,#1c1c24)}
.uff-item .uff-cov{flex:none;width:48px;height:48px;border-radius:9px;font-size:20px}
.uff-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.uff-txt b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uff-txt i{font-size:12px;color:var(--txt2);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uff-go{flex:none;color:var(--txt2)} .uff-go .ic{width:18px;height:18px}
.anteprima h3{margin:0 0 4px;font-size:17px}
.anteprima .muto{color:var(--txt2);font-size:13px;margin:2px 0}
.anteprima .small{font-size:12px;max-height:54px;overflow:hidden}
.ant-top{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.ant-top img{width:84px;height:84px;border-radius:12px;object-fit:cover;flex:none}
.ant-tracce{margin-top:14px;max-height:38vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.ant-tr{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.ant-tr>span{width:22px;text-align:right;color:var(--txt2);font-size:12px;flex:none}
.ant-tr b{font-size:13px;font-weight:600}
.ant-tr i{display:block;font-size:12px;color:var(--txt2);font-style:normal}

/* ============ RISKIN stile ytify — STADIO 1: rifinitura visiva (solo CSS, logica intatta) ============ */
/* angoli più morbidi e moderni ovunque */
.card{border-radius:15px;padding:12px;background:var(--bg2)}
.card:hover{background:var(--bg3)}
.card .cov{border-radius:12px;margin-bottom:10px}
.card .c-tit{font-weight:600}
.brano{border-radius:12px;padding:9px 12px}
.brano:hover{background:var(--bg2)}
.brano .b-tit{font-weight:500;font-size:15px}
.griglia{gap:14px}
.btn{border-radius:14px;font-weight:600}
.btn.verde{color:#04342c}
.ris{border-radius:12px}
.search-wrap input{border-radius:14px;background:var(--bg2)}
.riga-tit .grande{border-radius:16px}
.modale-box{border-radius:18px;max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.scelta{border-radius:10px}
.toast{border-radius:16px}
/* mini player più morbido */
.player{background:var(--bg2)}
.p-info img{border-radius:10px}
/* player a TUTTO SCHERMO: copertina più grande e morbida, più respiro */
.pf-cover{border-radius:24px;width:min(78vw,330px)}
.pf-meta #pf-tit{font-size:21px;font-weight:600}
.pf-ctrl{margin-top:20px}
.fonte{border-radius:14px;margin-top:20px;background:var(--bg2)}
/* barra di scorrimento del player in teal */
.pf-seek input{height:5px} .pf-seek input::-webkit-slider-thumb{width:15px;height:15px;background:var(--accent)}
/* nav in basso: stato attivo morbido in teal invece del blocco pieno */
@media (max-width:760px){
  .sidebar{background:#0b0b0f;border-top:1px solid #1c1c22}
  .nav{border-radius:12px}
  .nav.attiva{background:transparent;color:var(--accent)}
  .nav:hover{background:transparent;color:#fff}
}

/* stadio 2: cuore nel player, riga "in coda", copertina a mosaico */
#pf-cuore{color:var(--txt2);display:grid;place-items:center} #pf-cuore .ic{width:24px;height:24px} #pf-cuore.on{color:#ec4899}
.pf-coda{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 13px;background:var(--bg2);border-radius:14px;font-size:12px;color:var(--txt2)}
.pf-coda .pc-lbl{flex:none;text-transform:uppercase;letter-spacing:.4px;font-size:10px}
.pf-coda .pc-tit{color:var(--txt);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-coda .pc-art{flex:none;white-space:nowrap}
.ph.mos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:100%;height:100%;font-size:0;border-radius:inherit;overflow:hidden}
.ph.mos i{display:block}

/* gestione playlist dall'app: ＋/✕ sulle righe (su mobile niente hover → sempre visibile) + modali prompt/scelta */
.brano button.b-add{opacity:.5;background:none;border:none;cursor:pointer;font-size:18px;line-height:1;color:var(--txt2)}
.brano button.b-add:hover{opacity:1;color:#fff}
@media (hover:none){.brano button.b-add{opacity:.7}}
.mp-tit{margin-bottom:12px;font-size:18px}
.mp-inp{width:100%;padding:12px;border-radius:8px;border:none;background:#3e3e3e;color:#fff;font-size:15px}
.mp-conf{margin:.2em 0 .4em;line-height:1.5}
.mp-lista{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:4px 0}
.mp-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 10px;border-radius:10px;text-align:left;color:#fff}
.mp-row:hover{background:#3a3a3a}
.mp-row .mp-ico{font-size:18px;width:24px;text-align:center;flex:none}
.mp-row .mp-nome{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-row .mp-n{color:var(--txt2);font-size:13px;flex:none}
.mp-row.nuova{border-top:1px solid #3a3a3a;margin-top:6px;color:var(--accent)}
.nuova-pl-cta{margin:0 0 14px}
.card .cov.tondo{border-radius:50%}
/* titoli lunghi nei risultati di ricerca: marquee a rimbalzo (eccedenza --shift e durata --dur calcolate in JS) */
.ris .r-txt .r-scroll{display:inline-block;white-space:nowrap;will-change:transform}
.ris .r-txt.scorre{text-overflow:clip}
.ris .r-txt.scorre .r-scroll{animation:rimbalzoTitolo var(--dur,6s) ease-in-out infinite alternate}
@keyframes rimbalzoTitolo{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(calc(-1 * var(--shift,0px)))}}
@media (prefers-reduced-motion:reduce){.ris .r-txt.scorre .r-scroll{animation:none}}
/* login PWA standalone: campo "incolla codice di accesso" */
#login-codice{margin-top:16px;display:flex;flex-direction:column;gap:8px;width:min(320px,80vw)}
#login-codice input{padding:11px 12px;border-radius:8px;border:1px solid #444;background:#1c1c22;color:#fff;font-size:14px;width:100%}
/* home a scaffali (stile Spotify): card responsive con sottotitolo */
.uff-card{flex:0 0 clamp(120px,38vw,154px)}
.uff-card .uff-cov{width:100%;height:auto}
.uff-card .uff-cov.tondo{border-radius:50%}
.uff-card small{display:block;color:var(--txt2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-1px}
#home-uff .sez:first-child{margin-top:18px}
/* responsive: combacia con qualunque schermo (altezza dinamica + type fluido + topbar compatta) */
html,body{height:100dvh}
.app{height:100dvh}
.saluto{font-size:clamp(22px,6.2vw,30px);margin:14px 0 6px}
.sez{font-size:clamp(16px,4.6vw,20px)}
@media (max-width:760px){
  .topbar{gap:7px}
  .search-wrap{min-width:0;flex:1 1 auto}
  .badge-off{font-size:11px;padding:4px 8px;max-width:30vw;overflow:hidden;text-overflow:ellipsis}
  .icona-btn{width:36px;height:36px;font-size:18px}
}