/* demo-tape.css — integrazioni di fedeltà UI sopra combined.min.css (bundle originale).
   Solo ciò che l'originale non copriva: rebrand wordmark demo-tape, heading chart,
   pagine senza markup archiviato (Demos splash, Channels, directory a card, landing),
   slider volume senza jQuery-UI. Palette: vedi docs/ui/design-tokens.md. */

/* — Wordmark demo-tape (sostituisce l'immagine DEMODROP) — */
.dt-logo{display:block;padding:14px 20px 6px;color:#fff;font-weight:800;font-size:27px;line-height:.95;letter-spacing:1px;text-transform:uppercase;font-family:'Open Sans',sans-serif}
.dt-logo small{display:block;font-size:27px;font-weight:800;letter-spacing:1px}
#main-logo:hover .dt-logo{color:#fff}

/* — Chart heading (Chart.png: titolo grande + sottotitolo azzurrato) — */
.chart-heading{font-size:34px;line-height:1.15;margin:5px 0 0}
.chart-subtitle{font-size:19px;color:#8fa6b2;margin:2px 0 12px}

/* — Splash Demos (Demos.png) — */
.splash-page{max-width:1100px;margin:0 auto;padding:60px 20px 40px;text-align:center}
.splash-title{font-size:44px;font-weight:600;color:#fff;letter-spacing:2px;text-transform:uppercase;margin-bottom:60px}
.splash-cols{display:flex;justify-content:center;gap:60px;flex-wrap:wrap}
.splash-col{flex:0 1 420px}
.splash-text{font-size:30px;line-height:1.35;color:#cfd8dc;font-weight:300}
.splash-text strong{color:#fff;font-weight:600}
.splash-hr{border:none;border-top:1px solid rgba(255,255,255,.15);width:60%;margin:35px auto}
.splash-col .button{font-size:15px;padding:12px 28px;line-height:normal}

/* — Channels (Channels.png) — */
.channels-page{max-width:640px;margin:0 auto;padding:80px 20px;text-align:center}
.channels-title{font-size:46px;font-weight:600;color:#fff;margin-bottom:25px}
.channels-title .hash-mark{color:#9aa4a8}
.channels-sub{font-size:16px;color:#cfd8dc;margin-bottom:30px}
.channels-page hr{border:none;border-top:1px solid rgba(255,255,255,.12);margin:25px 0}
.channels-search{width:100%;box-sizing:border-box;background:#262b2e;border:none;border-radius:3px;color:#eee;padding:12px 14px;font-size:14px}
.channels-suggested{font-size:26px;font-weight:600;color:#fff;margin:10px 0 18px}
.channel-tags a{color:#fff;font-size:19px;margin:0 8px;line-height:1.9;display:inline-block}
.channel-tags a:before{content:'# ';color:#8a9499}
.channel-tags a:hover{color:#e30d7f}

/* — Directory a card (DJs-Producers.png / Record-Lables.png / Radioshows.png) — */
.dir-filters .leftmenu-sub{margin-top:25px}
.dir-filters input[type=text]{width:100%;box-sizing:border-box;background:#262b2e;border:none;border-radius:3px;color:#eee;padding:9px 10px;font-size:13px}
.dir-filters .type-chip{display:inline-block;background:#3a4145;color:#ddd;border-radius:3px;padding:6px 10px;font-size:13px}
.dir-filters .type-chip i{opacity:.6;margin-right:6px}
ul.user-grid{margin:20px 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
ul.user-grid li.user-card{width:212px;background:rgba(0,0,0,.12);border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.15)}
.user-card .grid-cover{height:212px;position:relative;background-size:cover;background-position:center;background-color:#20262a;transition:background-color .3s}
.user-card .grid-cover .play-controls{position:absolute;inset:0;text-align:center}
.user-card .grid-cover .control{opacity:0;font-size:70px;line-height:212px;color:rgba(255,255,255,.85);transition:opacity .4s;cursor:pointer}
.user-card .grid-cover:hover .control{opacity:1}
.user-card .card-body{padding:14px 12px;text-align:center}
.user-card .card-name{font-size:17px;font-weight:600;color:#fff;display:block}
.user-card .card-name .fa-check-circle{color:#4a90d9;font-size:13px;vertical-align:super}
.user-card .card-city{color:#8a9499;font-size:13px;margin:6px 0 10px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px}
.user-card .card-stats{color:#8a9499;font-size:13px;text-align:left;line-height:1.7}
.user-card .card-stats strong{color:#fff;font-weight:600}
.user-card .card-section{margin-top:12px;color:#8a9499;font-size:13px;text-align:left}
.user-card .card-section .lbl{display:block;color:#77828a}
.user-card .card-section .val{color:#dfe6ea;font-weight:600;display:block;line-height:1.6}
.user-card .card-actions{display:flex;gap:4px;margin-top:14px}
.user-card .card-actions .play-btn{background:#ff5a5f;color:#fff;border-radius:3px;width:44px;line-height:34px;text-align:center;cursor:pointer}
.user-card .card-actions .button{flex:1;line-height:34px;padding:0}
.user-card .card-actions .msg-btn{background:#2c3236;color:#dfe6ea;border-radius:3px;width:40px;line-height:34px;text-align:center}

/* — Slider volume (riempimento blu come #volume-slider originale, senza jQuery-UI) — */
.dt-vol{display:inline-block;width:60px;height:4px;background:rgba(255,255,255,.2);border-radius:2px;vertical-align:middle;cursor:pointer;position:relative;top:-2px}
.dt-vol .fill{display:block;height:4px;background:#0097dd;border-radius:2px;pointer-events:none}

/* — Landing / Home (layout marketing, brief + Wayback pre-2020) — */
.landing{position:fixed;inset:0;overflow:auto;background:#0d0f10;z-index:5}
.landing-hero{min-height:100vh;display:flex;flex-direction:column;background-size:cover;background-position:center;background-image:linear-gradient(rgba(5,8,10,.55),rgba(5,8,10,.8)),url('../gfx/default-profile-bg.jpg')}
.landing-header{display:flex;justify-content:space-between;align-items:center;padding:22px 40px}
.landing-header .dt-logo{padding:0}
.landing-header .landing-auth a{color:#fff;font-size:14px;margin-left:26px;text-decoration:none}
.landing-header .landing-auth a:hover{text-decoration:underline}
.landing-center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 20px}
.landing-headline{font-size:52px;font-weight:300;color:#fff;letter-spacing:1px;text-transform:uppercase;max-width:900px;line-height:1.2}
.landing-headline strong{font-weight:700}
.landing-tagline{font-size:20px;color:#cfd8dc;margin:22px 0 40px;font-weight:300}
.landing-cta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.landing-cta .button{font-size:16px;padding:14px 34px;line-height:normal}
.landing-what{margin-top:34px}
.landing-what a{color:#9fb2bd;font-size:13px;letter-spacing:2px;text-transform:uppercase}
.landing-what a:hover{color:#fff}
.landing-counters{display:flex;justify-content:center;gap:90px;padding:45px 20px;background:rgba(0,0,0,.35);flex-wrap:wrap}
.landing-counters div{text-align:center;color:#8fa6b2;font-size:15px}
.landing-counters strong{display:block;color:#fff;font-size:40px;font-weight:600;line-height:1.2}

/* — Play righe SEMPRE visibile (richiesta utente: hover-only non bastava) —
     default tenue, pieno su hover/riga corrente; il CSS originale lo nascondeva (opacity:0)
     e su :hover lo colorava #111 (nero su scuro = invisibile).
     z-index OBBLIGATORI: il blocco titolo (.margin) copriva play/vote/by-user rendendo
     tutto NON cliccabile (click e hover finivano sul layer trasparente sopra). — */
ul.tables li.track .play-controls{opacity:1 !important;color:rgba(255,255,255,.45);top:30px;z-index:6}
ul.tables li.track:hover .play-controls,ul.tables li.track.current .play-controls{color:rgba(255,255,255,.95)}
ul.tables li.track .play-controls .control.play[onclick]:hover{color:#e30d7f;cursor:pointer}
ul.tables li.track .play-controls .control.play[onclick]{cursor:pointer}
/* pause per-riga (traccia in riproduzione): visibile, magenta, cliccabile */
ul.tables li.track .play-controls .control.stop{display:inline;color:#e30d7f;cursor:pointer}
/* position:ABSOLUTE (come il bundle originale): l'override precedente position:relative
   toglieva l'assoluto originale e faceva colare rank e blocco "By …" in fondo alla riga
   (bug allineamento chart segnalato 2026-07-08). Lo z-index resta e funziona anche così. */
ul.tables li.track .vote-controls,ul.tables li.track .position{position:absolute;z-index:7}
ul.tables li.track .track-controls{position:absolute;z-index:5}
/* il wrapper "By …" è largo quanto la riga: non deve mangiare i click degli elementi sottostanti */
ul.tables li.track .track-controls .p10 > div{pointer-events:none}
ul.tables li.track .track-controls .p10 > div a,
ul.tables li.track .track-controls .p10 > div img{pointer-events:auto}
ul.tables li.track .cover{z-index:4}

/* — Righe chart: rank + delta sulla DESTRA, colonna dedicata prima della cover
     (richiesta 2026-07-08 "sulla destra"). Prima era a sinistra vicino al play: i rank a
     3 cifre (#100, top100) sforavano i 56px e "compenetravano" il tasto play. Ora vive nel
     suo spazio a destra, centrato in verticale, mai a contatto col play (che resta a sinistra). */
ul.tables li.track.chart-row .position{
  left:auto; right:120px; top:50%; transform:translateY(-50%);
  width:52px; text-align:center; line-height:1.25;
}
ul.tables li.track.chart-row .position .change{display:block}
/* l'uploader (By …) si sposta a sinistra del rank per non sovrapporsi */
ul.tables li.track.chart-row .track-controls{right:185px}

/* — Sidebar: striscia sinistra CONTINUA (segnalazione 2026-07-08 "linea discontinua").
     I bordi per-elemento (link con border-left dal bundle, search/divider/footer senza)
     lasciavano micro-gap e gli <hr> dei separatori spezzavano visivamente la linea.
     Soluzione robusta: UNA striscia unica dietro tutto (pseudo-elemento su #top-menu,
     full-height), su cui il bordo magenta della voce attiva dipinge sopra. — */
/* Landing (module index) SEMPRE fullscreen senza sidebar, anche da loggati (2026-07-08):
   il bundle nasconde la sidebar solo per body.logged-out; qui la nascondiamo a prescindere
   dall'auth così il logo riporta alla "vera homepage" col video anche se sei loggato. */
#module.index #top-menu-placeholder{display:none}
#module.index{padding-left:0}
#module.index #content{position:static;max-width:100%;width:100%}

#top-menu{position:fixed}
#top-menu::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(255,255,255,.1);z-index:0;pointer-events:none}
#top-menu-ul,#top-menu > .center{position:relative;z-index:1}
/* separatori un filo più corti a sinistra: non toccano la striscia (richiesta "1mm più corti") */
#top-menu-ul li.divider hr.dark{margin-left:8px}
/* Il bundle mette border-left rgba(.1) su OGNI link: sovrapposto alla striscia raddoppiava
   l'alpha (banding più chiaro sui link, più scuro su search/divider). Bordo inattivo trasparente
   → solo la striscia dipinge l'inattivo; la voce .active tiene il magenta come unico override. */
#top-menu-ul > li > a:not(.active){border-left-color:transparent}

/* — Select scure: i menu a tendina nativi (ricerca /tracks, upload, settings)
     erano bianchi di default — uniformati alla palette (richiesta 2026-07-08). — */
#content select{background:#262b2e;color:#eee;border:1px solid rgba(255,255,255,.12);border-radius:3px;padding:7px 8px;font-size:13px;line-height:20px}
#content select:focus{outline:none;border-color:#e30d7f}
#content select option{background:#262b2e;color:#eee}

/* — Input/textarea scuri: nel bundle i .light sono bianchi (#fff) → cassetti bianchi sul tema scuro,
     incoerenti coi select già scuriti (settings/upload/login/register/tracks). Scuriamoli con la
     stessa palette. #content = solo il corpo pagina (NON header-search né admin Filament). Su mobile
     il layout non ha #content: si aggancia a body.dt-mobile (che vince su input.light per specificità). — */
#content input[type=text],#content input[type=email],#content input[type=url],#content input[type=password],#content input[type=search],#content input:not([type]),#content textarea,
body.dt-mobile input[type=text],body.dt-mobile input[type=email],body.dt-mobile input[type=url],body.dt-mobile input[type=password],body.dt-mobile input[type=search],body.dt-mobile input:not([type]),body.dt-mobile textarea{
  background:#262b2e;color:#eee;border:1px solid rgba(255,255,255,.12);border-radius:3px}
#content input[type=text]:focus,#content input[type=email]:focus,#content input[type=url]:focus,#content input[type=password]:focus,#content textarea:focus{outline:none;border-color:#e30d7f;background:#262b2e;color:#eee}
/* Placeholder leggibile sul fondo scuro */
#content input::placeholder,#content textarea::placeholder,body.dt-mobile input::placeholder,body.dt-mobile textarea::placeholder{color:#8a9499}
/* Select nativi scuri anche su mobile (la regola #content non li raggiunge nel layout mobile) */
body.dt-mobile select{background:#262b2e;color:#eee;border:1px solid rgba(255,255,255,.12);border-radius:3px}
body.dt-mobile select option{background:#262b2e;color:#eee}

[x-cloak]{display:none !important}

/* — Evidenza voto persistente: freccia magenta se hai up/down-votato — */
li.track.is-liked .vote-controls .vote-up,li.track.is-liked .vote-controls .vote-up i{color:#e30d7f !important}
li.track.is-disliked .vote-controls .vote-down,li.track.is-disliked .vote-controls .vote-down i{color:#e30d7f !important}
.vote-controls .vote-up:hover i,.vote-controls .vote-down:hover i{color:#e30d7f;cursor:pointer}
/* player: pollici colorati quando attivi (le classi green/red del bundle non bastavano al buio) */
#player .control .fa-thumbs-up.green{color:#2ecc71 !important}
#player .control .fa-thumbs-down.red{color:#e74c3c !important}

/* — Affordance link utente ("By …"): deve SEMBRARE cliccabile — */
a.by-user,a.userlink,.card-name{cursor:pointer}
a.by-user:hover,a.userlink:hover{color:#fff;text-decoration:underline}

/* — Tag anno: allineato ai variation-tag (stessa baseline) — */
.margin a.tag.tiny{position:relative;top:-3px;margin-top:5px;background:rgba(255,255,255,.12);color:#bbb}
.margin a.tag.tiny:hover{background:#e30d7f;color:#fff}

/* — Skeleton rows (load more / caricamento liste, come l'originale) — */
li.track.skeleton{pointer-events:none}
li.track.skeleton .sk{background:#23282c;border-radius:3px;display:block}
li.track.skeleton .sk-vote{width:18px;height:18px;margin:8px 0}
li.track.skeleton .sk-title{width:55%;height:16px;margin:10px 0 8px}
li.track.skeleton .sk-sub{width:38%;height:12px}
li.track.skeleton .sk-tag{width:70px;height:16px;display:inline-block;margin-left:6px}
li.track.skeleton .sk-by{width:110px;height:12px;margin-bottom:10px;float:right}

/* — Hovercard artista — */
#dt-hovercard{position:fixed;z-index:3000;width:300px;background:#1d1d1d;border:1px solid rgba(255,255,255,.12);border-radius:4px;box-shadow:0 6px 24px rgba(0,0,0,.6);padding:12px;display:none;color:#ccc;font-size:12px}
#dt-hovercard .hc-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
#dt-hovercard .hc-avatar{width:54px;height:54px;border-radius:3px;background:#20262a center/cover;background-image:url('../gfx/placeholder-cover.svg');flex:0 0 54px}
#dt-hovercard .hc-name{color:#fff;font-weight:700;font-size:15px;line-height:1.2}
#dt-hovercard .hc-type{color:#8fa6b2;font-size:11px}
#dt-hovercard .hc-loc{color:#8a9499;margin-bottom:6px}
#dt-hovercard .hc-genres{color:#dfe6ea;margin-bottom:6px}
#dt-hovercard .hc-bio{color:#9aa4a8;max-height:54px;overflow:hidden}
#dt-hovercard .hc-stats{margin-top:8px;color:#8a9499}
#dt-hovercard .hc-stats strong{color:#fff}

/* — Chips scelta generi (/my/genres) — */
.genre-chips{display:flex;flex-wrap:wrap;gap:10px}
.genre-chip{display:inline-block;padding:9px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.2);color:#ccc;font-size:14px;cursor:pointer;transition:all .15s}
.genre-chip:hover{border-color:#e30d7f;color:#fff}
.genre-chip.on{background:#e30d7f;border-color:#e30d7f;color:#fff;font-weight:600}

/* — Placeholder cassetta per risorse mancanti (cover/avatar) — */
.cover.no-cover,#cover.no-cover,.no-avatar,
.user-card .grid-cover,ul.grid li.promo .grid-cover.profile-bg{
  background-image:url('../gfx/placeholder-cover.svg');
  background-size:cover;background-position:center;
}
/* quando c'è una bg-image inline (cover reale) questa vince sul placeholder;
   se l'oggetto remoto è 404 il browser tiene il placeholder sottostante */

/* — Bottone accent magenta (brand): CTA che devono risaltare (es. "View public profile") — */
.button-magenta{background:#e30d7f;background-color:#e30d7f;color:#fff!important}
.button-magenta:hover{background:#c50a6d;background-color:#c50a6d}

/* — Fix mobile minimi — */
@media (max-width:760px){
  .landing-headline{font-size:30px}
  .landing-counters{gap:30px}
  .splash-cols{gap:30px}
  ul.user-grid li.user-card{width:100%}
}

/* Search /tracks: labels sit above their controls in one stable grid. This avoids the
   orphaned "Type:" label and keeps the country picker aligned with native selects. */
.tracks-search-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px;align-items:start}
.tracks-search-main{min-width:0}
.tracks-search-filters{display:grid;grid-template-columns:minmax(155px,1.45fr) minmax(120px,1fr) minmax(120px,1fr) minmax(92px,.75fr) minmax(165px,1.25fr);gap:12px;align-items:end;padding:10px 0 6px}
.tracks-search-field{display:block;min-width:0}
.tracks-search-field-label{display:block;margin:0 0 5px;color:#9eabb2;font-weight:500}
.tracks-search-field input,.tracks-search-field select,.tracks-search-field .country-picker-trigger{box-sizing:border-box;width:100%;min-width:0;height:36px;min-height:36px;margin:0;padding:6px 9px;font:inherit;font-size:13px;line-height:20px}
.tracks-search-country{min-width:0}
.country-picker-trigger{display:flex;box-sizing:border-box;width:100%;height:36px;min-height:36px;align-items:center;gap:7px;margin:0;padding:6px 9px;background:#262b2e;border:1px solid rgba(255,255,255,.12);border-radius:3px;color:#eee;font:inherit;font-size:13px;line-height:20px;text-align:left;cursor:pointer}
.country-picker-trigger:focus{outline:none;border-color:#e30d7f!important}
.country-picker-menu{background:#1d1d1d;color:#eee;border:1px solid #3a3a3a;border-radius:3px;max-height:280px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.country-picker-filter{box-sizing:border-box;height:36px;min-height:36px;margin:0;padding:6px 9px;font:inherit;font-size:13px;line-height:20px;color:#eee}
.country-picker-option{display:flex;box-sizing:border-box;width:100%;min-height:34px;align-items:center;gap:8px;margin:0;padding:7px 10px;background:#1d1d1d;background-image:none;border:0;border-radius:0;box-shadow:none;color:#eee;font:inherit;font-size:13px;line-height:20px;text-align:left;cursor:pointer}
.country-picker-option:hover,.country-picker-option:focus-visible,.country-picker-option[aria-selected="true"]{background:#2b2b2b;background-image:none;color:#fff}
.country-picker-option:focus-visible{outline:2px solid #e30d7f;outline-offset:-2px}
.tracks-search-hint{margin:0 0 14px}
.tracks-search-sort{display:flex;align-items:end;gap:2px;border-bottom:3px solid rgba(255,255,255,.1)}
.tracks-search-sort-label{padding:0 6px 8px 6px;white-space:nowrap}
.tracks-search-sort-option{display:inline-block;padding:8px 10px;font:inherit;font-size:13px;line-height:1.2;color:#ccc;background:transparent;border:0;border-bottom:3px solid transparent;margin-bottom:-3px;cursor:pointer}
.tracks-search-sort-option:hover{color:#fff}
.tracks-search-sort-option.is-active{color:#fff;font-weight:600;border-bottom-color:#e30d7f}
.tracks-search-aside{display:grid;gap:12px}
.tracks-search-signin{background:#fdf7dc;color:#333;border-radius:3px;padding:12px;font-size:13px}
.tracks-search-signin a{color:#333;font-weight:600}
.tracks-search-upload{display:block;width:100%;box-sizing:border-box;text-align:center}
@media (max-width:1100px){
  .tracks-search-layout{grid-template-columns:1fr}
  .tracks-search-aside{grid-template-columns:minmax(0,1fr) 220px;align-items:center}
  .tracks-search-aside .tracks-search-signin:only-child{grid-column:1/-1}
}
@media (max-width:760px){
  .tracks-search-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tracks-search-field:first-child{grid-column:1/-1}
  .tracks-search-aside{grid-template-columns:1fr}
  .tracks-search-sort{overflow-x:auto}
  .tracks-search-sort-label{display:none}
  .tracks-search-sort-option{white-space:nowrap}
}

/* Comment form: il bundle originale lo collassa a 45px (overflow:hidden) e lo apriva via jQuery
   (classe .open al focus) — JS mai portato nella ricostruzione, quindi i bottoni Post/Cancel
   restavano SEMPRE clippati fuori dall'area visibile (desktop e mobile). :focus-within riproduce
   il comportamento senza JS: il form si espande quando la textarea (o un figlio) ha il focus. */
.comment-form:focus-within { height: auto; }

/* My lists: azioni (checkbox / drag / rimozione) TUTTE nel gutter DESTRO — la cover della
   traccia è float:left a sinistra, un gutter sinistro ci finiva sopra (bug: checkbox nella
   cover). Stack da destra: [X][drag][check]. Il li ha padding-right per far spazio. */
/* La riga traccia è un layout ASSOLUTO tarato sulla cover a right:0 (100px) con, alla sua
   sinistra, il blocco .track-controls ("By utente" + hashtag) a right:110px e .margin
   (titolo/artista) largo 65%. I controlli della lista vanno all'ESTREMA DESTRA, quindi tutto
   il resto va spostato a sinistra DELLO STESSO delta (78px senza drag, 118px con), altrimenti
   gli elementi si sovrappongono: spostare la sola cover faceva finire "By utente"/tag sopra
   l'immagine. Larghezza della colonna controlli: [X 40] + [check 38] (+ [drag 38]). */
.tables li.track.mylist-row { position: relative; padding-right: 178px; }
.tables li.track.mylist-row:has(.mylist-drag) { padding-right: 218px; }
.tables li.track.mylist-row .cover { right: 78px; }
.tables li.track.mylist-row:has(.mylist-drag) .cover { right: 118px; }
/* Blocco "By utente" + hashtag: larghezza FISSA, così il titolo/artista a sinistra possono
   essere delimitati con certezza (nel layout originale è shrink-to-fit e si sovrapponeva al
   testo: con la riga più stretta la sovrapposizione diventava evidente). */
/* Larghezza del blocco meta: MINIMO 270px. Il caso peggiore misurato è una riga promossa
   ("bootleg-remix + genere + badge Promoted" ≈ 258px): sotto quella soglia le tag venivano
   troncate. Cresce col 32% della riga sugli schermi larghi.
   La variabile tiene sincronizzato il limite destro di .margin: se cambia una, cambia l'altra. */
.tables li.track.mylist-row { --mylist-meta: clamp(270px, 32%, 320px); }
.tables li.track.mylist-row .track-controls { right: 188px; width: var(--mylist-meta); }
.tables li.track.mylist-row:has(.mylist-drag) .track-controls { right: 228px; }
/* nome utente lungo: nowrap ereditato dalla riga lo farebbe DIPINGERE oltre il box (di nuovo
   sopra la cover) anche con la larghezza fissa → taglio esplicito. */
.tables li.track.mylist-row .track-controls .p10,
.tables li.track.mylist-row .track-controls .track-tags { overflow: hidden; text-overflow: ellipsis; }
/* Titolo/artista: delimitati PRIMA del blocco a destra (188+175+12 di respiro) → niente
   compenetrazione; il testo lungo va in ellissi come nel resto del sito. */
.tables li.track.mylist-row .margin { width: auto; right: calc(200px + var(--mylist-meta)); }
.tables li.track.mylist-row:has(.mylist-drag) .margin { right: calc(240px + var(--mylist-meta)); }
.tables li.track.mylist-row .song,
.tables li.track.mylist-row .artist,
.tables li.track.mylist-row .track-tags { max-width: 100%; }
.mylist-remove { position: absolute; right: 0; top: 0; bottom: 0; width: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #77828a; z-index: 6; }
.mylist-remove:hover { color: #fd4100; }
.mylist-drag { position: absolute; right: 40px; top: 0; bottom: 0; width: 38px; display: flex; align-items: center; justify-content: center; cursor: grab; color: #566067; touch-action: none; z-index: 6; }
.mylist-drag:active { cursor: grabbing; color: #9fb2bd; }
/* checkbox: a sinistra dello stack destro (dopo il drag se c'è, altrimenti dopo la X) */
.mylist-check { position: absolute; right: 40px; top: 0; bottom: 0; width: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 6; }
.tables li.track.mylist-row:has(.mylist-drag) .mylist-check { right: 78px; }
.mylist-check input { width: 16px; height: 16px; cursor: pointer; }
/* my/tracks: la riga è un flex con 3-4 righe di contenuto (titolo, artista, badge, statistiche),
   ma la regola legacy `ul.tables>li` impone height:52px + overflow:hidden → il titolo veniva
   tagliato in cima e le statistiche in fondo (misurato: 14px sulle righe senza artista, 27px su
   quelle con). L'altezza qui deve seguire il contenuto. */
.tables li.mt-row { height: auto; overflow: visible; }

/* Riga dei tab con il filtro paese a destra. flex-wrap: su schermi stretti il filtro scende
   sotto i tab invece di comprimerli fino a renderli illeggibili. */
.tabs-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tabs-row .tabs { flex: 1 1 auto; margin-bottom: 0; }
.country-filter { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding-bottom: 6px; }
.country-filter select {
  background: #20262a; border: 1px solid #333; color: #eee; border-radius: 3px;
  padding: 4px 6px; font-size: 12px; max-width: 190px;
}
.country-filter a { color: #9fb2bd; font-size: 15px; line-height: 1; padding: 0 2px; }
.country-filter a:hover { color: #fd4100; }

.sortable-ghost { opacity: .35; }
.sortable-chosen { background: #14202a !important; }

/* Scrollbar scura per i menu scrollabili (sidebar generi, ecc.): il default del browser era
   chiaro sul container semi-trasparente → stonava col dark del sito. Firefox: scrollbar-color;
   WebKit/Chromium: pseudo-elementi. Applicata anche ai bottom-sheet/scrollbox per coerenza. */
.leftmenu-holder.scrollable,
.rightmenu-holder.scrollable,
.scrollbox,
.dt-sheet-body {
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a #1c1c1c;
}
.leftmenu-holder.scrollable::-webkit-scrollbar,
.rightmenu-holder.scrollable::-webkit-scrollbar,
.scrollbox::-webkit-scrollbar,
.dt-sheet-body::-webkit-scrollbar { width: 10px; }
.leftmenu-holder.scrollable::-webkit-scrollbar-track,
.rightmenu-holder.scrollable::-webkit-scrollbar-track,
.scrollbox::-webkit-scrollbar-track,
.dt-sheet-body::-webkit-scrollbar-track { background: #1c1c1c; }
.leftmenu-holder.scrollable::-webkit-scrollbar-thumb,
.rightmenu-holder.scrollable::-webkit-scrollbar-thumb,
.scrollbox::-webkit-scrollbar-thumb,
.dt-sheet-body::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 5px; border: 2px solid #1c1c1c; }
.leftmenu-holder.scrollable::-webkit-scrollbar-thumb:hover,
.rightmenu-holder.scrollable::-webkit-scrollbar-thumb:hover,
.scrollbox::-webkit-scrollbar-thumb:hover,
.dt-sheet-body::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }

/* ============================================================================
   News & updates (/news) + link Discord.
   Le classi vivono qui e non inline nelle blade perche' servono in 4 viste
   (elenco, dettaglio, override mobile, nav).
   ============================================================================ */

/* Pallino "ci sono novita'" accanto alla voce News della sidebar. Non e' un contatore
   (non sappiamo quanti annunci non ha letto senza tenere righe per utente): e' un
   segnale acceso/spento, quindi un punto e non un badge numerico come Inbox. */
.dt-news-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #e30d7f;
    vertical-align: middle;
    margin-left: 6px;
}

.dt-news-list { list-style: none; margin: 0; padding: 0; }
.dt-news-list > li { margin-bottom: 10px; }

.dt-news-item {
    display: block;
    padding: 16px 18px;
    background: #1d1d1d;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.dt-news-item:hover { background: #232323; border-color: rgba(255, 255, 255, .18); }

.dt-news-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

.dt-news-badge {
    display: inline-block;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.dt-news-title { font-size: 17px; line-height: 1.3; margin-bottom: 6px; }
.dt-news-excerpt { line-height: 1.6; }

/* Corpo dell'annuncio: HTML libero scritto in admin. Serve dare stile a tag che altrove nel
   sito non compaiono mai (ul/ol/blockquote/h2), altrimenti un elenco puntato esce senza
   rientro ne' marcatori (reset del bundle). */
.dt-news-body { line-height: 1.75; font-size: 14px; }
.dt-news-body h2 { color: #fff; font-size: 19px; font-weight: 700; margin: 24px 0 8px; }
.dt-news-body h3 { color: #fff; font-size: 16px; font-weight: 700; margin: 20px 0 6px; }
.dt-news-body p { margin: 0 0 14px; }
.dt-news-body a { color: #e30d7f; text-decoration: underline; }
.dt-news-body ul, .dt-news-body ol { margin: 0 0 14px 22px; padding: 0; }
.dt-news-body ul { list-style: disc; }
.dt-news-body ol { list-style: decimal; }
.dt-news-body li { margin-bottom: 5px; }
.dt-news-body img { max-width: 100%; height: auto; border-radius: 4px; }
.dt-news-body code {
    background: #111; padding: 1px 5px; border-radius: 3px;
    font-family: Menlo, Consolas, monospace; font-size: 12px;
}
.dt-news-body pre {
    background: #111; padding: 12px 14px; border-radius: 4px;
    overflow-x: auto; margin: 0 0 14px;
}
.dt-news-body blockquote {
    border-left: 3px solid #e30d7f;
    margin: 0 0 14px; padding: 2px 0 2px 14px;
}
.dt-news-body hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .12); margin: 22px 0; }

/* Precedente / successivo in coda all'annuncio */
.dt-news-nav {
    display: flex; justify-content: space-between; gap: 16px;
    margin-top: 28px; padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.dt-news-nav > span { flex: 1 1 0; min-width: 0; }

/* Call-to-action Discord (blurb dentro le pagine news) */
.dt-discord-cta {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px; margin-bottom: 22px;
    background: #232838;
    border: 1px solid #5865f2;
    border-radius: 6px;
    text-decoration: none;
    line-height: 1.4;
}
.dt-discord-cta:hover { background: #2b3145; }
.dt-discord-cta .fa { color: #5865f2; font-size: 22px; flex: 0 0 auto; }

/* Link Discord nel footer della sidebar */
.dt-discord-link { color: #8b93f8 !important; font-weight: 600; }
.dt-discord-link:hover { color: #a8aefa !important; }