/* Modern dark player - minimal, smooth, rounded */
:root{
  --bg:#0f1114;
  --card:#121417;
  --muted:#9aa4ad;
  --accent:#1db954; /* green accent */
  --accent-2:#4dd0e1; /* secondary */
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
  --transition:200ms cubic-bezier(.2,.9,.3,1);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.dsap-player{
  background: linear-gradient(180deg,var(--card),#0b0c0d);
  color:#e9eef1;
  border-radius:var(--radius);
  padding:18px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  display:block;
  width:100%;
  box-sizing:border-box;
  border: 1px solid rgba(255,255,255,0.03);
}

.dsap-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dsap-left{display:flex;flex-direction:column;gap:8px}
.dsap-titles{display:flex;gap:8px;align-items:center}
.dsap-title{background:var(--glass);padding:6px 10px;border-radius:10px;font-weight:600;opacity:0.95;font-size:14px}
.dsap-meta{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center}

.dsap-right{display:flex;gap:8px;align-items:center}
.dsap-btn{background:linear-gradient(180deg,var(--accent),#14964a);border:none;color:#07120a;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer;box-shadow: 0 6px 18px rgba(29,185,84,0.12);transition:transform var(--transition), box-shadow var(--transition)}
.dsap-btn:hover{transform:translateY(-3px)}

.dsap-seek-row{margin-top:12px}
.dsap-seek{width:100%;-webkit-appearance:none;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--accent) 0%, var(--accent-2) 100%);outline:none;cursor:pointer;box-shadow: inset 0 -2px 6px rgba(0,0,0,0.4)}
.dsap-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#ffffff;border:3px solid rgba(0,0,0,0.2);box-shadow:0 6px 14px rgba(3,6,10,0.6);cursor:pointer}

.dsap-row.dsap-controls{display:flex;gap:18px;margin-top:14px;align-items:center}
.dsap-control-block{flex:1;display:flex;flex-direction:column;gap:8px}
.dsap-label{font-size:13px;color:var(--muted);font-weight:600}

.dsap-crossfader,.dsap-volume-slider{width:100%;-webkit-appearance:none;height:6px;border-radius:6px;background:linear-gradient(90deg,#222, #333);outline:none;cursor:pointer;box-shadow: inset 0 -1px 4px rgba(0,0,0,0.5)}
.dsap-crossfader::-webkit-slider-thumb,.dsap-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 6px 10px rgba(29,185,84,0.12);border:2px solid rgba(0,0,0,0.2)}

.dsap-status{margin-top:12px;font-size:13px;color:var(--muted)}
.dsap-error{background:#2b0b0b;color:#ffcfcc;padding:10px;border-radius:10px;border:1px solid rgba(255,0,0,0.06)}

/* responsive */
@media (max-width:520px){
  .dsap-top{flex-direction:column;align-items:flex-start}
  .dsap-right{width:100%;justify-content:flex-end}
  .dsap-btn{width:100%}
}