/* Loader – centrato */
.dv-loader{
  width:100%;
  padding:28px 0;
  display:flex;
  flex-direction:column;
  align-items:center;   /* centra barra e testi */
  gap:10px;
}
.dv-loader-title{
  font-weight:600;
  margin:0;
  text-align:center;    /* titolo centrato */
}
.dv-loader-bar{
  width:min(720px,90%);
  height:12px;
  margin:0 auto;        /* barra centrata */
  background:#f3f4f6;
  border-radius:9999px;
  overflow:hidden;
}
.dv-loader-bar>span{
  display:block;
  height:100%;
  width:0;
  background:#111827;
  transition:width .25s;
}
.dv-loader-pct{
  margin:0;
  font-size:14px;
  opacity:.85;
  text-align:center;    /* percentuale centrata */
}

/* Toolbar */
.dv-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0 14px}
.dv-bar .dv-ctrl{height:48px;border:1px solid #e4e4ea;border-radius:12px;background:#fff;padding:10px 14px;font-size:16px;line-height:1}
.dv-order{width:48px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.dv-order svg{transition:transform .15s}
.dv-order.is-desc svg{transform:rotate(180deg)}
.dv-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#666 50%),linear-gradient(135deg,#666 50%,transparent 50%),linear-gradient(to right,#ddd,#ddd);background-position:calc(100% - 20px) calc(1em + 6px),calc(100% - 15px) calc(1em + 6px),calc(100% - 2.5rem) .9em;background-size:5px 5px,5px 5px,1px 24px;background-repeat:no-repeat;padding-right:44px}
.dv-search{flex:1;min-width:260px}
.dv-status{font-size:12px;opacity:.8;margin-left:auto;white-space:nowrap}

/* Griglia */
.dv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}

/* Card classica */
.dv-card .dv-square{position:relative;padding-top:100%;overflow:hidden;background:#f7f7f7}
.dv-card .dv-square img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dv-grid .dv-card{transition:box-shadow .15s}
.dv-grid .dv-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08)}

/* Visuale moderna */
.dv-tile{position:relative;display:block;overflow:hidden;border:none;padding:0;background:none;cursor:pointer}
.dv-tile img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.dv-tile .dv-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s ease;color:#fff;text-align:center;padding:12px}
.dv-tile:hover .dv-ov{opacity:1}
.dv-ov-inner{display:flex;flex-direction:column;gap:6px;align-items:center}
.dv-ov-artist{font-weight:600;font-size:15px}
.dv-ov-title{font-size:14px}
.dv-ov-meta{font-size:12px;opacity:.85}

/* Badge formato (in basso a sinistra) */
.dv-badge{
  position:absolute; left:8px; bottom:8px;
  display:flex; gap:6px; align-items:center;
  padding:6px 8px; font-size:12px; line-height:1;
  color:#fff; background:rgba(0,0,0,.65);
  border-radius:10px; backdrop-filter:blur(2px);
  transition:opacity .15s; pointer-events:none; z-index:2
}
/* icone outline nitide */
.dv-badge svg{
  width:16px; height:16px;
  stroke:currentColor; fill:none; stroke-width:1.8;
  display:block;
}
.dv-tile:hover .dv-badge, .dv-card:hover .dv-badge{opacity:0}

/* Modale */
.dv-modal{backdrop-filter:blur(.5px)}